Case Study:
Chaterterz Cafe App Design
Project Overview
The Problem:
People who don’t want to stand on the line for ordering and wasting the time.
The Goal:
Fast and easy way to order the coffee and food.
The Product:
Characterz Cafe is a regional cafe located in the suburbs of a metropolitan area. Characterz Cafe strives to provide you with the freshest food and coffee paired with convenience. They offer a variety of sandwiches and salads along with hot daily specials. Characterz’s Cafe target customers like people who want their order quick and easy way to get.
Project duration:
August 2021 to November 2021
My Role:
UX designer designing an app for Characterz Cafe from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the user
After conducting the interviews and creating the empathy map to understand the users I am designing for and their needs. A primary group of users that I identified through research was working people who are busy want to order the food from to-go options.
This user group confirmed initial assumptions about Characterz Cafe customers, but research also relieved that time is not only the factor the users for getting the food from the cafe. Other user's problems included quality, long lines.
User pain points
Time
Working people are too busy so they want to pick their order fast.
Drive-thru
Long lines for picking the order, the drive-thru is more convenient.
Payment
Selections
Method of payment is slow and stuck in middle of the order
In the menu, the food ingredients are not clear.
Persona & Problem Statement
Madina is a junior Analyst who needs to know the ingredient of her food before ordering because she is Lactose intolerant.
User journey map
Mapping Madina’s user journey revealed how helpful it will be for users to access the Characterz cafe menu app.
Starting the design
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
For the home screen, I prioritized a quick and easy ordering process to help users save time.
Image of paper wireframes including five different versions of the same screen and one image of the new, refined version
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
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.
Refining the design
Mockups
Early designs allowed for some customization, but after the usability studies, I added the homepage ORDER NOW button clear and big. So the users easily see it and reach to the menu page.
To make the navigation flow even easier for users, I added a time choice option that allowed users to select the time as per their comfort.
Mockups screen
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for ordering the food and checkout. It also met user needs for a pickup or delivery option as well as more customization.
View Characterz Cafe Prototype Click here
Accessibility consideration
1. Icons
Used icons to help make
navigation easier.
2. Screen Readers
Provided access to users who are vision-impaired through adding alt text to images for screen readers.
Color change
Change the button colors with the accessibility contrast color.
Going forward
Takeaways
Impact:
The app makes users feel like Characterz’s Cafe really thinks about how to meet their needs.
One quote from peer feedback:
“The app made it so easy and get my coffee.
I would definitely use this app as a go-to for a ordering my coffee and breakfast.”
What I learned:
While designing the Characterz’s Cafe 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.
Next steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.