Back

Eat Repeat

Eat repeat is a food delivery app for Moscow, Russia. It allows ordering local food with quick 30 min delivery, texting with support, invite friends, save and spend points for the orders.
My role
UX/UI Designer
Project duration
Oct 2023 – May 2024

I created iOS and Android mobile apps from scratch.

I was the only designer on the project. I was responsible for all interaction and visual design, using a brand book provided by the client to guide the UI.

Problems

Lack of time for cooking
Many individuals in Moscow face time constraints due to their work schedules, making it challenging to prepare meals at home.
Delayed order deliveries
Moscow's heavy traffic often leads to delays in food deliveries. To address this issue, users may prefer to order from nearby restaurants for faster service.
Hard to choose
With 15,000+ restaurants in Moscow, users may feel overwhelmed choosing where to order. The app should have a standout design with clear layouts and enticing food photos for easy decision-making.

How it was done

I used design thinking framework which is a user-centered approach to problem-solving.

This 5-stages process allows for creating an enjoyable experience and identifying market opportunities to achieve our business goals.
Emphasise
Define
Ideate
Prototype
Test

1. Empathising with the users

The first stage is to empathize with our target users. The goal is to better understand our users: their problems, wants, needs, and situations to design a product that works for them and creates an enjoyable experience.
What we want to know:
1
Who are the users exactly? How do they buy food right now?
2
What do users think and feel about their current experiences with buying food? What pain points and challenges do they have?
3
Do they use any food delivery apps? What do they say about their experiences with such apps?
4
What are their demographics, behaviours, preferences?
But first...  
Checking competitors
I checked similar apps in the App Store and Google Play store to conduct preliminary user research and learn more about food delivery sphere. I wanted to understand what features similar apps usually have and how their users speak about these apps. It gave me some insights for my survey.

Designing Personas

On the basis of combined empathy map I created five User Personas.
Personas are fictional characters who represent groups of similar users. They help distill large amounts of user information into more manageable chunks. And also help the team to emphathise with users.

2. Defining key problems

On this stage I analyzed my research findings from the empathize phase and determine which user problems were the most important ones to solve, and why.
What did I do:
1
Wrote User Stories for all Personas
2
Generated clear JTBD which combined all the information by jobs
3
Formulated Problem Statements

Writing User Stories

The next step involved creating User Stories for our Personas. A user story is a one-sentence narrative told from a Persona’s perspective, encapsulating who the user is, what they want to do, and why.
As a tired person, I want to be able to order meals quickly and easily from my phone so that I can have food delivered to me wherever I am.
As a busy person, I want to be able to easily order healthy and delicious meals online so that I can save time and avoid the stress of grocery shopping and cooking.
As a hungry person, I want to be sure that I receive my food delivery on time.
As an occupied person, I want to be able to track my orders in real-time and receive notifications when my meals are on their way so that I can manage my time effectively and be prepared to receive my deliveries.
As a tired person, I want to be able to save time and effort by being able to reorder my favorite meals with just a few clicks, so that I can consistently enjoy my preferred dishes without hassle.
The Jobs to be Done framework suggests that people ‘hire’ products or services to fulfill specific tasks. It generalizes all users' needs and goals, focusing on desired outcomes.

JTBD Generation

When
Situation
I want to
Motivation
So I can
Outcome
When I'm too busy to cook
I want to order a delivery of prepared food
So I can enjoy a convenient and hassle-free meal.
When I have an urgent craving for a specific dish
I want to use an app
So I can order this dish and eat it within 30 minutes.
When I have friends over and want to host a meal
I want to order a delivery
So I can provide a delicious spread without having to spend hours in the kitchen.
When I'm tired
I want to repeat one of my orders
So I can save my time and efforts on choosing something to eat.

Generation of Problem Statements

Maria
Maria is a highly occupied professional who doesn’t have a lot of free time and is often very tired. She does not enjoy cooking and prefers to do it only occasionally. She struggles to find a convenient and reliable meal delivery service that meets her dietary preferences and busy schedule. Maria has had negative experiences with unreliable meal delivery services in the past, leading to frustration and inconvenience in her already hectic schedule.
Alex
Alex is a young student who combines learning with a part-time job in another area of the city. Alex struggles to find a meal delivery app that offers quick and efficient service, making it difficult for him to prioritize his meals during his busy day. As Alex has to be in different locations of the city, he often cannot rely on delivery as each delay can disrupt his schedule. Alex wants to be able to repeat his orders even when he is in another area of the city.

3. Ideation of the solutions

The goal was to generate a wide range of innovative ideas, refine, and prioritize them. This process involved:
1
Generating ideas without evaluation.
2
Selecting the best ideas and determining the implementation order using the HMW (How Might We?) framework.
‘How might we?’ framework
It allows to take problem statements from the define phase and turn it into a list of questions that start with “How might we,” or HMW.  HMW questions help reframe user problems as exciting opportunities for solutions.

HMW Statements Ideation

How might we enhance the speed of food delivery for customers looking for fast service?
How might we optimize delivery routes to overcome traffic jams and ensure timely food deliveries?
How might we optimize the ordering process to make it faster and more efficient than competitors?
How might we create a loyalty program to retain customers and stand out from competitors?
How might we personalize the ordering experience to make it more engaging for customers seeking quick food delivery?
How might we enhance the user interface to make the app more visually appealing?

