House of Annapoorna
Project Overview
Designing a responsive website and work on rebranding for a local restaurant.
My Role
Methods
Duration
Tools
Stakeholders
Project Background
House of Annapoorna is a restaurant based out of Chennai, India. Its mission is to serve healthy, South Indian vegetarian food at affordable prices. They take pride in serving authentic food that echoes the preparations of a typical south Indian household.
Their initial focus was on providing daily carrier meals to the elderly and people yearning for a taste of home.
Since COVID-19 hit, there has been a significant increase in demand for the delivery of healthy vegetarian food. They have been using manual ways of keeping up with users who order lunches daily. They have also had to keep up with numerous catering and general inquiries.
They also take care of catering for events and door delivery of food other than their dining services.
They wanted me to build a responsive website and work on branding (logo and brand refresh) to create a better customer engagement and enable the delivery of items available.
Project Scope
The scope of this project is to focus on designing the online order journey to increase their sales and provide a pleasant experience for their users.
Problem Statement
help users experience a pleasant online ordering experience?
help the restaurant with managing the daily orders?
create a brand image that resonates with authentic, vegetarian South Indian cuisine?
Approach
- Design a responsive website, that is easy to navigate.
- Provision to place an order on the website that is user-friendly to both adults and the elderly.
- Provision to place pre-orders for next-day carrier meals with subscription services.
- Provision to place an inquiry for catering of events.
- Brand refresh with a redesign of logo and styling.
My Design Process
1 Empathize
2 Define
3 Ideate
4 Prototype
5 Test
Empathize
To better understand how to solve the problem, we need to understand our users and delve deeper into their behavior. Conducting research will help us understand the emotional, social, and irrational drivers that affect the way our users behave.
To gain the most out of this phase, a clear research plan was created.
The Research plan has research goals, questions, participants, methodologies and respective timeline.
Stakeholder Interview
An interview with Stakeholders was conducted to understand the orders that come in daily, the pains and gains experienced by their customers, and to better understand their business.
Below are the takeaways from the interview:
- HOA (House of Annapoorna) wants to have a responsive website to promote their brand and other offerings like catering for events, corportate orders etc.
- They want to work on their branding mainly on logo, styling and brand image.
- They receive nearly 60+ pre-orders everyday for next day breakfast and lunch meals via phone calls/whatsapp messages. They are currently tracking those manually by writing them down.
- They offer online delivery, partnering with Zomato and Swiggy. But they are facing few issues with them like
- Swiggy charges 24% commission on every order.
- Zomato charges 22% commission on every order.
- They are not able to obtain customer data to promote their offerings or take feedback.
- They are receiving a lot of calls from potential customers for subscription of meals.
- To improve customer engagement through feedback, promotions, social media, website visits etc.
Competitive Analysis
A competitive analysis was conducted with direct and indirect competitors of the House of Annapoorna. I took into account the restaurants nearby, delivering South Indian food online.
Feature based analysis
User Survey
I conducted a user survey to gather quantitative data and gain insight into the potential users. Below are the survey results. You can see below the survey results.
72
18-70
Location
Questions
User Survey Summary
You can access the detailed summary results of the survey here
- 90% of the users were above 30 years old.
- Around 90% of people dine at a restaurant frequently.
- 50% of people order food online on a regular basis.
- Lunch is the most frequent meal of the day ordered online.
- Convenience is the top reason for preferring to order online than dine out.
- 60% of people look for healthy options while ordering online.
- Wallets and online payments are the most preferred way of paying. But a significant amount of people also want cash on delivery as an option.
- Around 60% of people have pre-ordered their meals for the next day
- 40% of users feel a good image of the food item will influence them in placing order of the item.
- Most used filters are Recommended and delivery time, followed by ratings and popularity.
- 60% or more are interested in subscribing to meals.
- 60% users prefer the menu to be known beforehand for placing pre-orders for meals
Define
Now that we have got some key insights from our research phase, we need to understand who is that we are designing for? What our goals will be?
With the insights achieved from the research phase, I created an empathy map & a User Persona to highlight the behaviors, goals, frustrations, and motivations of the user
User Persona
Meet Karthik, a 31-year-old software professional from Chennai. He is a fitness freak and enjoys a home-cooked balanced meal. Since his work days are hectic, he orders out frequently. He struggles with ordering online as he rarely gets healthy options.
Empathy Map
With a clear persona in mind, I dug deeper to understand what Kathik would think while placing an order online, how he would behave, and what triggers his pains, gains, and other behaviors.
Customer Journey Map
Below is a customer journey map created to highlight the journey taken by a potential customer engaging with the restaurant.
Project Goals
Our next step is to figure out the project goals to chalk out our next steps ahead. For a product to succeed, the business and user goals need to go hand in hand.
Below pictorial representation shows us the user goals (our main hero here!), business goals (we need to create a product that sustains), and technical goals (providing a seamless experience).
Product Feature Roadmap
The next step is to chalk out a list of product features to create a comprehensive product roadmap. The features are sorted into four categories, including Must-have (P1), Nice-to-Have (P2), Delightful (P3), and Can-wait (P4) features.
Feature Matrix
The 'feature matrix quadrant' depicts the cost and impact of a particular feature. The High-impact and low-cost features are a must-have, whereas High-cost and low-impact are to be avoided. The other features are balanced, aligning with our project goals.
Information Architecture
Our last task for the define stage is to create an information architecture. This is an important step in our process. A detailed Information Architecture will help us visualize the hierarchy and organization of information in our product.
Ideate
Sketches
I kickstarted the ideate stage by sketching my ideas on an iPad before proceeding to create low-fidelity Screens.
Sketching enables me to give my ideas a concrete shape before I proceed to digitize them. I iterated before zeroing in on what fits my goals and research best. Below are the final sketches.
Sketches for Desktop
Sketches for Mobile
Wireframes
Based on the sketches, I created mid-fidelity screens to better define the hierarchy, visual depiction and styles.
Wireframes for Desktop
Wireframes for Mobile
You can have a look at all the wireframes here
Branding
UI Kit
Before we move on to create Hi-Fidelity screens, we created a UI Kit. The UI Kit contains the logo, color palette, typography, and all the UI Elements used. This kit provides a reference for future designs and is handy in collaboration with the design and development team.
Hi-Fidelity Screens
After defining the UI kit, I created the Hi-Fidelity designs. Below you can see the responsive screens for Desktop and mobile.
Desktop Screens
Mobile screens
You can have a look at all the Hi-Fidelity Screens here
Prototype
Below you can watch a quick prototype preview of the ordering online and subscription journey.
Order Online
Subscription
Test
Usability Testing
To test if our approach to the problems we defined to solve is right, I created a Usability Test Plan and conducted usability testing with our working prototype.
5
24-60
Location
Occupation
Each participant was asked to imagine a hypothetical scenario and perform related tasks. The testing was conducted via remote and in-person.
Tasks to perform
Task 1: Order 8 plates of Idly.
Task 2: Schedule an order of 8 plates of Idly for the next day at 7 am.
Task 3: Subscribe for breakfast and lunch plans for a week.
Test Findings
Wins
- All participants found the website clean, attractive, and easy to navigate.
- All participants felt the brand image was trustworthy, dependable, and catered to all age groups.
- 5/5 participants were able to finish all tasks without any help or intervention.
- 5/5 participants felt the subscription flow was very interactive.
Pain Points
- 5/5 participants were not aware of choosing meals was a multi-select process on the subscription page.
- 3/5 participants mentioned that the checkout process through the cart was not what they predicted. All 3 of them expected the next action to either be a button float option or on the right panel as the rest of the pages.
- 1/5 participants wanted to be aware of the number of steps present in the subscription flow.
- 1/5 participants felt that once there is an addition of meal details, a confirmation from the user is necessary and currently is missing.
Opportunities for improvements
- Change the appearance of the choose meals buttons to make it intuitive to the user that it is a multi-select.
- Change the checkout process, from adding to the cart instead to guided workflow.
- On the subscription page, use a progress indicator to intimate the user about his step progress.
Priority Revisions
Prioritizing the suggestions, pain points, and patterns observed from participants, the following changes were made.
01 - Design the ‘Choose Meal’ button to reflect multi-select function
The choose meals button is now designed as a checkbox to reflect multi-select functionality.
02 - Add to cart in Online Ordering flow to be more prominent
To address issues regarding adding items to cart functionality not being as intuitive and informative, I designed a panel to display information on items added to the cart and help proceed with the order.
03 - Intimate users on steps for subscription of meals
On the subscription page, use a progress indicator to intimate the user about his step progress.
04 - Confirm with user before adding meal to cart in subscription flow
Confirm with the user before adding meal to the cart during the subscription flow.
Reflections
Key Learnings
This being my first live project, I learnt a lot from this. From interaction with stakeholders to conducting usability tests on potential customers, it was a steep learning curve for me.
Analyzing the usability test results, I believe the approach I used to solve the problems was right.
I was able to design a responsive website for a local restaurant and help them with their branding and online business.
I hope you enjoyed learning about this project during this process. Please feel free to leave feedback and connect with me anytime.
Next Steps
My next step is to explore help the restaurant in developing the website and testing the application with live testers once in production.