the sandwich delivery app


Research, End-to-end UX/UI, Usability-testing

Project overview

Sadie is a sandwich shop in Istanbul serving up mouthwatering sandwiches in the business area. The Sandwich shop has quickly grown to two locations and needed to make delivery service more efficient for customers. So stakeholders decided to make a delivery app. I thus set out to design the mobile app in order to increase online engagement, online ordering and storefront sales, and help amplify Sandwich shop growth.
Working adults have little time for cooking. Obligations, interests or challenges that make it difficult to get groceries for cooking or go to restaurants in-person.
Users need more personalized app for ordering food.

Create an app prototype that shows how the named problems could be solved. Test it with users and improve the design.

My role

I served as the end-to-end designer for this project. My responsibilities included conducting research, defining personas, validating designs, making a prototype and mock ups.
To better understand stakeholders pain points, I conducted deep interviews to answer the following questions: What should we build? What are the user’s problems How can we solve those problems?
Along with the interviews, I analysed competitors to get an overview of their strengths and weaknesses.
Figma was my general tool to make prototypes and mock ups.
  • Finally I conducted a usability study and get some insights, which helped me iterate on the design.

1. Empathise

In order to conduct a foundational research for the app we need to better understand business and user’s pain points.

For this case I chose in-depth interviews as a main method of research. I conducted five tete-a-tete conversations with potential customers to better understand their usage and perception of food delivery apps. I also had a usability study with the prototype I made. The main questions I needed to answer were:
  • What should we build?
  • What are the user’s problems?
  • How can we solve those problems?
Participants confirmed initial consumptions about a sandwich shop’s customers. However research also revealed that time was not the only factor limiting users from cooking at home. Other user problems include obligations, interests or challenges that make it difficult to get groceries for cooking or go to restaurants in-person.

Empathy map

I created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to cook meals.
Этапы работы над приложением
Empathy map
User pain points

  • Little time Working adults are too busy to spend time on meal prep
  • Not enough features Platforms for ordering food don’t allow to schedule orders. Restaurants doesn’t memorise client’s order details, like address and preferences.
  • Information Architecture (IA) is important All positions on menu should be informative and complete, but not heavy.
  • Accessibility App should be accessed in different languages and have voice messaging feature.
User persona

Anna is a makeup artist and a mom, who needs a way to feed her family and spend more time on her hobbies.

Alexander is a busy adult who needs a food delivery app that has full info about the meal ingredients, because he doesn’t cook and struggles with eating disorder.
Business and user goals

In order to prioritise design decisions for the app, I defined business and user goals. The highest priority project goals were those that were shared by both the business and the user:
Этапы работы над приложением
Sandwich delivery app will let users add meals and whole orders to favourites, which will affect users who are annoyed to fill the cart every time by saving their time and make ordering food is a piece of cake.
We will measure effectiveness by the number of times users use this feature.
Sandwich delivery app will let users plan and take out orders which will affect users who usually forget to order food in time and want to do it in advance by letting users to pick up food in advance and remind of it.
We will measure effectiveness by tracking pre-ordered food through the app.

2. Define

Problem statement, hypothesis, value proposition
Problem statement

So far we found out user’s pain points, so we can put them to four categories:
  • Financial Delivery cost can be floating
  • Product Accessibility options matters it should be available to navigate the app with one hand, use voice and change language.
  • Process Make sure the experience with the app goes smoothly with the search and
  • Support, which are pain points related to getting help from customer service.

Hypothesis statement

We believe that a more personalised service of the delivery app for Alexander will increase loyalty to the Sandwich shop.
If Anna download this app then will quickly and easily pick a recent order and get it delivered of made for take out for a certain time.

Value proposition

With my personas, Alexander and Anna, in mind, I then brainstormed solutions to the major user pain points I identified in my research, ensuring that the solutions aligned with business and/or user goals.

3. Ideate

Competitive analysis, storyboards
Competitive analysis

Full in google docs link
Next, I reviewed the apps of Sandwich shop’s competitors to identify common patterns, solutions, and potential improvements.
In particular, I was curious what solutions competitors employed regarding the following:
  • Clear calls to action.
  • Menu navigation.
  • Information Architecture. User should intuitively understand the structure.
  • Delivery options.
  • Basic information navigation and format (address, hours, phone number) for restaurants with 1 location vs multiple locations.
  • Use of food photography.
Analysis helped better understand the delivery market industry, current trends, user expectations and preferences. I uncovered the following insights:
  • Food delivery service grow up enormously
  • Using an delivery app is getting familiar way to order food
  • App quality plays a deciding factor in where customers order
  • Food photography can entice or turn away
Some gaps I identified:
  • None of the apps remember user’s favourite meals
  • None of the apps have kids healthy specials
  • None of the apps don’t provide a feedback option to a certain meal.
  • 2 of 3 have option to switch language, but only if user orders in the country that speaks this language.
  • None of the apps offer voice assistants. However I believe it is possible (for the extroverts ????) to just call the restaurant to make an order.
Some opportunities I identified:
  • Provide quick and easy way to rate meals and remember the favourite ones.
  • Provide kid’s healthy specials for busy parents.
  • Add the “Switch language” option.
  • Make the app more accessible to more people (screen reader function and voice assistants).

