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 personal 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
abcdefghijklmnopqrstuvwxyz
Futura
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!