SMART BITES
It is a food app designed for inclusion that gives customers the ability to customize their meals to better suit their taste and diet.
project
3 months project
App and Web design
role & responsibilities
UX/UI DESIGN
user interviews and competitive research,
wireframing and prototyping,
usability studies,
accounting for accessibility,
iterating on designs.

Project statement

How we eat is changing dramatically! In the context of working from home, the food delivery industry around the world have boomed.

Smart Bites is a modern restaurant chain located in the metropolitan area of your city. It offers the unique opportunity of customizing a meal to better suit their customers needs and wants. Smart Bites, target customer is the busy city resident, who wants to enjoy spending his free time with the loved ones, family, friends while still be able to maintain a healthy lifestyle by choosing healthy meals.

The problem

1

In an economy based on efficiency and time management, people are choosing to order their meals online.

2

Now more people are choosing to eat healthier or have different diet restrictions for personal, religious, or medical reasons.

The goals

To create an app for a restaurant chain that provides customizable healthy meals prepared with locally grown fresh food. The app will allow users to easily find and customize their meals to be ordered for delivery at the specified address.

01/

chapter

Research

User research

summary

I conducted interviews and created journey maps to get a better understanding of user needs.

Who is this for ? Persona

I identified two main groups of potential users.

1

A primary group I identified is of the young career-driven adult who does not have enough time to cook.

2

A secondary user group are family members who may have different diet restrictions to think about when ordering for the family.

02/

chapter

Ideate

Wireframes

paper wireframes

While designing wireframes for the Smart Bites app, I focused on the main user flow screens: ordering a meal online. From the home screen, I did a few iterations. The main focus here was on the user's ability to easily find and select the meals they want to order.

Digital wireframes

The home page is a reflection of users' needs at many levels. The main focus here is on an easy navigation across the app and helping the user to find their desired meal as easy as possible.

On the meal screen, I focused mainly on inclusivity: how users can customize their meals based on their taste preferences or dietary restrictions.

03/

chapter

Prototype

Prototype

Lo-fi prototype

Next, I build a low-fidelity clickable prototype in Figma, which will be used for testing with potential users. I focused on the main flows.

04/

chapter

Usability

Usability study

Parameters

Study type: moderated and unmoderated usability study
Participants: 7 participants

Location: Cluj-Napoca, remote
Participants: 30 minutes

Findings

I conducted two rounds of usability studies. The first one was on the low-fidelity prototype. This study helped me to understand earlier in the process where our users may experience difficulties or get stuck while using the product.

The second round was on the high-fidelity prototype which revealed some aspects from the mockups that needed refining.

1

Users were confused if they were successfully logged in or not.

Users found the menu confusing.

Some users wanted to be able to customize an email while others prefer to have the options to not.

Users wanted to receive a confirmation email or SMS with the order details.

from lo-fi to hi

Mockups

From the first version with all these findings in mind, I started designing a second version that solved our users' problems.

2

Some text was not easy for users to read.

The intro pages were moving too quickly for reading.

The user did not know when a friend was selected for bill-splitting.

05/

chapter

Hi-fi prototype

Hi - fi prototype

results

The final high-fidelity prototype presents a clear user flow of ordering a meal online with live tracking delivery afterwards. It meets our user's needs by providing an easy to use prototype product, that allows the user to find the meal they wish to order, to customize it based on their taste preferences or dietary restrictions, even splitting the bill with a friend before checkout.

Accessibility considerations

Provide a search bar option to help make navigation easier for users.
Use images associated with text to help users better understand food options and ingredients.
Provide meals for users who have different dietary restrictions by allowing them to customize their meal.
Provide access for users with reading disabilities by having an audio reading of all text in the app.

Takeaways

What I learned ?

As I am also very concerned about healthy eating and I have seen a lot of people struggle, because they have different dietary restrictions.

I learned from them how difficult it is to manage time and find something to order with a tight schedule.

While designing Smart Bites app, I found that user feedback is the most important tool that shaped the initial ideas into a viable prototype that answers users' needs.

Impact

The app makes users feel included. Smart Bites offers healthy meal options for all people, no matter what diet they might have.

Quote from feedback:
"This is exactly what I needed. I have digestive sensitivity to certain food ingredients, so for me is very hard to order online. Here I can order without worries, because I know all the ingredients of the meal I would be eating."

Next steps

Moving forward, I would like to incorporate more of the local grown story. As a next step in this direction, I would start by conducting research on the local market to find a way of telling the story and promoting local growers, that could be extended as a process and adapted to other markets as well.