Mobile Cafe
Research Wireframes Prototypes Testing Iterations Accessibility
Role: Lead UX Designer leading the design process from conception to delivery
Project: Mobile app for a cafe
Project Vision
Goal
The Problem
Timeline
With the increasing work-from-home and remote work opportunities, flexible professionals have been searching for flexible options to buy food and reserve spots at cafes.
Provide a smooth ordering process on the mobile cafe app for persons who are already in the cafe or who are at home getting ready to get their day going.
July 2021-August 2021
Product
Mobile Cafe is a family oriented cafe serving the suburbs of Baltimore, Maryland. Mobile Cafe offers unique breakfast and brunch options that always keep customers coming back for more. The cafe offers free wifi and a warm space for remote workers.
Target Audience
Remote workers seeking a cafe with wifi and pre-ordering options to grab a quick bite without the lines.
Research Insights
Interviews were conducted and empathy maps created in order to understand users.
Three main pain points were identified
Flexible professionals want to be able to start their busy mornings without shaving time off the amount of work they get done.
Time
Menus without quick filter options are usually time-consuming.
Some platforms for ordering mobile food are not equipped with assistive technologies.
Accessibility
IA
User
Tool: Figma
Mapping Carla's user journey revealed how helpful it would be for users to have access to a dedicated mobile cafe mobile-ordering app.
User Journey Map
Starting the Design
User storyboards were created to get an idea of the general flow of target users, and then the crazy eight process was used to draft paper wireframes.
Screen designs were made to focus on the users main needs of browsing courses and signing up for courses.
Paper Wireframes
Digital Wireframes
Usability Study Findings
Two rounds of usability studies were conducted. 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.
Here is the affinity map used to gather key insights
Refining the Design
Improvements were made to the design to enhance user experience based on the findings of the usability study
Before
After
Early user studies revealed that the color scheme was not easy on the eyes or accessible. I used the color safe color palette generator to rework the color scheme to meet web content accessibility guidelines.
A proceed to menu button was added to meet specific user needs
Final Design
Additional changes were made to match user needs from the usability study to iterate an effective efficient user flow including multiple payment options and an accessible color scheme.
Takeaways
The Mobile Cafe mobile ordering app has helped users save time by not only ordering in advance but by reserving tables.
Challenges
Finding and selecting an accessible color scheme, adding multiple payment options and pay on arrival has resulted in a few cancelations and refund issues.
Next Steps
Consult accessibility team to ensure the design continues to meet accessibility guidelines.
Final Thoughts - What I Learned?
Throughout this design process I got a deeper understanding of accessibility and the importance of getting the correct color scheme, and the true effectiveness of usability studies when iterating on designs.