Foodini
The UI/UX design case study on the mobile application Foodini helps people with food allergies and dietary restrictions.
My role:
User Research, Visual Design, Prototyping & Testing
Duration:
4 Weeks
Team
Xiaoyu Ma- UI/UX Designer
Stakeholders:
Founder & CEO of Foodini
Tools:
Figma
Miro
The problem
Foodini is a company based out of Australia and hopes to help people with food allergies, and dietary restrictions find restaurants and businesses suitable for their specific needs. The founder already had an app running and wanted to improve the overall UI/UX of the app with some specific requirements. I worked alongside one other designer, and together we redesigned the app.
Requirements
-
Include filter options.
-
Find a way to differentiate restaurants from businesses on the home page.
-
Make it easier for users to find ordering links.
-
Make it more evident to the user what dietician approved means and what being a partner means.
The Process
Research
-
Competitive Heuristic Analysis
-
User Interviews
Synthesis
-
Identifying pain points
Ideate & IA
-
User Flows
Evaluate
-
High Fidelity Prototype
-
Usability Testing
Final Design
01
RESEARCH
For the first phase, we examined potential direct and indirect competitors of Foodini. After, we conducted interviews with ten users.
Competitive Heuristic Analysis
My partner and I felt it was essential to complete a competitive heuristic analysis to see how other apps tackle the challenge of informing users about specific restaurants and businesses. We chose to look at both direct and indirect companies. The questions we set out to answer were:
-
Why do people trust the competitor’s product?
-
Why is their product in the top 5 solutions in the market?
-
What specific features did they design to solve the problem?
-
How do they sustain a competitive advantage over alternative options?
Uber:
User Control and Freedom
The Uber app lets users remove or add items even on the check-out screen. Then, following payment, they have a few seconds to undo their order giving users total control and freedom to navigate the app.
Shopwell:
Visibility of System Status
Shopwell does a great job of letting users know exactly where they are within the app. For example, here, users know they are on the search page and looking at an overview of the item.
Airbnb:
Consistency and Standards
Airbnb keeps its brand throughout the app and keeps icons, illustrations, buttons consistent throughout the app.
Usability Testing
After looking at how the competitors solved this problem, it was vital for us to see how users felt about the app and uncover any usability issues. Therefore, we each tested five users who have a dietary restriction or food allergy. Most users were between the ages of 23- 43. The tests were both virtual and in person.
We found two critical issues, four major issues, and four minor issues. Below are the vital and major issues.
The overall app rating from the users was 2.8 out of 5 stars.
I like apps that are a lot more simple and I wish I had more room to scroll.
Why isn't the search bar working? Why is it so hard to search for something?
I'm confused by this page. What am I supposed to do here?
02
Identifying Pain Points
After speaking with the users, we gathered their feedback and identified their pain points. As a result, we found a few issues, which are listed below.
Restaurant Page
Home Screen
Not enough room to scroll because the header is taking up too much space.
Users were not sure what partners and dieticians reviewed meant.
Users wanted to see categories such as top-rated, most popular, etc.
Almost all users wanted to see more images of the restaurant.
Users thought they could search for a type of food on the search screen.
Users didn't like that they couldn't search for restaurants or specific dishes.
Category Search
Search Screen
Icons are not consistent, and users weren't able to recognize where they were in the app.
Users only had this room to scroll through a category they chose.
Users thought these categories added more filters to their original category.
They were unaware they could side scroll.
They did not understand the layout.
This is only for addresses. Users are not able to search for restaurants or types of food.
Users wished restaurants would move as they moved along the map.
Substitution Page
Map Screen
Meeting with Stakeholder
-
When meeting with the founder, he agreed on most recommendations but was unsure of changing the signup flow. Therefore, we decided to conduct A/B testing on the sign-up flow, comparing our proposal and the current sign-up flow.
-
The other recommendation he disagreed with was allowing users to upload images with their reviews. They felt it was nice to have, but not necessary at this moment. Therefore, we decided not to continue with this recommendation at this time.
03
Problem Synthesis
Since we had to redesign some flows, it was necessary to create user flows to see what the new flow will entail and all the components that will be needed. We created user flows for the signup screen, search/ category screens, and getting to the restaurant page.
User Flows
04
Wireframing & Prototyping
Since this project was only to last a month, we decided to jump straight into high-fidelity mockups after creating the user flows.
Home Page:
For the home page, I took out some distracting elements from the app's primary purpose.
-
For example, the banners on each restaurant were unnecessary as all the restaurants on the Foodini app are all partners and are all approved by a dietician.
-
I took off the closest and best matches toggle buttons and instead made those categories on the home page.
-
I also added another category for businesses that only did ready-made meals for delivery.
Added an order button with the call, directions, website icons.
The header will consolidate when the user scrolls up.
I Included navigation for users to explore the entire menu, as some users explained their frustration with having to scroll through sections they didn’t care for.
Restaurant Page:
This image gallery includes images of food, drinks, and the interior.
On the substitution page, I changed it to match the other ingredients page but highlighted the items they could not have, and below the ingredient included what they could change it out for.
Filter and Search
We asked users what type of filters they would expect to see on this app; based on that, we made our filters page. Next, my partner focused on redesigning the flow for the categories page and all the search functions.
Onboarding Screens
Since we took off the tags on the restaurant cards, we had to develop a way to let users know the primary purpose of the app and defining features that separate Foodini from other apps. For this, my partner created onboarding screens.
05
Testing & Iterating
Testing
Once creating the prototype, we conducted more usability tests. We conducted A/B testing for the signup screen and tested two main routes, including the filter options and search functionality. All tests were at different locations—some at home, some at a gym, and after work. After showing the stakeholders our changes, they were still unsure if the difference between restaurants and businesses was clear enough and asked us to question users if they would like a “eat now” or “order for later” toggle switch at the top of the app.
During testing, we found two main issues and a few minor issues.
The overall app rating was now 4.3 out of 5 stars.
A/B Testing:
I mainly kept everything the same for the signup flow:
-
But when verifying the user's emails, they can now re-send the email and view which email they signed up with.
-
The original flow had users scrolling through the steps. However, the proposed solution changed, so the steps are now broken down.
When we conducted A/B testing to see if the users liked the flow of the original design or the flow we recommended, we found that most users preferred the new flow.
Original Flow
New Flow
Findings
-
Most users preferred the new sign-up flow as opposed to the first sign-up flow.
-
All users were unsure of what 26 matches meant.
-
Users were not sure what the feature tab was for; they thought it would show featured items.
-
As for the proposed solution for business vs. restaurants, when we asked users, they felt they would probably think they would order food through the app.
Recommendations
-
Matches:
-
Change 26 matches back to 26 menu matches
-
-
Feature Tab:
-
Rename to More Info for better understanding.
-
-
Restaurants V. Businesses
-
Add the type of restaurants Foodini partners within the onboarding process
-
And Rethink the categories on the home page.
-
Final Design
We did not change much to the prototype, except for the onboarding screens and the home page.
Hover over to see the final design
Conclusion
Next Steps
The Stakeholders were delighted with the new design and is currently being developed and will be available in Australia. The stakeholder decided to keep the same signup flow as before. Overall, from the feedback, users felt this app was cleaner and easier to use. We even managed to change some user’s minds about the app. Some users said they would not use the app the way it was when first testing the app, but now said they would use it and find it very helpful.
Lessons
I am very proud of this project and find it astonishing that people will be able to download and use this app. For most of my projects, I have been working alone, so it was interesting to see what it was like to work with stakeholders and have a fellow partner. It was also a tremendous help to have someone to work alongside and to develop ideas together. While I could not speak to developers, I could see why it is essential to include them in meetings and know what could be accomplished and what could not. While I was scared to speak up for users in some instances, I learned how important it is, and I believe it paid off.