I decided to sketch some visuals that predicts and explores a user’s experience with the Sandwich app. It helps to understand the flow of user’s interaction with a product over time, giving a clear sense of what’s really important for users.
Big picture storyboards
Close up storyboards
Stories are an effective and inexpensive way to capture, convey and explore user experience.

4. Starting the design

User flow, paper wireframes, digital wireframes, lo-fi prototype
Next, I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the app. The primary user task I focused on was placing order again.
Paper wireframes
Homescreen variations and getting ideas

Paper wireframes allows to ideate faster and iterate quickly and see how it looks like in minutes. I sketched a few variants of the homepage and marked with stars the best ideas.

  1. Particularly I decided to implement “create my sandwich” among the other sandwiches in this menu category.
  2. Horizontal scrolling for positions in the categories.
  3. The User location is on top with selection tick to choose the other location quickly.
  4. Large pictures-buttons with menu categories help to decide what to choose.
  5. Recent orders button is very visible on top left.
  6. Lastly I want to implement the idea with menu tabs in the last sketch.
Homepage variants
I also decided to sketch other screens of the app: Sandwich constructor, order status, profile variant.
When wire framing I followed the principles of information architecture created by the founder of EightShapes, Dan Brown. Particularly, I offered a focused set of product cards, made them categorised, that are meaningful to our users. The paradox of choice states that a greater number of options increases cognitive load and makes it more difficult for people to make decisions.
Digital wireframes
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of ordering food one more time (plus rating stage) so the prototype could be used in a usability studies with users. Link to the low-fidelity prototype

5. Usability study

Study details, findings
This test is carried out using a Figma prototype, and users are asked to run the prototype according to the task on their device. This test also wanted to see how the user’s expectations of the design that I created, and find out whether the solution I implemented had addressed all the users’ pain points.

Study details
The app main goal is to help people order sandwiches via delivery or takeout. I need to find out if the main user experience, order and payment are fast and easy for users to complete.

Research Questions
  1. How long does it take for a user to order the food that user ordered previously?
  2. What can we learn from steps that users take to order food?
  3. Are there any parts where users are getting stuck?
  4. Have the solutions implemented addressed all the pain points that users felt?
5 participants 2 men, 3 women between the ages of 25-60

Moderated usability study
Qualitative — In-Depth Interview
10 minutes per participant,
Users were asked to perform tasks in a lo-fi prototype.

  1. Order Tombik sandwich.
  2. Find previously ordered items.
  3. Check sandwich customiser.
  4. Find loyalty points.
Finally I accumulated all the findings into the jam board:
Testing results

6. Redesign and mockups

Colors, types, mockups
I wanted to make the UI of the app clear, airy and somehow colourful. So I chose lights green as accent color and lightest grey for elements’s background.
Logo. Personally I love making logo design simple. So it is simple.
Colors, Fonts, Icons, Elements
Chosen colors
I also run accessibility check for buttons, as they are light green, and it passed.

Redesign after usability study

Юзабилити-тестирование прототипа позволило понять, насколько приложение соответствует потребностям пользователя и на что следует обратить внимание при доработке.

Главный экран
  • Не отражает суть приложения - поиска мам для взаимопомощи. Стоит дополнить блоком “Поиска мам”, нужно добавить главную функцию - поиск мам на главную страницу.
  • Мероприятия для мам стоит разделить на от лидеров местных сообществ и крупных компаний. + Добавить функционал “регистрации на мероприятие”.
  • Дополнить страницу мероприятий фильтром мероприятий по дате/ геолокации/ теме.
  • Разделить поиск Как услугу и Для общения.
  • “Поиск” вынести на главную, фильтр Пингвимам встроить сразу на главной странице, когда создаешь заказ на услугу Пингвимам.
  • Поля для поиска Пингвимамы как услуга: дата, время с-до, место “у меня” или “указать адрес”, “пройден тест?”, рейтинг не ниже “-”, “Можно прийти со своими детьми?”, “Комментарии”
  • Поля для поиска для общения: удаленность, пройдет тест, возраст мамы, возраст и количество детей, интересы + свободное написание интересов.
  • Добавить страницу “Заказов” (текущих и предыдущих встреч с Пингвимамами). Вынести отдельно в нижнее меню.
  • Добавить блок избранных Пингвимам на странице Поиска.
Перенести личные данные в Профиль.
Назначение встречи
  • Процесс: отбор подходящих Пингвимам с помощью фильтра (по параметрам и доступному времени), отправка запросов-приглашений выбранным Пингвимамам. Пингвимамы отвечают на запрос Да/Нет. Если да, приходит уведомление, мама выбирает, кого пригласить. Подтверждает встречу.
  • В профиле важно указывать, в какое время и дни предлагать быть Пингвимамой.
  • Добавить интересы мамы + возможность добавлять свои интересы.
  • Ссылки на соцсети.
  • Дублировать иконки текстом (пройденного теста, добавления в закладки).
  • Подробнее рассказывать о возможностях приложения для новых пользователей. В виде всплывашек и подсказок.
Final mockups
hi-fidelity prototype made in Figma.
Sadie Hi-fidelity prototype
Здорово, что вы здесь!
Made on