Problem statement

Tom, who is severely allergic to nuts, needs an app that will allow him to choose his meals carefully and let the restaurant know of his allergies in a clear fashion, because he is otherwise scared of ordering food online.

Research Goals

• identify the demographics of customers who will be interested in this app,
• understand problems people with allergies face when ordering food,
• understand problems people with visual impairment have when ordering food,
• verify competitors or business models for an optimal user experience,
• find out about common allergies.

Interviews

I spoke to my friends and family regarding the possibility of an interview. I decided that my mum (46) and friends ranging from 26 to 38 years old would be the best fit for this exercise.

I found out my mum doesn’t use mobile apps at all and when ordering food she prefers to call the restaurant directly. Asking why, she replied that she usually knows where she wants to order from and doesn’t experiment in case a new place gets her meal wrong. She is a vegetarian and gets annoyed when scrolling through apps, restaurants might offer only 2 vegetarian meals and she’s tired of constantly going back to the main menu to search for a new restaurant.

The second part of the interviews produced very close results. It is crucial for the users to know when the food will get to them through time estimates and live-location services of the couriers. This is why they are more likely to use services like Bolt instead of personalised apps. I also found that services that offer discounts when ordering are a lot more popular, the reason being that if they are to pay the full price they would rather go to the physical restaurant and get warm, freshly made meals, after all fries taste best hot.

It was also often said it is very important to see the overall rating of a restaurant. It would be nice to filters specific meals by rating. One of the interviewees hates onion with a passion, she’s often worried that if she puts a disclaimer in the notes then they won’t look at the optional information and include onion in the meal. This is what I’m personally worried about too since I’m allergic to walnuts.

I’m often worried that if i order a meal and put a note down about changing an ingredient or making the meal vegetarian, then it will be overlooked. It’s happened before where I requested no meat and got bacon on my meal.

Personas

Based on the interviews I came up with a persona for this project. The end users are most likely to be between the ages of 22 to 50 years old. I decided to go for a persona in their 40s, so that the final layout will be simpler to understand to all age groups. The customers would mostly live a busy life and are very specific about their needs. My initial research also shows the need to accommodate users who will need some extra features in order to build their trust in the product.

Empathy Map

After creating the persona for an end user, I decided to go deeper into their specific needs and feelings. This step was particularly important to me in order to fully understand their conscious and unconscious decisions when using the product. I wanted to focus on solving direct issues and then evolve the design with them in the centre.

User stories

In addition to my main persona, I decided to go with additional user stories to have other users’ problems in mind when creating the final product.

Competitive Analysis

As a foodie I already had some ideas about what makes a good or bad food ordering experience. I order food around 2 times per week and have worked out some favourites! However, I wanted to delve deeper into the topic in order to prepare a viable competitive analysis.

According to PMR’s report 11% of polish people ordering food ordered food several times a week or more which is a huge number! With such a vast number of people ordering, there is room for potential to create new apps and services in the food ordering category.

Direct

strenghts

• Food ordering app
• Simple, easy design
• Shows discounted restaurants
• Gives an estimate
• Restaurant contact info for allergies

Weaknesses

• No Filter
• Time estimates often wrong
• Doesn’t fully verify drivers

Direct

strenghts

• Food ordering app
• Verified drivers
• Easy to navigate between delivery or pickup
• Shows you a map of nearby restaurants

Weaknesses

• Cluttered design
• Limited filter options
• Time estimates often wrong
• Long scrolling

Direct

strenghts

• Food ordering app
• Lovely simple design
• Easy to navigate between delivery or pickup

Weaknesses

• Menu filter options not showing any restaurants or meals

inDirect

strenghts

• Service delivery app
• Simple, easy design
• Very clear categories
• Easy to understand
• Clear delivery or pickup indication

Weaknesses

• No filter
• No comment section

Additional Research for accessibility

In order to better understand what the competitors do good or bad I reached out to a Facebook Blind and Hard-of-Seeing group. I asked about problems that users experience when ordering food online and if there are any apps that are exceptionally good. The answers surprised me, it turns out the one food ordering app that I dislike the most, which is Pyszne, is the most accessible and easy to use for people using a screen reader. I also found out that some of the apps are unusable. I went into the accessibility settings on my phone to to turn on the screen reader in order to find out what was what was going on and and for example my favourite apps didn’t name their buttons, so it was impossible to navigate the app.

Here are some screenshots from the group, but they’re in Polish, so if you’re not polish then I’m and sorry that you won’t be able to understand what was being said.

Site Map

While going into the initial site map, it was crucial for me to make this app as simple and straightforward as possible so that it is intuitive and easy to use for most users. I started off with a very clear path that moves through different sections of the app allowing users to navigate at their own pace. I kept the idea of an algorithm on the back of my mind when going through the research and this helped me with the design process when mapping the site.

Journey Map

