CoffeeShop

UX Design
Screenshot of the prototype created for the project CoffeeShop, showcasing various pages and how are they connected.
My Rol
My role in this project was everything UX related (designer, researcher, etc)
Project type
UX Design
Project year
2024

The product: 

The CoffeeShop is a regional coffee maker located in the center of London, UK. It strives to offer a great variety of coffee, imported from around the world. They also offer a some great healthy food options with great prices.

The problem: 

The users usually have to wait for their order to be ready when usually they are in a hurry to get to work, school, etc.

The goal: 

Design an app for CoffeeShop thaht allows users to easily order what they want and pick it up in their way.

Right arrow

Objective Users

Persona: Robert Swan

Problem statement:

Robert is a middle aged businessman who works in business who needs efficiency in the process of making his coffee order because he needs to get to work quickly.

Persona created for the project named Robert Swan, it contains all the info, goals, frustration, etc.

Results of the Usability Test

Findings

The first usability study we interviewed 5 users with the prototype, we took notes on how each user interacted and what can be modified to make it better.

  • Round 1 Findings
    • More instructions in how to order
    • Modify the cart to make the options clearer
    • More intuitive customization process
  • Round 2 Findings
    • Customization function is confusing
    • Order menu list different

MockUps Changes

Initially we thought that the customization page follows to the button tap to add cart, but after the usability studies, we decided to separate the process in to pages for a better user flow and make the process of customization easier.

Changes made to the customization process made after usability studies.

The second usability study revealed frustration with the searching flow. to streamline this flow, I added tabs to move through the different pages of the menu and visit the shopping cart to make the flow easier in every step. 

Changes made to the list product made after usability studies.

Accessibility considerations

  1. Provided access
    to users who are vision impaired through adding alternative  text to images for screen readers.
  2. Used icons to help make navigation and flow easier.
  3. Used detailed imagery for drinks and food to help all users better understand the product.

Initial Designs

Paper wireframes 

Taking the time to draft iterations of each screen of the app ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritize a quick and easy ordering process to help users save time

First iteration of the paper wireframes and the final result of their combination.

Digital wireframes 

- As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

- We wanted the user to search and made the order in the shop near them and this way is the most easy way to find it.

Low-fidelity prototype

Low fidelity prototype connected the primary user flow of browsing the menus and placing an order in the coffee shop, so the prototype could be used in a usability study with users.

View the CoffeeShop: Low-fidelity prototype

Low fidelity prototype, digital frames and how are they connected

High-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for making a coffee order. It also met user for an easier customization. 

High fidelity prototype, digital frames and how are they connected

Paper & Digital wireframes

Low fidelity prototype
Paper wireframes
First digital wireframe for the homepage app
First digital wireframe for the map page app
No items found.

MockUps

Screnshoot onf the homepage app of the project.
Screnshoot of the customitzation part for the app of the project.
Screnshoot of the cart website of the project.
Screnshoot of the confirmation page of the  app for the project.
No items found.

Conclusion

The goal of the app was that everyone needs while ordering a coffee were met, and I think that we accomplished that goal.While designing the CoffeeShop app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs to make a better product.

"I tried to use it and is so easy to use, I think it's a great solution for making your order"

by Robert Swan

Other projects

Let's work together!

As you can see in my portfolio with all my projects I’m passionate about creating intuitive, user-centered designs that solve real-world problems. Throughout my journey, I’ve honed my skills in user research, prototyping, and usability testing, using tools like Figma and Adobe XD. Feel free to explore and connect with me!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.