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!