Categories
Case Studies

Foodlooking- Order Streetfood Online! My first ever UX case study.

View the original post

Personal Project (Solo) | October 2021

Shortcut –

https://medium.com/media/095739c14f0376fe57c133442079e4de/href

Quick Overview –

I designed an app that lets you order street-food online. Why? Because there isn’t one in the market and it can save street-food vendors’ business in situations like the current COVID pandemic. How? Let’s find out.

But before scrolling..

I know reading a long article can sometimes be a tedious job; especially when our attention spans have become shorter (than even a goldfish now!). So if you don’t want to go through the full story, 👉 here’s a link to the slides presentation deck.

Process –

As it was a completely solo-personal project, my responsibilities included all the way from UX research, UI design, Usability testing to even UX writing as well. I applied all the things I learned in the Google UX design professional certificate program. More on that later, let’s start with the case study.

Empathize > Define > Ideate > Prototype > Test

Design Thinking framework was used for building this case study.

🕐 Understanding The Users

I conducted a survey, hallway testing and interviews to understand the user needs. To identify user groups, I formed individual & aggregated empathy maps using which I made personas with their user stories and user journey maps.

Photos of me conducting individual interviews and hallway testing.
This is me conducting individual interviews and hallway testing.

Research Findings –

03 -Group Interviews conducted while Hallway Testing

02 -Individual Interviews conducted online

35 -Survey Responses collected

The research provided me with mixed outcomes about my initial assumptions regarding hygiene, taste and costing. Plus it gave me additional insights like lack of sitting area, love of eating on the spot and many more.

For the hallway testing, I went to one of the famous street food lanes (Khau Galli) in my city and asked people a few questions. I asked my LinkedIn connections for the individual interviews. And I used Facebook & LinkedIn groups for conducting my survey.

Initially I thought nobody found any street-food on existing food delivery apps and they all would love to have a street-food delivery app; but as it turned out, few of them had found some (semi) street-food options but they were too expensive to order and few others never bothered about searching street-food on any food delivery app.

I asked questions like..

  • How often do you eat street-food?
  • What do you like and dislike the most about the experience?
  • How do you check for hygiene?
  • Do you find street-food on any of the existing food delivery apps?
  • What do you think of the concept of ordering street-food online?
  • What will make you trust the place you are ordering from?

I got replies like..

  • “Surroundings matter when it comes to hygiene”
  • “Usually a check for reviews and ratings but if there are photos it would be really helpful…”
  • “I would love to order street-food online..”
  • “I don’t check for street-food online because I love to go there and have it..”

Survey Outcomes –

Survey about street food habits.

User Research Pain Points –

1. Not finding enough online street-food options to order from.

2. Extra delivery charges make cheap street-food expensive.

Empathy Mapping, Personas & User Journey Mapping –

I created individual empathy maps of the 6 active participants and combined them to produce 2 aggregated empathy maps to form my user personas with their user stories. I mapped their user journey in the existing scenario to look for any edge cases.

Photos of empathy maps on paper.
Paper empathy mapping (individual)

I found two user groups; one which comprises people who have a busy daily routine & want to order food more often. And another which comprises students who enjoy going out more often.

Now let’s give them names! We’ll call the first user group Neha, who is a young working person; and the second user group Akshay, who is a college student. Find more about them in the personas and journey maps I made for them.

Image of Primary Persona : Neha
Primary Persona : Neha
Image of Neha’s Empathy Map (aggregated empathy mapping)
Neha’s Empathy Map (aggregated empathy mapping)
Image of Neha’s User Journey Map
Neha’s User Journey Map
Secondary Persona : Akshay and his empathy map (aggregated)

🕑 Defining a clear problem

Let’s focus on Neha..

Now let’s be honest here. Akshay’s problem can be solved by just listing out all the street food vendors in the city on our app. He rarely orders food online, so he’ll be happy. Encouraging him to order online more instead of going out, is less of a design problem in my personal opinion.

Problem Statement –

