A mobile app providing authentic, healthy and affordable home made meals

Story highlighting my journey as a User Experience Designer.

Preface

I came to Los Angeles in 2014 and started studying at UCLA. My friends were talking about a problem they came across.

I had to dig deep to try and solve it. Presenting my journey and process.

Framework in my Design Process :

1. Problem Analysis

2. Field Study : Persona, User Flow & Journey

3. Opportunity : Introducing MOM’S HUT

4. User Research Methods : Questions & Factors

5. Taxonomy : Card sorting & SiteMap

6. Sketching App Interface : Wireframes & Iterations

7. Paper Prototype and User Testing

8. High Fidelity Wireframe : Interactive prototype

1. Problem Analysis

Problem occurring almost everyday certainly doesn’t go unnoticed

Eating out is expensive. Be it Indian food, Chinese food or even the burgers or pizza, students always find a hole in their wallet each time they grab food out. I wanted to understand why was this happening?

Asking ‘why’ at each point helped me understand the issue at every stage

Main Problem areas :

Food provided around campus area are either/ or :

EXPENSIVE — hole in the wallet

INAUTHENTIC — just doesn’t feel honest

UNHEALTHY — enough of the burgers and fries

I couldn’t help but keep notice the same problem again and again. Either eating unhealthy like the usuals — In-N-Out, chick-fill-A or expensive Italian food or the inauthentic food trucks in campus.

No market for authentic and cheap options available

2. Field Study : Personas, User Flow & Journey

Persona 1 (Primary user) : Rahul Singh

I conducted a couple of interviews at UCLA. Thats when I met my primary user, Rahul Singh.

Meet Rahul Singh my primary persona

A day in Rahul’s life..

A simple flow assessing Rahul’s mind before lunch — deciding what to eat for lunch and his regret after having lunch.

Hungry, impulsive and not given many options Rahul gets an unhealthy burger + drink that costs $ 4.50

With the opportunity to break the norm I studied Rahul’s touch-points and journey.

Tap into the user’s journey to understand Rahul’s decisions and challenges faced.

Rahul’s journey Map when he is hungry to after he has had his meal. All the above stages gave rise to a great opportunity

Persona 2 (Secondary user) : Priscilla Tan

Meet Priscilla Tan the secondary persona

In my apartment building I came across Priscilla Tan. Working from home this 50 year old blogger has a dream to open her own restaurant someday. Her passion to cook and serve was fascinating. But when she mentioned she would love to test whether she is really good in selling her cooked food threw light in my UX story.

3. Opportunity : Introducing MOM’S HUT

I knew the connection between Rahul Singh and Priscilla Tan. They didn’t know each other. I had the opportunity to help them.

Rahul Singh wants easy access to a variety of homemade food.. and Priscilla Tan wants to sell her home cooked food without mush hassle..

The bridge to connect and help both of them gave rise to my concept. To provide a service giving food to Rahul Singh cooked by Priscilla Tan. And the birth of Mom’s Hut.

I focussed on Rahul Singh my primary user and proceeded on developing this app from his perspective.

The birth of Mom’s Hut, a food service providing people with authentic, healthy and affordable home made meals.

4. User Research Methods : Questions and Factors

To develop Mom’s Hut, I conducted user research on the field with students who are my primary users.

Question 1 : What difficulties do you face to get good food?Question 2 : What is the criteria to get access to good food?Question 3 : Where do you find authentic food?

Research was conducted through surveys, personal interviews and group discussions. Getting lot of data from users helped me broaden my scope.

Essential Factors from Research

Inputs given by users helped me focus on the following:

All the above factors are important for my users to get access to homemade meals.

5. Taxonomy : Card sorting & SiteMap

From my research, interviews and surveys I collected a lot of insights, data and priorities. This brief but intense card sorting exercise revealed navigation patterns by which key features could be grouped into.

Worked on this card sorting process below with 3 users. Decided to throw down all the concerns, criteria points we observed. This process of sitting down with my users and deep diving showed how the navigation should be structured and highlighted the relationship between different pages.

From top left to right; CUSTOMERS are my primary users. LOCAL COOKS are my secondary users. VARIETY in food cuisines cooked by different Mom’s. FOOD PRODUCT is the value the app brings as to why my primary users should try. PRODUCT FEATURES are the highlights about the service and information while navigating within. REWARDS are the incentives my local cooks- my Mom’s can earn. COMPETITION ANALYSIS who they are and why they are successful in some areas and unsuccessful in others. USER FEEDBACK surely helps the app when the customer and Mom’s feel good with their product. PRODUCT CONCERNS always occur in building the business model and its good to deal with them in the initial stages. USER CONCERNS are best solved when the issues are thought over before and getting users with this exercise helped to understand the issues better.

Taxonomy helped to simplify the problem and clearly define the User, Design and Business goals for Mom’s Hut

User Goals : Easy access to affordable homemade meals

Design Goals : Simple and easy navigation flow to provide service to both users

Business Goals : To make sure my primary users get homemade meals easily and secondary users sell homemade meals without any hassle.

Setting the Navigation with systematic flows User Task Flow for structure and visualization to the concept.

Creating user task flows were effective to visualize and give structure to the concept. The Sitemap showed the structure of my application. It is my reference point to proceed with wireframes, annotations and functional specifications.

Sitemap

6. Sketching App Interface : Wireframes & Iterations

Wireframe Sketch flows and iterations

Sketching low fidelity screen wireframes gave creative inputs to be free and put it all out. I developed my app for mobile. As it’s always carried around and interacted most for fast communication.

Mid Fidelity screens, Annotations and Functional Specifications

Step 1 : Home Screen

Step 2 : Search Nearby to get a list of meals

Step 3: Select Meal to proceed to Order Meal and finalize to Checkout

Step 4 : Checkout process by typing in information to Confirm Order

Step 5 : To view Recent Orders

7. Paper Prototype and User Testing

The most effective way to know you are on the right track is to test with users. And with paper prototype testing I back tracked and eliminated steps that were unnecessary to my users.

Eliminating

Log In/ Sign up : Eliminating the log-in process as the first step gives users the choice to browse the app without an account.

Settings and Account : Why have them visible when you can create a drop down menu if they are interested to access.

Back Button on every screen : Seems redundant to have when it occupies unwanted space.

Visual Interface : Is crucial so that users could recognize each icon/ page/ color/ word easily and keep it memorable.

GUI iterations for the Home screen

8. High Fidelity Wireframe : Interactive prototype

Clickable Interactive Prototype

I created the wireframes and interactive prototype in Axure and Invision.