top of page


The UI/UX design case study on the mobile application Foodini helps people with food allergies and dietary restrictions.

After Design.png
Top of Page
My role:

User Research, Visual Design, Prototyping & Testing


4 Weeks


Xiaoyu Ma- UI/UX Designer


Founder & CEO of Foodini




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.


  • 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 Solution

The Solution

We eventually designed a functioning app that allows users to view menu matches from restaurants and businesses, redesigned the search functionality on all pages, and redesigned the ingredients page.

The new changes are currently being developed.


The Process

  • Competitive Heuristic Analysis

  • User Interviews


  • Identifying pain points

Ideate & IA

  • User Flows


  • High Fidelity Prototype

  • Usability Testing

Final Design



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:

  1. Why do people trust the competitor’s product?

  2. Why is their product in the top 5 solutions in the market?

  3. What specific features did they design to solve the problem?

  4. How do they sustain a competitive advantage over alternative options?

User Control and Freedom

Uber user control and freedom.png

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.

Visibility of System Status

Shopwell Consistency and Standards 1.png

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.

Consistency and Standards

Airbnb keeps its brand throughout the app and keeps icons, illustrations, buttons consistent throughout the app.

Airbnb Consitensy and Standards.png
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?

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.

Pain Points
Foodini Old Design.png

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.

Foodini Search functionality.png

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.

Foodini search and ingredient page.png

​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
  1. 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.

  2. 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.

The Wall of Ideas

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
View a Resetaurant User Flow.png
Log In user Flow.png
Wireframing & Prototyping

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.

Foodini Restuarant First Iteration.png

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:

Foodini Gallery and Ingredients.png

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.

Filter and Search.gif

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.


Testing & Iterating


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
Original Sign up flow.gif
New Flow
Sign Up.gif
  • 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.

  1. Matches:

    1. Change 26 matches back to 26 menu matches

  2. Feature Tab:

    1. Rename to More Info for better understanding.

  3. Restaurants V. Businesses

    1. Add the type of restaurants Foodini partners within the onboarding process

    2. 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.

Final Design
Hover over to see the final design
Foodini Old Design_edited.jpg
Foodini Search functionality.png
Food Photography


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.


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.

bottom of page