Sugar n Spice

UI/UX DESIGN

Ethnic Food Delivery App Case Study

The Project

Introduction: 'Sugar n Spice' is an ethnic Indian food delivery mobile application. As the sole UX and UI designer, I designed this mock project from inception to final design through research, ideation and UX, UI design principles.

 

 

Duration: 4 months

 

 

Methods: Interviews, Empathy mapping, Sitemap, Wireframes, Prototyping

 

 

Tools: Adobe XD, Illustrator, Photoshop

Context

Indians who are living abroad often miss home cooked Indian food, especially during festivals and holy months. These authentic festive food are rarely found outside India and much less all through the year. Indian festive food are incredibly hard to make and require special ingredients and tools to make them. 

However, there are no application catering to Indians residing abroad. There is a huge Indian diaspora all around the world who would love to celebrate their ethnic food and maintain their roots and connections to homeland.

Problem Statement

Users who are originally from India and are living abroad, miss home cooked meals and festive foods. They would like the taste of home all year round. Users do not want miss connection to their cultural roots and want to celebrate festivals and enjoy these specific festival foods all year round. 

Solution

To design an application where users can choose from various Indian food categories and can buy ethnic festival food straight from India. A platform that is simple and hassle free to use and that would allow users to quickly find authentic, festive food they are craving for. Food that was freshly made, carefully packaged and delivered to them from India.

Design Process

Research

Analyze

Ideate

Design

Iterate

Research

Interviews and Market research

In the goal of knowing what consumers were searching for in an ethnic food delivery app, I conducted interviews of Indians settled abroad. I realized that the most important factors while creating an app that users would enjoy was their preferences, requirements and the problems they encountered. I interviewed users to gain insight of their needs and expectations. I wanted to understand how the user's responses would differ based on the their age, family and food requirements.

I also conducted research on two of the most common food delivery apps on the market to get a better understanding of the competitive environment, and 

found that although both offered food delivery, they did not provide food authentically produced in India and did not provide festive food throughout the year.

Analyze

Observations & Insights

The interviews and market research have allowed me to learn more about my user's desires and frustrations. I was able to understand, from the interviews, the pressure points of consumers. I was able to draw a few key insights that would help shape my idea by bringing together the data and insight. Based on the research, I created an empathy map of my user. This also helped me to create project goals.

Empathy Mapping

DOES

- Looks for online videos of Indian food

- Visits Indian friend hoping for Indian food

- Asks friends where to buy ethnic food

- Looks for food at local groceries.

FEELS

- Misses home

- Wishes somebody would cook    authentic meal (frustrated)

- Difficulty getting food from local          shops (annoyed)

- Misses festival foods (sad)

- Excited when seeing Indian food

THINKS

- Where to buy Indian food

- Dont want to waste time cooking

- Thinks cooking ethnic meal is hard

SAYS

- Likes home cooked meal

- Busy schedule, doesn't have time to     cook

- Misses Indian food

- Doesn't have knowledge and skill to    cook authentic food

- Want to stay culturally connected

Project goals

Various food options

Users preferred to have various food options available and organized neatly to choose from.  I decided to create food categories for better organization which are legible and neatly labelled.

Smooth

Experience

Smooth experience was one of the main priorities of users. They did not want to spend too much time figuring  out the app. So, I decided that the app needs to be intuitive to create a smooth user flow.

Quick checkout

One of the main requirements that the user expected was quick checkout. They did not wish to spend time filling out details every time during checkout. I decided that I would design an option for quick checkout.

User Personas

Based on my empathy map, project goals and my main observations through interviews, I built two user personas. To remind myself of the needs and frustrations of my users, and to retain a customer-centric focus for the remainder of the project, I have frequently revisited these user personas.

Persona 1

Status: Single

Age: 25 Years

Occupation: Engineering Student

Amit Kumar

Amit is originally from India and resides in Cleveland Ohio. He is an Electrical Engineering student. He misses Indian food very much and wishes to eat authentic Indian food all year round. He especially misses his family and home cooked festive foods during festivals.

Location: Cleveland, Ohio

Goals

Wants authentic Indian food

Needs fast delivery

Wants to choose from various options

Wishes for a smooth experience

Challenges

Doesn't have time and resources to cook authentic

Indian food

Limited food options

Misses home cooked meal

Persona 2

Status: Married

Age: 33 Years

