Cafecito

 

Responsibilities

Branding, UXUI, Product Design & Web Design

 

Project Brief

Cafecito is a project that I worked on as a part of the Google UX Design Professional Certificate course. My idea was to create a product provides consumers with many options of coffee drinks using recipes from all over the world.

Project Overview

Cafecito is a local coffee shop located in the suburbs of a metropolitan area. Cafecito aims to deliver coffee drinks from around the world. Cafecito targets customers like commuters, students and workers who like different types of coffee drinks.

The problem

Local coffee shops offer the same types of drinks. Consumers lack options.

The Goal

Design an app for Cafecito that allows users to easily order and pick up specific coffee drinks.

My Role

UIUX designer designing an app for Cafecito from conception to delivery.

Responsibilities

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

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 college students and adults who don’t have many choices of coffee in their area.

This user group confirmed initial assumptions about Cafecito customers, but research also revealed that coffee availability was not the only factor limiting users from consuming the coffee they want. Other user problems are the wait time for their coffee to be ready.

 

User research: pain points

Variety

Consumers do not have enough options in the area.

Availability

Coffee shops are not always available in all locations in the area.

Variety

Consumers want to know when to walk in and pick up their item.

Starting the design

  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Digital wireframes

As the initial design phase continued, I catered the designs based on the feedback and findings from the user research.

Low-fidelity prototype

I was able to design low-fidelity prototype based on all of the research. The primary user flow I connected was ordering and customizing a coffee drink, so the prototype could be used in a usability study.

View the Cafecito low-fidelity prototype

 

Usability study: findings

I conducted two rounds of usability studies. These helped guide the designs system from wireframes to mockups. The second study used a high-fidelity prototype and revealed what needed improvement.

Round 1 findings

  • Issues with navigation

  • Too many choices
  • Current back button was not useful

Round 2 findings

  • Missing payment option

  • Missing profile screen

Refining the design

  • Mockups
  • High-fidelity prototype
  • Accessibility

Mockups

Early designs allowed for limited customization and functionality. After the usability studies, I repurposed the main screen to be the landing and menu.

Mobile app before usability studies

Mobile app after usability studies

Web design before usability studies

Web design after usability studies

High-fidelity prototype

The final high-fidelity prototype resulted in a simple user flow that allows for easy customization and ordering in few steps.

View the Mobile high-fidelity prototype

View the Website high-fidelity prototype

 

 

Accessibility considerations

Large buttons with high contrast to assist visually impaired users.

Integrated Icons to help with the user’s experience.

Used high details imagery and will include alt text and captions.

Going forward

  • Takeaways
  • Next steps

Takeaways


Impact:

The app makes users feel like Cafecito meet their needs by making different coffee drinks available fairly quickly.

One quote from peer feedback:
“The app was so straightforward and easy to use, I will definitely use if it launches.

 

What I learned:
While designing the Cafecito app, I learned that the first ideas are super rough and there is a huge space between the the initial idea and the refined version. Usability studies assisted in the improvement of the app’s design.

 

Thank you!


I appreaciate you taking time to review my portfolio. Feel free to rech out if you have any questions or comments. 

Connect