Green Bean Coffee App

Project goal

During my first 3 weeks as an IBM UX Design intern, I worked on a UX mock project called Green Bean Coffee. Despite their success with home delivery, they are losing business since they don’t have a digital offer. In need for an online service that reflects in-store experience.

What I did

– Research (Costa Coffee, Starbucks + Coffee Nero)

– Identified KPIs to inform designs

– Draft persona with Goals, Needs and Frustrations

– Empathy maps

– AS IS/TO BE User Journeys

– Wireframing

– Prototyping

– Usability tests

– Final designs

Outcome

A concept online App design/protoype to easily showcase Green Bean Coffee drink options and service that reflects in store experience.

The detail

Research

My research goal was to produce knowledge about competitor coffee shops and select different features and Pain Points that could inform my app design. I have researched Costa Coffee, Starbucks and Caffè Nero. I went onto create a presentation with all my research making it easier to view and extract information.

Above: Costa Coffee Research

Above: Starbucks Research

Above: Caffè Nero Research

Identifying KPIs

Using my research I have identified key Pain Points, Requirements and KPIs to inform my designs. In addition to transferring the client brief into User Stories to help me understand the user‘ needs that must be addressed in my designs.

Draft Persona and Empathy Map

Helping me to understand my users’ needs, experiences, behaviours and goals. Afterward, I will develop a greater understanding of my users so that I can design a solution that meets their needs.

Empathy Maps

Capturing my target users’ overall sentiment and thinking helps me connect with them and create the foundations for a more detailed capture of needs, goals and frustrations.

AS IS/TO BE User Journeys

Drawing my target users’ journey in purchasing coffee reveals opportunities and insights into Pain Points that the solution would come to address.

Wireframing

Using Figma I created a site map, navigation and information architecture of the Green Bean Coffee App so I can depict the layout and content of pages and provide a high-level site, content and navigation overview.

Prototyping

Designing and building a clickable prototype of the Green Bean Coffee App using Figma will enable usability testing.

Usability Test

Using Mural I planned my usability test with two sections: Quantitative and Qualitative research. This is to test and ensure the app fulfils the user’ needs.

Above: Usability Test Pain Point findings

Usability Adjustments

The usability test then revealed a series of Pain Points in the user’s journey – the red posits. If they made another purchase, and if they were thinking aloud. In light of my findings, I iterated and refined my design. Here are the first and second iterations.