The Problem

A lot of people depend on food delivery services for their daily meals. 81% Indians order food through delivery apps due to convenience, says survey. People who work and commute on a regular basis don't actually have time to cook or can sit down for a meal at restaurant.

The challenge was to find a way to make it quick and easy for individuals to order food from their favorite restaurant while also maintaining good food quality.

Food delivery system provides a sales channel for restaurants. Restaurants can use this system to thereby increase revenue, sales, and customer outreach.

The goal was to create an app for the Spanish restaurant "OnePlaceForSpanish" that would allow users to order Spanish food quickly and easily at any time, with pickup and delivery services, with clear navigation flow throughout the app. Thereby, increasing the profits and customer outreach of restaurant.

Empathize

In the first phase of design process, I empathetically understood the problem that needs to be solved by observing user's experiences and behavior by conducting one-to-one interviews to discover users' goals, needs and pain points.

Qualitative Research

I conducted interviews in which I asked participants few open-ended questions in order to determine the users needs and pain points. I interviewed participants between ages of 18-55, who are working professional and frequently order food through delivery app.

Most basic question asked was Why do they use food delivery apps? Most common answers were:

• Lazy to cook.

• Doesn't have time, either working or commuting.

• Challenging to buy and maintain groceries.

• To have more variety in meal (everyone does !!)

• Some people don't prefer to go to restaurants in person (due to their obvious reasons)

Interview Questions:

Do you know how to cook Spanish meal?

What do you prefer - to place order through an app or a website?

What do you prefer - to have Spanish meal at a restaurant or to order a meal?

Which option do you prefer - pickup or delivery?

How often do you order a meal through an app?

Your experience using app like Zomato, Swiggy used recently to order a meal?

Key Findings

• customers are not confident enough to order new dishes or dishes that haven't been rated.

• customer wants to filter out options from the menu list based of the requirements.

• customers dislike that there are no verified ratings for dishes.

• customers' dissatisfaction with the inaccurate image of the dishes offered in the app is one of the reasons they choose not to place an order.

• customers complain that it is difficult to edit the items in their carts and too many steps to complete the checkout process, makes them decide not to place an order.

• customers will like the option to choose between delivery and pickup services from their favorite restaurant.

Define

The next phase in the design process is to define. It involves combining and analyzing the information I gathered throughout the empathize phase by conducting research, to define the main problem that needs to be solved.

Persona, User Journey

After the user research, I came up with one persona to keep my focus on who my users are and to better understand their goals and frustration areas.

The user journey of Kiara's experience to place an order to help identify the areas for improvements before starting the ideation phase.

Problem Statement:

How might we design an app that allow users to quickly and conveniently order Spanish food from their favorite restaurant with error-free experience, while boosting the revenue and customer outreach of the restaurant?

Ideate

Now that I am aware of the goals and needs of the users, it's the time to come up with creative solutions to the defined problem, by creating information architecture, user flows, wireframes, and design mock-ups.

Storyboarding

After gaining a thorough grasp of who are the target audience, what are their needs and their frustrations, I created a series of frames that graphically illustrate and investigate how users will interact with the app.

Userflow

After the storyboarding exercise, I proceeded to create a simple user flow. This describes how the user can take to complete the main flow. Creating this flow allowed me to think more on user's perspective and different options the user has while using the app.

Sketches, Wireframes, Design mockups

With an idea of all the screens to be included, I starting sketching paper wireframes to get an idea how exactly it would look like. I sketched paper wireframes for mobile version.

For the home screen, I prioritized the elements on the screen to increase the efficiency.

I created digital wireframes in Figma using the paper wireframes I had previously created as a reference.

I started with design mockups for the same digital wireframes I created earlier using design elements. Design mockups give a good idea of how the final product will appear, including all of the colors, typography, icons, images, and illustrations. Mockups also show how appealing the final product will be, while yet keeping it user-friendly and easy to understand.

Prototype

In the next phase in the design process is to make a clickable prototype to test with users in order to determine whether or not the solution is effective and usable for them.

The clickable prototype: Prototype

Test

In the final phase, the focus is on testing the prototype with the users by conducting usability testing to gather feedback and pinpoint any challenges, difficulties users have encountered.

Usability testing

Using the high-fidelity prototype, I conducted an unmoderated usability research. The usability test was carried out to see if the design solves the problem that was noted during the research phase. Each participant was given few tasks to perform on high-fidelity prototype. Based on the feedback received from the participants, I can now note the key findings.

Study type: Unmoderated usability study

Location: India, remote

Participants: 5 participants

Length: 20-25 minutes

Key Findings

• Users had difficulty to search where to find and then edit their location from the app.

• Users found it annoying to choose between delivery and pickup services right away from the homepage.

• Users had trouble finding the menu list from the homepage.

• Users were not able to directly edit from the order list before confirming the order.

• Users had trouble interacting with quantity button due to it's small size on the "Your Order" screen.

• There is need of filters to filter items from the menu based on the specifications.

Analyze and Synthesize

I used Affinity Mapping to analyze and synthesize the research findings to identify patterns and themes, and then iterated on the design mockups as a result.

Final Design Mockups

High Fidelity Prototype

Based on the user feedback I gathered throughout the usability testing, I made changes to the design mockups and prototype.

View High Fidelity Prototype

Accessibility considerations

• Use of icons, illustrations and images to help users understand, navigate and maintain user flow.

• Provided access to users who are vision impaired through adding alt text to images for screen readers that serves the equivalent purpose.

• Colors used in the app were to convey information, call attention to an action, or ask for a response. Colors were chosen keeping in mind to avoid color blindness and maintain the color contrast ratio.

What I learned

• While designing throughout for the app, I learnt that interviews, peer feedback and usability study makes designs much better and more user driven. The more feedback I received, better were the designs

• Despite the fact that the problem I was attempting to solve was large, I discovered that following each phase of the design process and aligning with specific user needs helped me come up with solutions that were both realistic and useful.