Occupation: Manager

Neha Shah

Neha is originally from Delhi, India. She loves Indian meals and authentic festival foods. She is a busy professional as well as a loving mom. She wants to introduce Indian roots and cultural foods to her child. Given her busy professional life and motherhood, she often doesn't have time to make authentic festival foods.

Location: San Diego, California

Goals

Wants good quality authentic Indian food

Spend less time worrying introducing cultural foods to kids

Wants to choose from various options

Challenges

Doesn't have expertise or tools to cook authentic

Indian food

Wants fresh and carefully packaged food

Wants quick checkout

Site Map

Once I had established the project goals, I started working on creating a sitemap. My goal was to create a smooth experience that the users would enjoy. Navigation is one of the most important components of an app. An organized navigation menu helps user access the information that they want quickly while keeping track of where they are currently, thereby creating a lasting and a positive experience.

Sketching

Before, I started working on wireframes, I wanted to quickly sketch out the app screens so that it helps me visualize the wireframes and user flow.

Wireframes

After creating sketches and Sitemaps, I created Mid-fidelity wireframe. It allowed me to make sure that all the features, functionality and project goals were included which the users expected. These wireframes helped me to visualize the navigation of the app. During this phase, I was able to make quick changes and test this Mid fidelity prototype on users.

UI Design

After creating wireframes, the next step was to focus on UI of the app. I wanted to keep the layout and design minimal, modern and pleasing yet fun to access. I also wanted to give the essence of Indian foods, festivals and atmosphere through colors and images.

I chose vibrant colors like and pinks to match the Indian food and festival theme.

Sugar n Spice's typography is minimal and elegant. I used Futura Font to give a modern and clean look to the app. 

Color Palette

#F12679

#D67F00

#FFCECE

#FF6060

#919191

#F9F9F9

#373737

Typography

A a

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Futura

abcdefghijklmnopqrstuvwxyz

0123456789

Design System Language

ITERATE

After, the UI was created, I made a prototype using Adobe XD. I tested the prototype with prospective users. While the feedback was positive, I made certain changes the design and prototype based on feedback.

When testing the prototype the users also raised concerns about how fresh the products would be when delivered. A solution to that problem was to mention that the food was freshly made and carefully packed so that it could arrive fresh and undamaged. I also gave an option of expedited shipping, if the customer wanted quick delivery.

Following are some of the features and changes made based on feedback:

Categories

Since one of the goals of the app was various food options, a clean navigation was crucial for user to access all the products that are available. I created categories of food available. Since its access was important I placed it on the home page where it would be the first thing a user sees. More food options can be found with a mere swipe. I also included food image matching the categories to give visual cues.

Add to cart

One of the pain points that users faced during prototype was that they could not directly add products to cart from Sub category page. To solve this issue, I added a 'Add to cart button to each product card on the Sub category page so that the user can add products to cart without having the need to open the product page and look at all the details of the product. 

Solution

Problem

Buy Now

Solution

Problem

Keeping in mind, one of the core goals of quick checkout, I designed the one click 'Buy Now' button. Clicking on this button user can quickly checkout instead of going through My Cart screen, Payment screen and other details. By clicking on the button the user will get a pop up with all the details of quick checkout.

Track Order

During testing, users found it difficult to look for tracking number in their account to track their order and to copy and paste it in the Type Tracking Number tab. To solve this issue, instead of creating a separate track page. I added a track button on Order page for ease of use. This track button directly takes you the tracking result eliminating more user interactions and hence making it a smooth experience.

Problem

Solution

Final Screens

Sign up

Splash Screen

Onboarding

Log in

My Cart

Home screen

Category

Product page

Confirmation page

Search

Checkout

Payment

My Account

Orders

Tracking

Favorite

Prototype

Retrospective

While the feedback after testing has mostly been positive from the prototype users, my designed app is far from perfect. This app was developed from my own experience as an Indian living abroad and my cravings for authentic home meals. Though, I was hesitant about pursuing the food delivery app due to its existing saturation, I am glad I stuck to it.

 

I still plan on continuing the iterative cycle and updating the prototype. I do wish that I would have interviewed more people in the initial testing phases. It would have helped me to better focus on the navigation of the app. In the future, I would also like to experiment with Website version of this app. It will help me better understand user expectations and goals.

Thanks for visiting!

© 2021 created by Aditi Vengurlekar