Little Gem

A food order APP with nutrition calculator for a healthy restaurant.

Background

Little Gem, a chain restaurant, specializes in offering nutritious meals tailored to individuals with weight loss, bodybuilding, and specific dietary goals. Despite its popularity and quality offerings, customers have faced challenges in calculating nutrition values without resorting to external calculator apps, a concern heightened during busy working hours. Moreover, individuals with dietary restrictions struggle to access allergy information directly from the menu.

Problem Statement

1. Difficulty in calculating nutrition values without external calculator apps.

2. Increased challenge during busy working hours.

3. Lack of direct access to allergy information for individuals with dietary restrictions.

Goals

Based on the problems presented, three goals were set up for this APP design correspondingly:

1. Nutrition Tracking: Incorporate a built-in nutrition calculator to help users monitor their intake.

2. Efficient Ordering: Simplify ordering, especially during busy times.

3. Dietary Information: Offer clear allergy and dietary info for personalized choices.

Project Overview

In this hypothetical scenario, I assume the roles of both the sole UX designer and researcher, guiding the entire research and design process for the food order app.

Throughout this journey, I was committed to ensuring that every decision made was rooted in user needs and preferences. The holistic approach from research to the final prototype aimed to deliver an app that not only addressed user pain points but also provided an enjoyable and seamless experience.

Personas

To better comprehend the target users, I created two personas representing the primary user types by research. These personas serve as valuable references for guiding future research and design efforts.

User Journey

Tp comprehend the interactions users go through while using our food order app, I mapped out this journey, aiming to uncover user behaviors, challenges, motivations, and chances for enhancement. It also enables me to tailor the app to user needs.

Pain Points

After understanding the needs and potential user journeys, various pain points were recognized and transformed into objectives for the wireframing and low-fidelity prototyping phase.

Pain point 1: Customers found it hard to get full nutrition information about their food from the food order app.

Pain point 2: It is troublesome and time-consuming to switch between screens to search for nutrition information while ordering.

Pain point 3: There are no online order options. Ordering offline in busy hours is frustrating

Ideation & Lo-Fi Prototype

Gaining insights from the identified pain points and user needs, I embarked on the process of conceptualizing user stories and wireframes for the app. Several iterations of wireframes were developed and subsequently integrated into a finalized version. This definitive wireframe was then translated into a low-fidelity prototype using Figma.

Usability Test

Despite having developed the lo-fi prototype, I lacked insight into how users interacted with it. In order to enhance the design, I initiated a usability test for the prototype, aiming to understand whether the nutrition calculator within the app effectively fulfilled users' needs for tracking their nutritional intake.

Some sample questions are as below:
- How long does it take for a customer to calculate the nutrition info?
- How do customers feel about the steps for food calculation? easy or complicated?
- How do customers feel about the nutrition information provided? redundant or insufficient?
- What steps obscure you from proceeding the nutrition calculation?
- How do you feel about adding this nutrition function in the food order app?
...

Affinity Map of Usability Problems

The usability test revealed lots of issues, some of which were reported by multiple users. To organize and categorize these challenges more effectively, I employed an affinity map. Each distinct color on the map corresponds to an individual user who participated in the test.

Prioritized Pain Points

Based on the problems, I concluded five pain points and prioritized them regarding neccessity.

Pain point 1: People without much nutrition knowledge find the raw number of protein, carbs, calories, and so on hard to use or interpret.

Pain point 2: Lack of nutrition summary in the shopping cart or payment page (people have to go back and forth to find it).

Pain point 3: Users cannot navigate from specific pages to others freely (flow and icon).

Pain point 4: Lack of more options for food items and combos.

Pain point 5: The lo-fi design is not visually appealing and clear.

Hi-Fi Prototype

I proceeded to enhance the design by taking into account the 5 pain points that emerged from the usability testing. The refined design details can be observed in the following sections. Feel free to click here to access the final high-fidelity prototype.

‍

‍Paint point 1: no interpretation or suggestions

Pain point 2: lack of nutrition summary in shopping cart and payment page

Pain point 3: Users cannot navigate from specific pages to others freely (flow and icon).

Pain point 4: Lack of more options for food items and combos.

Pain point 5: The lo-fi design is not visually appealing and clear.