Lost and Rare Recipes
San Francisco, USA
Where:
What:
Responsive website
Why:
Portfolio Project
Category:
Food
When:
Two months
Role:
Sole UX Researcher and UX designer.
Problem
Lost and Rare Recipes is a Youtube channel that shows unique culinary practices of India. The typical viewer of this channel is adult Bengali men and women across the world. Now it wants to start its food delivery business commercially and for that, it needs a website.
Solution
Design a responsive website for the business which would be user-friendly and could provide clear navigation, offering a seamless food delivery experience.
Making Lost and Rare Recipes' Website Usable
Background
I am a consistent advocate of preserving authentic Bengali (East Indian) food. I wanted to design a website that would serve as a food delivery website of the Lost and Rare Recipes kitchen and could help in preserving authentic Bengali (East Indian) food culture. Lost and Rare Recipes is a YT channel whose unique value proposition is its shareing recipes of Bengali food that are forgotten in the annals of time.
While working towards the project, I discovered they had a food delivery facility in Calcutta (India)available only in a limited scale.
To understand the necessity of this kind of food delivery website, I wanted to do market research. There are many restaurants that provide authentic Bengali food, but the audience of Lost and Rare Recipes are already established. It was assumed they would be the user of the website. However, market research is necessary to understand the future user better. To attract users who are not viewers of Lost and Rare Recipes is another challenge of this project. That is why, I have done market research.
Market Research
-
Recent market study reveals food delivery apps and websites are getting extremely popular among the urban population in India.
-
According to eMarketer, food delivery apps were among the '3 fastest growing categories in 2020'. In this scenario every food delivery organization should have an app or website to deliver food to the buyers.
-
The India Online Food Delivery Market has consolidated over the years leading to only two major aggregators(order & delivery) players in the market which is zomato and swiggy.
-
The cloud kitchen space in India is in its booming phase with more players entering the market recently. Companies like 'Rebel Foods' and 'Biryani by Kilo' has been successful in scaling through Tier 2 and Tier 3 cities in India.
-
The requirement for low investments while establishing a cloud kitchen backed by no necessity of a storefront has given rise to a number of cloud kitchens in India. Cloud kitchens have witnessed growth due to low operational costs and high-profit margins as compared to dine-in restaurants
I realized that Lost and Rare Recipes, having no storefront, would function as cloud kitchen. This would separate its position from other similar dine-in restaurants, available in Calcutta, India. To better understand the business model and how other Bengali cuisine restaurants and delivery works in the market, I have done a thorough competitive analysis. The research questions I have in mind, while doing this, are--
1. Who are the target audience of this website?
2. What are the users doing in the current scenario to cater to their need for authentic Bengali cuisine?
3. What are the Bengali cuisine restaurants doing when it comes to delivering food at home?
4. Are they relying on delivery partners or do they have their own in-house delivery facility?
5. Do they have an online delivery facility or do the users have to call for delivery?
​
Competitive Analysis
6 Bullyganj Place
The Good
​
-
Three of the restaurants provide location-specific delivery. The user who is ordering would be served food, prepared in the restaurant nearby his/her delivery address. Thereby ensuring fresh food delivery.
-
Oh! Calcutta has both delivery and pick-up options.
-
The checkout process for the order online option is seamless and intuitive.
​
Oh! Calcutta
Koshe Kosha
I analyzed three websites of three different restaurants which specialize in authentic Bengali cuisine both in the ordering experience and checking out process.
The Bad
-
Except Oh! Calcutta, none of the websites provide options for online delivery.
-
6 Bullyganj Place does not have an in-house delivery facility and relies on Zomato and Swiggy.
-
Koshe Kosha has its in-house delivery option as well as Swiggy. A minimum order value has to be ordered with the branches closest to the user's delivery address.
User Survey
I conducted user surveys among the regular viewers of Lost and Rare Recipes. The most important question I had in mind was whether the viewers of Lost and Rare Recipes would be the users of the website. I wanted to know whether they are satisfied by watching YT videos or they would order food from their favourite YT channel?
​
The survey result says 80% of the participants wanted to order from their kitchen. I then conducted interviews with some of the participants. Here I have shared the insights I got from the interviews--
​
-
I discovered that many target users consider watching Youtube videos as a fun and relaxing activity when they need a break from their daily chores. However, many of them took interest in actually tasting the food whose recipes they were watching on the internet regularly.
-
There are ample Bengali restaurants in Kolkata(India) that provide food at the doorstep but the unique aspect of 'Lost and Rare Recipes' is their authentic research-based cooking.
-
They offered forgotten and lost recipes of Bengali cuisine. For this reason, viewers wanted to order food from them.
Would you order food online from the kitchen of Lost and Rare Recipes?
Yes, waiting for it.
78%
No
8%
Maybe
12%
Summary of research
Though, most of Calcutta-based food delivery systems that serve authentic Bengali cuisine have their storefront, Lost and Recipes would work like Cloud kitchen. It gains it popularity via social media and YouTube channel and does not need any storefront to establish their brand identity.
-
From the survey it was known 78% of the viewers would be Lost and Rare Recipes' future customers. From the demographic data, it was known, that 50% of them are based in Calcutta. Therefore, Lost and Rare Recipes' needs a kitchen to continue its online food delivery business.
-
Other than relying on Zomato and Swiggy, if Lost and Rare Recipes can provide in-house logistics for delivery that would be advantageous for the business too.
-
According to Ken Research Report, increased smart phone penetration led to an increase in orders placed through mobile as compared to websites on laptops or desktops. Therefore, LRR needs a responsive website to drive their business.
​
​
After gathering insights from market research and user survey, I realized I need to directly talk to the viewers of the LRR YouTube channel. Hence, I contacted five of them through YouTube and set interviews with them online. Here I have pointed out some pain points, I observed, while interviewing them.
User Painpoints
Inadequate Advertisement or marketing
After interviewing the viewers who are potential users/customers it was known 80% of them did not know about this food delivery system.
Limited Availabilty
Many users are frustrated because they can only order food in weekends. They wanted to order even in the weekdays.
Ordering food prior to 3days
Many users seem to be hesitant to pre order food to get the delivery on a certain date and time. It needs preplanning and sometimes they were not ready to plan it .
Making Persona:
​
After conducting user survey with a few people I found some common patterns among them and made one persona to understand the problems of the targetted users
I like to learn and experiment with new recipes. It would be great if I could order them before trying those out at my kitchen.
Goals
I wanted to order from the Lost and Rare Recipes
​
I wanted to pass on rare recipes, that I learnt from the channel, to my children. If I can get them a taste of those they would eager to practice it.
Frustrations
I was not sure what time the team take orders for delivery
Their serving capability is limited.
Description: Jayati is 36 year old homemaker, based in Kolkata, India. She is a longtime viewer of the Lost and Rare Recipes YT Channel. She is an avid learner of recipes that were forgotten in the annals of time she enjoyed watching their channel. Now she wanted to order food from the team.
Name Jayati Mukherjee
Home: Kolkata, India
Age: 36 years
Occupation : Housewife
User Journey Map
-
I created a user journey map of Jayati’s experience using the site to help identify possible pain points and improvement opportunities.
-
After making the persona, I now have a clear understanding of the goals and frustrations of the target users. I wanted to clarify my understanding about a possible user journey map before embarking on designing the website.
The Sitemap
Another important aspect of designing the website is to fully understand the information architecture of the site. For this reason, I designed a sitemap. My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Quick Sketching
Before diving into UI or making the sticker sheet, I focused on sketching low-fidelity wireframes. I started off by referring back to my flows to determine which screens I needed to sketch out and then I listed the content and features that would go on each page based on my research findings. Sketching allowed me to reflect on different screen variations and design decisions I wanted to take.
_JPG.jpg)
_JPG.jpg)
_JPG.jpg)
Digital wireframes
​
-
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. I have made responsive website for iOS , Ipad and Macbook users.
-
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
I used the Lost and Rare Recipes logo and picked the primary and secondary colour from the logo. I also searched for food delivery apps and websites and found shades of yellow and red is highly popular as it goes with the foodie emotion.
UI Ideation process
Developing a consistent branding and a Stickersheet
After making the digital wireframes I wanted to move forward to develop the mockups. Therefore, choosing a typeface and set of colours were the most important things to this end. I created a sticker sheet to maintain consistency. For colours I went with HEX colours model to get exact tints and shadows of main colours. Then I created a typography scale to ensure that the hierarchy throughout the project is preserved.
Making mockups and prototype
After deciding on the design system I made a high-fidelity prototype. Here you can live pre-view the prototype. In the next part, I have shared thee mockups for desktop screens.
Usability Study
Study Type:unmoderated usability study
Location: India, remote
Time: 20-25minutes
Participants: 5 participants
After the prototype was created, I tested it on 5 users. I made a research plan where I outlined research goals, questions- I wanted to know the answers from, KPI's , methodology, information about the participants, and a script with tasks to complete. This was tested in a remote and unmoderated usability study.
Recruiting participant for user test
Observing the users
Recruiting the right participant for user tests is the key to its success. I am cognizant of the nature and criteria of prospective participants in this user testing. I recruited participants from the comment section of the Lost and Rare Recipes YT channel.
​
As a researcher, I observed areas in which participants had difficulty completing the tasks or had confusion understanding a task. I took notes during the process and reviewed the recorded videos and transcripts for which I used a specialized usability test software called UserTesting. I noted down instances where users struggled or made mistakes, where the product failed to meet their needs. For this reason, I prepared Excel spreadsheets to note down observations during the test.
​
In this excel sheet format, one page is dedicated to one participant. There were four different columns- the first column is for the task, the second is for click path, the third is for observation, the fourth is for quotes where I noted down every significant quote the participant had used, and the fifth column I created a task completion section. This section includes an evaluation of how the participant’s completed the task in 3 categories- 1. easy to complete, 2. completed with some difficulty and 3. not completed.
Usability Study Findings
Users are not familiar with the UI,especially the use of two colours made the user a bit uncomfortable while using the interface
Users are confused about choosing the right online delivery partners as the shipping charges are the same.
Some of the participants(3 out of 5) are confused about the ways of ordering food from the site.
Users are frustrated with the checking out process. 60% of the users wanted a cash on delivery option.
15% of the testers wanted a pick-up option for the ordered food.
Reconsidering design decision
After conducting the usability study, I jotted down the insights I got from it and iterated on the design process. I have made deigns of responsive website for iOS , Ipad and Macbook users.
Desktop screens
Alignment and Scaling
-
As I was designing for a responsive website I used Google's Material Design Guidelines for this. While scaling the layout for different screen sizes, the responsive grid adjusts margins and body width as well as the number of columns in the layout.
-
​
-
I used 4-point vertical grid for mobile, for tablet I used 12 column grid system (with 32dp margin) and for desktop I also used 12-point grid system and 32dp margin.
​
​
Mobile screens
I have designed 26 screeens for the responsive website. Here I have shared some of the designs of tablet screens.
Tablet Screens
Impact
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I Learned
During the project, I managed to evaluate the market research, do a quick survey with 5 participants, create a set of low-fi wireframes, build them into hi-fi UI designs, connect them into prototypes, and perform a mini usability study. This was a very insightful, yet time-consuming journey. I learned a lot during the whole process and still learning some of the tricks of the trade. I know the product is far from perfect and there is a lot of room for improvement.
​
I spent a lot of time iterating high-fidelity screens because I did not spend enough time creating low fidelity wireframes. I also had many choices to make about buttons and font size while designing high-fidelity screens that would have been avoided if my sticker sheet was more detailed.
I learned from user feedback that the use of two primary colors is not the best practice in the UI design process. It does not help to reflect brand identity. The more complex and unclear a web page's use of color becomes, the more frustrating it becomes-- even to the average sighted visitor.