Flour Bakery+Cafe
Winter 2021
Introduction
This case study was done as a project for the Mobile Digital Design course. It includes 5 stages: Research, Define, Ideation, prototyping, and Testing. The purpose of this case study is to improve the usability of Flour Bakery+Cafe, one of the most popular bakery chain stores in the New England Area. A large focus was to conduct the usability testing and provide recommendations.
Logistics
User Research + UX/UI Design
Team: Solo
Role: User Researcher, UX Designer and UI Designer
Tools: Adobe XD, Usability Testing and Report
Background
Flour Bakery + Cafe is a local chain cafe in Boston. It is quite popular among young people and local families because of the delicious food and friendly service. Boston has many young professionals who are busy with everything. They want a place for a quick but healthy lunch. Flour Bakery+Cafe is one of these places. But after reviewing its Mobile App I think the company could provide a better digital service to customers. The existing application offers services, including online ordering, collecting points, brand information, etc. The following case study will address the proposed problem by understanding the pain points that Bostonians faced when using Flour Bakery+Cafe App.
Problem Statement
Young professionals who live and work in Boston are busy and may not have much time for breakfast and lunch during workdays. They want an easy-to-use product that can set them free from waiting in the store to dedicate their time to more important things.
Persona
After analyzing Flour Bakery+Cafe’s and its application’s target users, I visualized a persona to clearly show the demographic information, goals and needs of target users.
persona - Christina Miller
User Stories
As a user, I want a mobile application to tell me where I can find a good nearby place so that I can have a healthy and tasty meal
As a user, I want a pre-order mobile application so that I can pick up my food without waiting in the store
Journey Map
Based on my persona, Christina Miller, I set a user scenario and drew the journey to show her feelings, thoughts, and touchpoint related to a pre-order application. With this map, I could list possible improvements to the user experience.
Christina’s Journey Map
Goals
Based on the research, the primary goal of the design is to allow young professionals to easily pre-order healthy and delicious food without waiting too long in the store.
Design Process
wireframes
With a rough idea, I started to work on the wireframe. I designed 6 key pages that tell the story of placing an online order with the mobile application. Doing this allows me to define the user flow and main improvements of this project. Later, I refined the lo-fi wireframe to a hi-fi wireframe by adding color, images, icons, and more realistic content.
Usability Test
By conducting this usability testing, I was able to know the advantages and problems related to the user experience. As a result, I could give recommendations for a better user experience based on key findings.
Methodology
“Think aloud” and “ Competitor Analysis”
Users tried to complete the assigned task while they were being observed, including placing an order for pick up and finding a nearby cafe. Users’ errors, comments, and confusion were observed and recorded by notes. The testing products include Flour Bakery+Cafe Mobile Application and Tatte Bakery Website.
Executive Summary
The prototype of the Flour Bakery + Cafe mobile application has been usability tested in March 2021 with 4 participants.
Each session lasted around 15 minutes. The product evaluation was conducted on the mobile device running the IOS system. The prototype was conducted by Adobe XD. Users received a URL to the prototype and open it on their own mobile devices. The primary purpose of this test was to carry out the existing problem of the design and find some solutions to improve the overall design of the prototype on the user experience aspect. This test report will describe key insights and recommendations from the test.
User Profile
Participant A
student
user habit: uses smartphone and tablet for browsing social media, entertaining, streaming, and reading
Participant B
student
user habit: uses laptop and smartphone for playing video games, entertaining and messaging
Participant C
freelancer
user habit: uses a smartphone for entertaining, job hunting and social media
Participant D
employee
user habit: uses smartphone and laptop for entertaining, social media and promoting personal business
Test Scenarios
Place a pick-up order
Find the direction to the cafe that you’ve bought food
Key Findings & Recommendations
Main positive findings for Flour Bakery + Cafe mobile app:
The order flow is easy to understand
Test participants easily realized the app is for online bakery ordering
The navigation bar works well for users to find demand information
Main frustrations for Flour Bakery + Cafe mobile app:
The font size and spacing are too small so that users couldn’t find the information immediately
No status notification of a specific order, users couldn’t check the status of placed orders
Users are confused when they started ordering without picking a store
Recommendation
Sizing up fonts and spacing between elements and adding more contrast to different hierarchical levels.
Providing information on the home page about order status along with the order information.
Redesigning the button bar of store pickup to make it more prominent, meanwhile add store pickup options on the checkout page as a required step.
Final Prototype
Conclusion and Reflection
Through doing this case study, I was able to practice my mobile usability analyzing skills. I was able to learn the overall structure of designing a product, from user research to usability testing, from reporting to improving the design based on recommendations. Through the process, I identify the problems and provide creative solutions based on research and test data.
I believe a user-centered design grows from users’ real feedback. UX design is for target users not for designers.