Yummy coffee app case study

Yummy Coffee App Design Erwin Gerard M. Lucela

Project overview

The product: The Yummy coffee shop is not your typical type of

coffeeshop located at the entrances of the condominium buildings of Makati city. It serves coffee enthusiasts in low price and deliver excellent service in making delicious coffee.

Project duration: April 2, 2022 – July 2, 2022

Project overview

The problem:

The goal:

Lazy students and corporate workers

Design an app of Yummy coffee to order hot

doesn’t have the time to make delicious

and fresh coffee and deliver in the user’s

coffee because of their workload.

doorsteps.

Project overview

My role:

Responsibilities:

UX designer making an app for Yummy coffee

Conducting interviews, paper and digital

from conception to delivery.

wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the user

●

User research

●

Personas

●

Problem statements

●

User journey maps

User research: summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults and teenagers who loves coffee but don’t have time to do it.

This user group confirmed initial assumptions about Yummy coffee’s customers, but research also revealed that time was not the only factor limiting users from making coffee at home.

There are the location deliveries and the store’s coverage of the user’s homes.

User research: pain points 1

2

3

Time

Delivery Coverage

Customer’s Comfort

The customers can’t prepare coffee because of work and engagements.

The customers will not go to store and enjoy waiting at their own home.

The customer will enjoy the benefit of having their own coffee at the expense of enhancement through request system.

Persona: Darren E.

Problem statement: Darren E. is a young working professional that needs freshly

prepared coffee because he likes it and doesn’t have the time and will to

do it.

User journey map [Mapping Darren E.’s user journey revealed how helpful it would be users to access to a Yummy coffee app]

Starting the design

●

Paper wireframes

●

Digital wireframes

●

Low-fidelity prototype

●

Usability studies

Paper wireframes [This is the wireframe of the Yummy coffee app]

Digital wireframes [The menu page is where you can order which coffee

The user can choose which drinks he can order to.

you like.]

You can order pastries too, not just drinks.

Digital wireframes [The choosing option to be able to know your payment method and the listing of delivery address.]

The choosing option to your preferred payment method.

Label to which your preferred destination.

Low-fidelity prototype [This is the flow chart of the Yummy

coffee app. It involves the home page, then the customer details filling out form, drinks menu, order checking menu and last the checkout page.]

This is the link to lo-fi prototype https://www.figma.com/file/uT8gp4geX GWvBYiG5ASkUi/Yummy-coffee-app-

wireframe?node-id=0%3A1

Usability study: findings I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings

Round 2 findings

1

Is the user knows where the delivery come from?

1

Could there be a transaction fee in the delivery? How much it costs?

2

An accessiblity option like you can choose your language and customer support.

2

There should be prices next to the product.

Refining the design

●

Mockups

●

High-fidelity prototype

●

Accessibility

Mockups [The logo page in the initial design phase is very simple yet direct to the point but after the usabilty study, I added the language option

so you can choose what language you will use]

Before usability study

After usability study

Mockups [In the wireframe period, this is the simple design of the app but the usabilty studies were conducted, I added the delivery

coverage button for the location of the delivery courier and the delivery

transaction fee.]

Before usability study

After usability study

Mockups

High-fidelity prototype https://www.figma.com/file/

StosrTAo3Eo0TgUpTCaYCQ/ Yummy-Coffee-App?nodeid=0%3A1

Accessibility considerations 1

2

3

Provide voice recognition system for individuals with sight deficiency.

Provide language options for non local customers..

Provided some customer support for persons who are newbie to computers.

Going forward

●

Takeaways

●

Next steps

Takeaways

Impact:

What I learned:

This app will bring in more customers for the

It’s easy when you’re designing with the

Yummy coffee and their regulars

users at hand in research and there are more ways to improve the app.

“I hope that this is the start for the new age of coffee industry” -Quote from a participant.

Next steps 1

2

3

Conduct more usabilty study to improve the Yummy coffee app.

Explore many designs so you can incorporate it to the future.

Learn to be patient and organize meetings on how you can better collaborate with your colleagues/teammates.

Let’s connect!

Thank you for your time reviewing my work on the Yummy coffee app! If you’d like to see more or get in touch, my contact information is provided below.

Email: ret0028@gmail.com

Thank you!