Introduction
Empathize
Define
Ideate
Prototype
Test
Outcome

Introduction

Mealmate is a concept app which provides people a platform to find an affordable and healthy homemade food. it includes features such as hiring a professional cook and paying via app, ordering a tiffin with pay per order option.

Project Details

Mealmate App Design ( Case Study )

Team : Akash Raje

Dec - Feb 2021 ( 9 Weeks )

My Role

User Research

Information Architechture

Wireframes

Interaction Design, UI Design

Usability Testing

The Problem Of Unhealthy Eating Habits

In India, quite a number of busy professionals and students ( especially the IT crowd from major cities ) suffer with a variety of health complications —

• According to the 2015-2016 research done by National institute of nutrition (ICMR-NIN) shows that most working professionals in India have irregular and unhealthy eating habits leading to health complications such as hypertension, abdominal and central obesity, high blood pressure.
Research publication link (refer to the section 3.10) : https://www.nin.res.in/researchhighlights/2015-16.pdf

• They usually rely on the food from restaurants or ordering food online which badly affects on their monthly expense as well as health.

The Initial Hypothesis

To create a convenient online platform i.e. an app, where people can find professional cooks nearby who can cook healthy food of their choice , also find tiffin services which allow pay per order as well as a monthly tiffin service.
The focus is on providing affordable home-made healthy food.

Demographics of target users —

• Location : Tier 1, Tier 2 Cities in India
• Busy Professionals, students
• Age : 20 to 50 Years
• Mid to High tech savvy
• Languages: English, Hindi, Other regional languages

Approach : Design Thinking Process

Design thinking procssDesign thinking procssDesign thinking procss

Empathize

It was very insightful to leverage a rich qualitative data from potential users past experiences with ordering food online and professional cook service, this stage included doing the user research with conducting user interviews as well as usability test with similar products.

I started with brainstorming to come up with user interview questions guide and as I wanted to understand user behaviour from their past experiences I kept them more open ended to validate my assumptions.

User Interview Questions Guide

rough questions for interview scribbled on a page
rough questions for interview scribbled on a page

Sample questions that I used as guide while conducting user interviews

User Interviews

Response from one of the interviewees about his past experience with monthly Tiffin service.

Conducted 17 remote user interviews with the potential users from various places in India.

I focused more on letting the users share their past experiences with any online food delivery app as well as the alternative ways they tried to the get food from.

Noted down their statements on sticky notes and recorded the interviews with consent as I didn’t want to miss any valuable insights.

Moreover, it was a great learning experience for me as it helped me to improve listening skills.

Themantic Analysis

User interviews helped me to collect lots of insights and now it was time to analyze and distribute the information into related categories to make sense of it.

post it notes on the wall

Themantic analysis of the data gathered during Empathize phase

Demographics

• Location : Tier 1 , Tier 2 Cities in India

• Busy Professionals, students

• Age : 20 to 50 Years

• Low to High tech savvy

• Languages: English, Hindi, Other regional languages

Goals

• Want to have affordable home-made quality food

• Want food of my choice and pay for it on daily or monthly basis

• Find a cook who can make food of my choice

• Check cooking charges of cook reviews

Motivations

• Want to have  quality food under a desired butget

• To find a trustworthy and professional cook with reasonable service charge

Needs

• Need affordable home - made quality food

• An online platform that provides tiffin providers list with  charges and reviews

• Find a cook who can make food of my choice

• Check cooking charges of cook reviews

Pain Points

• Online food services are costly and extra charges are annoying and food isn't heathly

• Order delays, wrong estimation time, wrong location badly affects on my planned schedule

• Finding the right cook is hard because of communication gap and language barrier

• Cant trust a cook without a recommendation from a known person or service

• Hard to keep track of cook's absent days or leave days

Opportunities

• Schedulable tiffin service & cook service that can be paid on daily basis

• Use of Eco-friendly containers for meal packaging

• A feature that provides groceries which the same cook can bring with some delivery charge via app

• Paid trial for cook service before hiring for monthly service

• Cooks profiles with their quick intro, cooking specialty, review and contact info

Define

After analyzing the data, I generated 2 different User Personas with varying needs, pain points and goals that reflect the behavior of the potential users.

User Personas

user persona of sandesh anand who is a bachelors student in mumbai
user persona of kalpana anand who is a IT professional working in pune

User personas helped me to unsderstand the problems from users perspective and then I came up with user scenarios anligned with the user personas where the users need features i.e. Ordering a tiffin and finding a cook.

User scenario 1 - finding a tiffin service

user scenario of sandesh ananduser scenario of kalpana verma

User scenario 2 - finding a professional cook

user scenario of kalpana vermauser scenario of sandesh anand

Ideate

Now with the clear understanding of the user scenarios where user need helpful features, I brainstormed with How Might We questions to come up with possible solutions, After this I could start working on Information architecture which provided me a transparency of the steps user will take to accomplish a goal.

How might we introduce the features such as ordering a tiffin & hiring a professional cook in an app with efficient experience that provides the users freedom of their choice.

rough sketches to visualize user's profile
rough sketch to visualize cook's calender
rough sketches to visualize a flow of finding a tiffin service
rouch sketches to visualize user's profile
rouch sketches to visualize cook's calender

Initially I drafted few sketches to visualize the flow

Task Flow 1 - Ordering a Tiffin

task flow for ordering a tiffin using mealmate

Task Flow 2 - Finding a Cook

task flow for finding & hiring a cook using mealmate

Sitemap