Neha is a busy working professional living away from her family, who needs easy and time saving ways to order & pickup street food online, because she wants to focus on her career and stay productive in life.

Value Propositions-

  • Lists all the street food vendors in the city
  • Pickup feature
  • Hygiene badge for completing weekly assessment
  • Live order tracking
  • Easy to use
  • Fast delivery

Why the 'takeaway /self pickup' feature?

During the interviews, I came across one participant who likes to go and take parcels instead of ordering food online. Another participant feels shy and gets conscious while eating outside on their own. And there are still many people (..like my parents) who would commute through busy traffic, burning fuel just to have that little human interaction at the cash counter of a restaurant. This is the main reason people go out to take parcels and not order online. Saving money isn’t always the case!

And another reason is when the restaurant is on the way or you are just nearby to get a takeaway.

That's why the 'pick-up' feature, to save some user's time.

🕒 Ideating possible solutions

I made a hypothesis and did brainstorming exercises like How Might We..? and Crazy 8s followed by a detailed competitive analysis to come up with lots of different ideas.

Hypothesis Statement –

I believe being able to order street-food online with free pickup and minimum delivery charges with no lower limit on orders would solve Neha’s problem.

How Might We and Crazy 8s –

I used the How Might We..? exercise to think of possible solutions and did the Crazy Eights exercise to sketch them out quickly.

1. How might we make ordering street food online a fast and efficient process?

Photo of Crazy 8s done on paper for the first HMW question : best experience.
Crazy 8s done for the first HMW question : best experience.

2. How might we make ordering street food online as difficult as possible?

Photo of Crazy 8s done on paper for the second HMW question : worst experience.
Crazy 8s done for the second HMW question : worst experience.

[The first one told me what to do and the second one told me what not to!]

Competitive Analysis –

I did a detailed competitive analysis of the key competitors in the Indian market. I made a spreadsheet and a report of the same to record my findings.

You guessed it right!! It’s Swiggy and Zomato. These two are the top performers in the Indian food delivery market. Others come & go but they have sustained pretty well! I went through these apps thoroughly and tried to find as many details as possible.

The reason for not doing a competitive analysis before the brainstorming activities was to not get influenced by any existing designs and to make use of the unstifled creativity.

Competitive Analysis Google Sheets snapshots.

🕓 Starting the design

[Goal st, User Flows, Storyboards, IA, Paper Wireframes, Digital Wireframes, Low-fidelity Prototype]

Goal Statement –

The Foodlooking app will let users order street-food online which will affect people who want to enjoy street-food at the comfort of their places by enabling them to order or pick-up their favorite street-food from the vendor of their choice. We will measure effectiveness by the number of downloads and orders placed.

Also,

The Foodlooking app will let users order street-food online which will affect local street-food vendors who want to sustain their business by enabling them to take orders online and sell directly from their kitchens.

User Flows –

I made two user flows. One for Neha; to place a pick-up order and one for a group ordering feature that I had in my mind!

Photo of primary User Flow : Order a Pick-up (on paper)
Primary User Flow : Order a Pick-up
Photo of secondary User Flow : Group Order (on paper)
Secondary User Flow : Group Order

Storyboards –

Keeping our primary persona in mind, I sketched a big-picture and a close-up storyboard to visualize their journey with our app.

Big-Picture & Close-up Storyboards : Neha orders street-food through our app.

Information Architecture –

Designed a basic sitemap considering the primary user flow.

Photo of Information Architecture : Foodlooking (on paper)
Information Architecture : Foodlooking

Iterating with Paper Wireframes –

For deciding layouts and the task flow, I sketched multiple options for the screens on paper; both for the primary & secondary user flows.

Photo of Paper Wireframes Iterations
Paper Wireframes Iterations

Digital Wireframes & Low-fi Prototype –

Figma link of the low-fidelity prototype

Digital Wireframes & Low fidelity prototyping

🕔 Testing early concepts

