Branding, UXUI, Product Design & Web Design
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.
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.
Local coffee shops offer the same types of drinks. Consumers lack options.
Design an app for Cafecito that allows users to easily order and pick up specific coffee drinks.
UIUX designer designing an app for Cafecito from conception to delivery.
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
Consumers do not have enough options in the area.
Coffee shops are not always available in all locations in the area.
Consumers want to know when to walk in and pick up their item.
Starting the design
- Digital wireframes
- Low-fidelity prototype
- Usability studies
As the initial design phase continued, I catered the designs based on the feedback and findings from the user research.
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.
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
- High-fidelity prototype
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
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.
- Next steps
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.