I aggregated all the information I gathered during previous steps to the Design Goals

Utilizing AI
  • Use AI to identify plant problems from photos.
  • Provide fast and accurate diagnoses to users.
Setting Schedule
  • Help users efficiently schedule plant care tasks.
  • Allow changing care dates without affecting the rest of the schedule.
Choosing Products
  • Assist users in selecting the right products to treat plant issues.
  • Ensure products are compatible with as many user plants as possible.
Overall User Experience
  • Create a smooth user experience with easy navigation and an attractive interface.
  • Provide clear and concise instructions to prevent users from feeling overwhelmed.

4. Prototyping and testing the app

This stage consists of several steps. My first step was to create a User Flow in order to understand the user journey and optimize the experience for better usability. Then, I developed paper prototypes for the main screens. I'm not particularly fond of this framework as I struggle with drawing and handwriting, so I prefer to transition to prototypes in Figma promptly. After several iterations, I tested my prototypes with users – I will provide more details in the next stage of my case study. Upon receiving positive results from the usability study, I created mockups and a high-fidelity prototype for the entire app.
Stage steps:
1
User Flow
2
Paper Prototypes
3
Prototypes in Figma
4
Mockups

User Flow is a visual representation of the steps a user takes to accomplish a goal on a website or app.

It outlines the path from entry point to completion, including interactions and decisions.

I’ve designed mid-fidelity prototypes

Usually, the process starts by making paper prototypes that then progress into low-fidelity prototypes. Because I lack drawing skills and have pretty poor handwriting, I choose to create clickable prototypes in Figma immediately. Another significant benefit of this choice is that it enables me to use variables and conditionals for more complex prototypes.
Why do I use mid-fidelity instead of low-fidelity?
1
Low-fidelity prototypes confuse users who are not used to "raw" versions of products (having only seen final applications and websites).
2
Low-fidelity prototypes may not provide a clear understanding of the space required for each section.
Benefits of this approach:
•  I can organize screens precisely.
•  I can create complex prototypes.
•  I can quickly transform prototypes into high-fidelity versions by working with styles and components.
•  Participants can easily comprehend the screens.

Moreover, the results of the usability study are not influenced by the visual design itself.
I conducted usability study scenarios and conducted unmoderated usability testing online with 5 participants for each scenario.
The two main user flows tested were entering/choosing the address, and making an order.

Updated high fidelity prototypes

Go to Making an Order prototype
Users can add items to the cart, view 'Add to your order' items, check the address, and make payment.
Go to Entering the Address prototype
Users can enter the address by choosing it on the map, typing it, or selecting from recent addresses.

5. Final Design

My aim was to create a modern design that is joyful, engaging, and appealing, especially for a young audience.
1
I focused on establishing a clear structure with a strong visual hierarchy to guide users through the app.
2
I maintained design consistency in elements like colors, fonts, and layout across the app to provide users with a familiar and comfortable experience.
Design Approach
I started by creating a UI Kit containing all design elements and utilized Figma features such as components, styles, and auto layouts for a pixel-perfect design, quick adjustments, and responsiveness. Proper layer naming was ensured for developer ease.

Menu

1
The menu offers two feed view modes: big item cards with swiping and a standard list with scrolling, saving the preferred mode.
2
When an item is added to the cart, the item image moves from the left side to the right.
3
Food categories are displayed at the top of the menu in bubbles.
Item image
In both modes, the item image extends beyond the visible card, making the food picture more prominent and appetizing.

Dish screen

1
The dish screen shows all details about ingredients, nutrients, price, and additional cooking time when necessary.
2
The category of the dish is displayed at the top with an indicator showing the number of dishes in that category. Users can navigate between categories by dragging the card or tapping on the category title.
Navigation
Users can return to the home screen by swiping down on the dish screen and access the cart by tapping the bottom area or swiping it up.

Map

There are several ways of selecting the delivery address:

1
Detecting the user’s location: this action is completed automatically or by clicking on the location icon button.
2
Choosing the address on the map by dragging it while the pin is fixed in the middle of the screen.
3
Selecting one of the last used addresses from the address bubbles.
4
Manually entering the address via the keyboard. The app utilizes an autocomplete feature from its address database to assist users and reduce the amount of typing required.
Location access
When the app doesn’t have access to the location, users can enter the address manually, select it on the map, or choose from the last used addresses in the bubbles.

Registration and Log In

1
Instead of generating usernames and passwords, allowing for remembering, resetting, etc., we decided to only allow the use of a mobile phone number with an OTP code for login.
2
The OTP can be resent after a 5-minute delay.
Viewing the app
Users can view the app without registration or login, allowing them to browse the menu and the app easily.

Some of the other screens

Key Takeaways

I have a genuine passion for food and consider it one of life's greatest pleasures. I enjoyed working on the food delivery app from scratch to release, including implementation checks. We also had the opportunity to brainstorm features for future versions. I focused on enhancing the user experience through the use of various frameworks.
Download the app
Potential features for upcoming releases:
  • Searching for dishes: This feature was not the first priority and was not included in the MVP version.
  • Allowing users to add allergies or unwanted ingredients in their user profile and marking dishes with these ingredients in the dish card.
  • Dish customization: Removing unwanted ingredients and adding new ones.

Get in Touch

Back