Empathizing 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:
But first...
Checking competitors
I reviewed similar apps on the App Store and Google Play to conduct preliminary user research and gain a better understanding of the food ordering industry. My goal was to identify common features in these apps and see what users say about them. This helped inform the questions 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.
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:
Who, what, and why?
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.
Who, what, and why?
JTBD generation
The Jobs to be Done (JTBD) framework views products or services as tools people 'hire' to complete specific tasks. It simplifies user needs by emphasizing desired outcomes, using the structure: When (Situation) + I want to (Motivation) + So that (Outcome)
User's needs, frustrations, and goals
Generation of problem statements
UX problem statements guide design by focusing on users' struggles, needs, and goals. They turn unclear challenges into clear, actionable ideas, leading to meaningful solutions.
Ideation of the solutions
The goal was to generate a wide range of innovative ideas, refine, and prioritize them. This process involved:
As I’ve already have results of Competitive Audits, which I completed on the stage one, I decided to use HMW framework.
As I’ve already have results of Competitive Audits, which I completed on the stage one, I decided to use HMW 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.
How might we
HMW statements ideation
How Might We statements are short, open-ended questions that spark creative problem-solving. They reframe challenges into opportunities for innovation, encouraging teams to think broadly and collaboratively about solutions.
Prototyping and testing
This stage consists of several steps. My first step was to create an App Site Map, which provides an overview of the site's areas at a glance. 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.
User flow
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.
Prototypes
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?
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.
Usability study
I prepared 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.
Final design
My goal was to create a design that would bring joy and be easy for all users to use.
1
I focused on creating a clear structure to keep the design simple and intuitive with a great visual hierarchy to guide users through the app.
2
I maintained consistency in design elements such as colors, fonts, and layout across the app, which helps users feel familiar and comfortable while using it.
3
Accessibility was a priority in the design. For more information, please refer to the Accessibility Compliance section.
Design approach:
I began by creating a UI Kit that contains all the elements used in the design. I utilized all Figma features including: Components Styles Auto layouts Conditionals and variables for clickable prototypes This allows me to easily maintain a pixel-perfect design, make quick adjustments, and ensure responsiveness. I also ensured proper layer naming for developers to navigate through the screen and code without difficulty.
Features
Screens and features
Menu
Dish screen
Selecting the delivery address:
Registration and Log In
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.
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.