In order to create a truthful depiction of a user’s journey around a food ordering app, I have gone back to see how that experience would be for me. I studied competitive apps to see their strength points and options to see what I would like to add to my app, that would make it more inclusive of those with dietary needs.

Persona: TOM

Goal: Order a meal that is safe to consume for a severely allergic person.

Task flows

While working on the research side of the project I started to develop my ideas further into a more tangible concept.

User Flow

Based on my end user Tom, who’s severely allergic to nuts, I decided to create a user flow map in order to explore all of the possible angles an allergic person can go through in order to successfully order a meal online.

Lo-fi wireframes

I started the design of this app by coming up with different ideas of how I want the structure of the app to work. First, I did some brainstorming with the Crazy Eight’s exercise. I also drew some quick ideas with a marker when researching the users and competitors. I then proceded to draw the low fidelity wireframes on a dotted paper. In the end I got into a lot more detail in Figma.

Mid Fidelity Wireframes

After my initial sketches I have moved into Figma to create a wireframe based on my previous research. I had a rough ideal of how I wanted this app to look and what additional options to add, so that this truly is an app for all people to feel safe when ordering food.

HI-FI wireframes

I have done a lot of iterations when moving from the low and mid fidelity wireframes to the high fidelity wireframes and prototypes.

In this part of the case study, I wanted to show you how I went from creating a simple wireframe on picking ingredients you don’t want in your food, to a high fidelity wireframe of that idea after doing proper research on dietary allergies, to then the final visual design of the page.

I did more research on allergies to find out which allergies are most common. After reading through multiple medical and allergy-awareness websites, I decided to restructure the initial setup of the app and give users two types of setup – basic and advanced. The basic setup would allow users to pick main categories of allergies such as “milk” or “tree nuts”. The advanced setup would go into much more detail, for example “milk” would allow users to pick subcategories such as “lactose”,”casein”,”whey” or “all milk”.

I also decided to name the setup process “Choose Your Dietary Needs” instead of referring to allergies, so that people do not feel discouraged for selecting an ingredient to avoid without having been allergic to it, for example “no meat” due to being vegan or vegetarian.

Log in

When first signing up you will be prompted to pick your dietary needs in order for the app to sort through available options and provide the user with personalised meals that are either 100% accurate with the choices or with swapped products where possible.

In case a more specific need wasn’t available, the user could input this information in the box provided at the bottom of the page. The app would search for the keyword and alert the user of the keyword found in the meals. At the same time, the word would be sent to the app centre for verification, if the given answer is viable for publication, then it would be added to the system for future users.

1. mid-fidelity wireframe

2. high-fidelity wireframe

2. high-fidelity wireframe

3. visual design mockup

UI Kit

Since I’ve been a graphic designer and art director for many years this part of the process was the quickest and easiest to me. I wanted this app to have a modern, classy look. I wanted the typography to be modern and easy to read, so I chose a timeless typeface. I went with mostly toned colours with an accent of bright magenta for important pieces of information.

Branding

I wanted the logo and name of this app to be simple, memorable and playful.

The name of the app “Picky” at a glance refers to picky eaters, but I felt it was fitting in this instance, since we literally “pick” our ingredients in the app, so that every meal is personalised to our needs.

For the most part I wanted the logo to be memorable and easy to understand instantly. The logo represents a “tick” for when we “pick ingredients” and a location marker since it’s a delivery app.

Visual Design

Since I’ve been a graphic designer and art director for many years this part of the process was the quickest and easiest to me. I wanted this app to have a modern, classy look. I wanted the typography to be modern and easy to read, so I chose a timeless typeface. I went with mostly toned colours with an accent of bright magenta for important pieces of information.

Visual Design – Part 1

The Sign Up Process.

I wanted this part of the design to be very minimal and simple with very clear indications of what to do in order to successfully go through the login or sign up process.

Visual Design – Part 2

The Homepage and its children.

Having successfully signed up or logged in, you would be forwarded to the homepage. I wanted the design to be as simple as possible but it proved to be a difficult task with a lot of iterations. The problem that I faced was in the nature of the app itself. Because of the allergy/preference filter a lot more information had to be added to the app’s components compared to the competitors’ apps. In the end I wanted the information to be very clear to the users, so I decided to give them only the crucial information on the homepage.

What I learned

This project definitely taught me a lot about user experience. I opened up to a lot of new people because I was trying to find out a lot of information about allergies and the food ordering process for different people. Food is important physically and mentally and ordering shouldn’t come with difficulties!

What I would do different

I guess a lot of the steps I would do differently came with software. As I learned more and more about ins and outs of Figma I would definitely layout my work differently so that it goes quicker next time. Components are a lifesaver and now they are my literal best friends.

In terms of problem solving, I would do all of the allergy research at the very start of the project since this was the biggest objective for this app. I have gone into it after user research, which feels idiotic at this moment in time. I should’ve first learned my allergies, then go into users with them. One of the people I interviewed was severely allergic to citrus. Before that, I had no idea people could literally die from lemons.