I conducted a well planned moderated usability study with three participants to test my low-fi prototype. I analyzed the results using spreadsheet note-taking and affinity diagram to find patterns & themes. Using the insights generated, I made changes in the prototype and did a round two testing. Finally I recorded the findings in a presentation.

Research study involved four stages: Plan > Conduct > Analyze > Present

Planning the research study –

The plan for this research study includes seven stages:

  • Project Background
  • Research Goals
  • Research Questions
  • KPIs
  • Methodology
  • Participants
  • Script.
My UX Research Study plan for Foodlooking

Conducting the usability study –

I conducted a moderated usability testing with three participants based on some simple tasks, which helped me find major confusion points in my design. In fact, all of the participants got frustrated at exact same points and that’s why I decided to not move further with more participant testing and make some changes to the design. After analyzing the findings and design changes, I did a round two testing with two of the previous participants and found the changes that I did, worked successfully.

Analyzing & synthesizing the findings –

Based on the videos recordings and the scribbled notes during the interviews, I made a detailed spreadsheet to gather & organize information properly in one place. Then I converted these detailed notes into brief ones on digital sticky notes to make an affinity diagram so that I can find patterns and themes in the user experiences.

Links to view the documented notes for Foodlooking Pattern Identification and Foodlooking Insight Identification, if you want.

Note-taking spreadsheet for Foodlooking Usability Study
Screenshot of the affinity diagram made in an online tool called Figma Jam.
Affinity diagram made in an online tool called Figma Jam.
Themes & Insights from the research study of the Foodlooking app

Modifying the design –

I prioritized the insights as P0 & P1 and made minor changes at the confusion points for a second round of testing. And the changes worked! At this point, I realized the importance of testing early with a low-fi prototype.

Links for the Foodlooking low-fidelity prototype version 1 and Foodlooking low-fidelity prototype version 2 to play with, if you want.

Before-After screenshots of the low-fi prototype.

Presenting the findings –

This 20-slides-presentation contains five brief sections about study details, themes, insights, recommendations, revisions & next steps.

Usability Research Presentation for Foodlooking

🕕 Refining the final designs

Now based on the refined wireframes, I made high fidelity mockups. Worked on visual design elements like typography, color, layout and formed a detailed high fidelity prototype. Tested it again with three participants to check usability and validate my designs.

Link of the the final high-fidelity prototype.

Use Case 1 : Neha searches for bread pattice & orders a pickup.

Use Case 2 : Neha checks out profile of Ambika Sandwiches & orders a delivery.

Image of some details in the UI
Some details in the UI

Typography-

Ubuntu | Roboto

Color-

Orange– #E76C07, #FF7400 | Blue– #4215ED, #1963FC

The reason for the branding color to be Orange is; when it comes to street-food, we see a lot of shades of Orange. Be it Pani Puri, Kachori or Masala Dosa, Orange is everywhere.

Accessibility Considerations-

  • Voice search enabled.
  • Color contrasts that pass WebAIM WCAG norms.
  • Imagery & detailed text descriptions.

https://medium.com/media/c04f052f3592ca95270ee18988cb5379/href

🏁And that’s a wrap!

I hope you like my work.

What I learned-

While designing the Foodlooking app, I learned that just day-dreamt ideas are not enough to make products. Research studies in every step of the product lifecycle add value and directions to our efforts.

Acknowledgements-

I would like to express my gratitude towards all the people who are involved in making the Google UX Design Certification Program on Coursera; be it the instructors, other designers, coders, managers, everyone & anyone who made it possible for people like me to learn UX design remotely from some of the world’s best instructors. I would like to also thank all the people who participated in my research and usability studies. This project would never have been completed without any of you! 🧡

Links in this article-

Thanks for scrolling till the end!

I understand it’s a long case study and I appreciate that you took some of your valuable time to go through it.

Please feel free to get in touch through following links: Email, LinkedIn.

Edit: I also designed a responsive website for the same concept, you might want to check that out here. Thanks!


Foodlooking- Order Streetfood Online! My first ever UX case study. was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.