After the task flows are ready I finished some card sorting activities which helped me to create a sitemap to understand and have clear view of app’s hierarchy, structure and organization

sitema of mealmate app

Hover to get a clear view

Prototype

The essential features and content for the app were finalized in the end of ideation phase and after that I started creating sketches of app screens to visualize and iterate quickly for moving to digital design.

Sketches

wireframe sketch of cook's profile screen
wireframe sketch of tiffin services screen
wireframe sketch of services listing screen
wireframe sketch of cook's profile screen
wireframe sketch of tiffin services screen

Initially I drafted few sketches to visualize the flow

After visualizing the placements of content and features in the screens with the help of sketches, I moved on to create wireframes using a cloud based software Balsamiq.

Wireframes

low fidelity wireframes created using balsamiq mockups image 1low fidelity wireframes created using balsamiq mockups image 1low fidelity wireframes created using balsamiq mockups image 2

Heuristic Evaluation

The 10 usability heuristics by Jakob Nielsen helped me to find the user interface issues in the early stages which saved considarable amount of time, followings are few UI problems I found while doing the evaluation.

Tifiin services screen - Recognition rather than recall

evaluation of user flow using wireframes image 1

Here, I found that user is unable to find the places he previously ordered from and recalling increases cognitive load hence I provided the option to check the places where users recently ordered from with some changes in design.

Your cart screen for cook’s service - User control and freedom

evaluation of user flow using wireframes image 1

In this screen, there was no undo option available as an emergency exit if books a cooking service trial by mistake, I solved this problem by providing cancel button.

evaluation of user flow using wireframes

Usability Test Using Wireframes

To understand which Ideas are working and also to validate my assumptions before jumping to visual design, I used these wireframes for usability test with the 5 potential users from varied demographics via screen sharing web app and collected their feedback. followings are few design problems I found with the test.

Select Location Manually Screen :

usability test flow using wireframes image 1

In the above wireframe, I found that users tried to avoid entering the detailed address right when they log in the app also the search option was missing, I solved this problem by providing search and skip option in the screen.

Tiffin Order Schedule Screen :

usability test flow using wireframes image 2

In this screen, because of the number of choices to select the day user’s were taking more time to make a decision, I reduced the choices to 2 and named them today and tomorrow to increase efficiency.

usability test using wireframes

Visual Design

Now It was time to start visual design to create emotion in the design and inhance user experience, in this phase I did some experiments with moodboard for look and feel of the design and then I had to come up with a user friendly logo, suitable images, typography, layout and colors.

Logo and Color Scheme

For the brand Identity and value proposition, I chose to create a simple, minimal, clean and easy to understand logo.

The color scheme is inspired from a tiffin food photograph colors and I used it while keeping its relevance to India, the message that it conveys about the healthy food and the user accessibility in mind. I used the green color as a primary color as it symbolizes nature and healthy food.

Mealmate color scheme and logoIndian healthy food photograph inspiration for color schememealmate app logo and its typography

Photograph credits - StockImageFactory.com

Typography

I used the popular sans serif typeface Montserrat which is elegant and simple with nice large x-height for good legibility, and it creates a fresh and modern feel.

typograpghy and color scheme
typograpghy and color scheme

Iconography

The main icons had to match with the real world for understandability, I created few icons in a way so that they will be analogous with their respective functions meaning.

iconography for UI design
iconography for UI design

Hi-Fidelity Prototypes

Finally I started working on Hi-Fi prototypes which I wanted to look as close as possible to the final designs, I used adobe XD software for designing.

UI design work progress in adobe XD software

Usability Test With Hi-Fidelity Prototypes

It was a complete surprise when I tested Hi-Fi prototype with a potential user with vastly different demographics and age group that I never thought of while researching and it provided me even better insights for improving the user experience by considering inclusion.

Order a tiffin or get a monthly tiffin service

• This design flow is intended for the users who want to order a Tiffin or get a monthly Tiffin service with a scheduling feature.

• Also user will be able to get extra discount with a pro subscription if opting for monthly Tiffin service.

• The order schedule feature is inspired from setting an alarm UI which is much relevant to the potential users smartphone using habits i.e. scrolling to select the time.

• Contact of the provider is also given If the user finds it better to directly call the Tiffin provider.

Find and hire a professional cook

• This flow is intended for the users who want to find and hire a trustworthy cook who can come to their house and cook food.

• User will also be able to check the reviews of cook, the cooks profiles contacts will be locked and they can be unlocked with Mealmate Pro subscription.

• Also user can opt the cooking service for more than one consumer i.e. up to 5 people and check the respective service charge.

• Paid trial session can be provided initially so the user can decide whether to opt for the service or not.

• Bringing the groceries option is for the busy professionals who would like to pay the cook to buy the groceries for them, this will depend on the mutual agreement between user and the cook.

Check previous orders and pay the cook via app

• Your profile has many useful options such as check previous orders, monthly billing cycle, cooking sessions etc.

• A pop-up for payment will appear before due date and User will be able to pay online via app for the service or user can opt for cash payment.

• The Tiffin order or cooking sessions can be rescheduled as per the availability of time slots.

• Cooks calender will be helpful to check cooks absent days before paying.

Learning Outcome

While working on this project, I understood some crucial things that changed my perception about users.

• I learned that things that are obvious to us are not always obvious to the users, this is why frequent usability tests help us to be unbiased.

• Understand the user behavior from their past experiences with a related product rather than what they say about the future use.

• Match between system and the real world is very important , avoid using technical terms and use real world conventions to come up with new features.

thank you for viewing the mealmate project
Lets Connect :