Introduction
The product
This food review mobile app enables customers to post reviews about dishes at Lyn's Restaurant.
Project duration
December 2022 to May 2023
The problems
Customers lack a means to give their feedback on the food to the restaurant.
Most food review apps don’t consider customers with visual impairments.
Most food review apps don’t provide language options.
My role
UX Designer designing a food review mobile app for Lyn’s Restaurant from conception to delivery for a Google UX Design course project.
My duties
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Tools and Methods
Figma, User personas, User stories, User journey maps, Affinity diagrams, User interviews, Competitive audit, Usability tests.
UX Design Process
I used these steps to complete this design project:
1. Empathize
• Understand the user.
• Conduct user interviews.
• Create user personas, user stories, user journey maps.
• Conduct competitive audit.
2. Define
• Create the problem statement.
3. Ideate
• Come up with ideas for design solutions - Crazy eights, Paper wireframes, Digital wireframes.
4. Prototype
• Create lo-fi prototype or hi-fi prototype, depending on the maturity of the product.
• For the hi-fi prototype, I create the mockups first.
5. Test
• Test lo-fi prototype or hi-fi prototype.
• Record user feedback & observations from usability tests.
• Create affinity diagram.
• Extract insights form usability test.
• Refine designs.
6. Launch
• Launch the product - This stage was skipped because this was a design project done as part of the Google UX Design course.
User research
Research methods used
I conducted user interviews and created user personas, user stories & user journey maps to understand the users I was designing for and their needs. I also conducted a competitive audit.
Learnings from research
User research
The users for this project were customers of Lyn's Restaurant (fictional name) according to the design prompt for this course project.
The user groups identified through research were:
-
Lyn's Restaurant customers who need a food review mobile app to give feedback on the food they ordered. This is according to the design prompt.
-
Lyn's Restaurant customers who need access to a food review mobile app that has screen reader technology because they have visual impairments.
-
Lyn's Restaurant customers who need access to a food review mobile app that has a translation feature because they have limited fluency in English.
Persona 1: Cate
Problem statement
Cate is a regular customer who needs a food review mobile app because she needs to give feedback on the food she orders.
Persona 2: Leah
Problem statement
Leah is a busy doctor who needs access to a food review mobile app that has screen reader technology
because she has visual impairments.
Persona 3: Joseph
Problem statement
Joseph is an immigrant student
who needs access to a food review mobile app that has a translation feature
because he has limited fluency in English.
Competitive audit
The audit revealed that most restaurants in their food ordering apps provide their customers with a means to post reviews. Most food review apps or food ordering apps with an option to post reviews have no assistive technologies for people with visual impairments & no translation feature - most of these apps are solely in English.
Research Influence on design
I began designing a food review mobile app for Lyn's Restaurant. I made sure to add assistive technologies for people with visual impairments in the design i.e. screen reader, voice command.
Define the problem
From the research above, I was able to clearly define the problem statements for this project. I broke them down according to user groups.
-
Cate is a regular customer who needs a food review mobile app because she needs to give feedback on the food she orders.
-
Leah is a busy doctor who needs access to a food review mobile app that has screen reader technology
because she has visual impairments -
Joseph is an immigrant student who needs access to a food review mobile app that has a translation feature because he has limited fluency in English.
Ideation
I then started with ideating for the mobile app design.
Wireframes
I then created paper wireframes to visual my initial design ideas.
I then transformed the paper wireframes into digital wireframes.
Mockups
I created these final mockups for the food review app to guide the design of the high fidelity prototype.
Main Userflow
Test & Iteration
Usability tests details
-
I conducted a moderated usability test.
-
The location was in Nairobi & in-person.
-
There were 5 participants.
-
The length of each session was about 30 minutes.
Usability Tests
Findings Lo-Fi Usability Test
-
Users were confused about where to start to post a review.
-
Users didn’t know what a screen reader is and were unable to turn it on.
-
Users found it easy to change the language of the app.
-
Users found it easy to edit a review.
-
Users found it easy to delete a review.
Findings Hi-Fi Usability Test
-
Users had an easy time navigating the posting review process.
-
Users need the text fields on the app to be interactive.
-
Users want more of the buttons on the app to be interactive.
-
Users like the usability of the app.
-
Users want the UI’s color scheme to be more visually appealing.
Iterations Based on Usability Tests
-
After the usability tests, I separated the “Top Rated” section using a blue background to make the starting point clear to users i.e. the "Post review” button.
Before usability tests
After usability tests
-
I added instructional videos explaining what each of the assistive technologies are & how to use them.
Before usability tests
After usability tests
-
I learnt how to make the text fields interactive. I also made more of the buttons interactive.
Before usability tests
After usability tests
-
In the hi-fi usability test, users stated that they found the UI’s color scheme dull. I changed the color scheme to a warm red to make the UI more visually appealing. It is also a more appetizing color for a product in the food industry.
Before usability tests
After usability tests
Project revamp
After completing free video tutorial on creating toggle switch buttons to upgrade my UX design skills, I revisited this project to revamp the design of the Settings page. I changed the design from the use of simple buttons to toggle switches to give the product a more modern look.
Learnings
Impact
The app allows more users to feel included due to the addition of assistive technologies including a screen reader & translation feature.
What I learned
-
I learnt the importance of ensuring that all products promote accessibility. I also learnt that designing for accessibility should be done by default and not as additional bonus features.
-
On my own initiative, I completed a free video tutorials to learn how to create interactive input fields and toggle switch buttons. This challenge encouraged me to continue learning more about how I can make hi-fi prototypes more interactive to give users a simulation that is as close as possible to the real product.
Next steps
-
Conduct research on how useful the mobile app is in helping users post reviews.
-
Conduct more user research to determine any new areas of need.
Let’s connect!
Thank you for taking the time to review my work on the Lyn’s Restaurant Food review mobile app!
If you’d like to see more or get in touch, my contact information is provided below.
Email: lindaaotieno@gmail.com