FuNGO! – delivery app

  • The product: FunGo! is an app that allows you to order food from a restaurant. I select a dishes from the menu, and have the meal delivered at home.
  • Project duration: 3 months
  • The problem: People with intolerances and allergies to particular ingredients want to order healthy food. They want to be sure of the ingredients that make up their meal.
  • The goal: Design an app that allows you to filter by ingredient, type of intolerance and that allows users to easily order and pick up fresh, healthy dishes.
  • My role: UX designer designing an app for FunGo! Restaurant from conception to delivery.Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

User research: summary

I conducted interviews and developed empathy maps to gain insight into the users I am designing for and their needs. The research identified a key user group: adults with food intolerances and a strong interest in sustainable food.

This group validated initial assumptions about “FunGo!”, restaurant customers but also revealed that users highly value the ability to personalize their meals.

User research: pain points

Easiness

Working adults want to order quickly and easily, saving time.

Customization

Users want to compose their own dish by selecting the ingredients

Ingredients

Platforms for ordering food do not highlight the list of allergens and the origin of the raw materials.

Monitoring

The usability tests have revealed some critical issues that have not been overcome with subsequent versions. It needs to test further.

User persona

Problem statement

Maria is busy working adult who loves discovering exotic foods, paying attention to the allergen list.


User journey map. Mapping Maria’s user journey revealed how helpful it would be for users to have access to a dedicated restaurant app
Paper wireframes Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. I prioritized a quick and easy ordering process to help users save time. Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Digital wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from  the user research.
The main feature of the app is a simple list to filter the search according to your needs.

Low-fidelity prototype

Low prototypeUsing the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was building and ordering a meal, so the prototype could be used in a usability study.

Usability study: findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mock-ups. The second study used a high-fidelity prototype and revealed what aspects of the mock-ups needed refining.

Round 1 findings

  1. User want to order quickly
  2. User want to create his own bowl
  3. User want to see the chosen filters during the navigation

Round 2 findings

  1. It’s hard to add an user during the checkout
  2. Back button into checkout process is not clear
  3. The Shopping Cart button disappears navigating with the bottom menu.

Mockups

The initial design included shortcuts on the suggested dishes, but the usability study showed that users were able to create their own bowl. The link to the cart has been moved to the top, to make it always visible
As noted by the usability studies, we have added allergen tags in the product sheets. The total price is always clearly visible next to the add to cart button.

High-fidelity prototype

The final high-fidelity prototype presented user flows for ordering a meal and checkout. It also met user needs for a pickup or delivery option as well as more customization.

View the FunGO! HI-fidelity prototype

Accessibility considerations

  1. It is possible to do a voice search, and there is an auto-complete feature to facilitate people with limited motor skills.
  2. Provided access to users who are vision impaired through adding alt text to images for screen readers.
  3. Used icons combined with text to help make navigation easier.

Takeaways

Impact:

The app makes users feel like FunGO! really thinks about how to meet their needs.

”I was looking for an application that would allow me to choose food safely, due to my allergies”

What I learned:

While designing the FunGO! app, I learned that the first ideas for the app are only the beginning of the process. Users advices was very helpful in developing unique features, which make the application really useful.