Brand logo

House of Annapoorna

Responsive Website design for a Local restaurant
HoA banner

Project Overview

Designing a responsive website and work on rebranding for a local restaurant.

My Role

UI/UX Designer
(Sole contributor)


UX Research
UX/UI Design
Usability Testing


80 hours




Hari Narayanan V
Krishnamurthy M.P
View Prototype

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

How Might We

  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?


  • 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

Stakeholder Interviews
Competitor Analysis
User Survey

2 Define

User Persona
Customer Journey Map
Project Goals
Product Feature Roadmap
Information Architecture

3 Ideate

UI Kit
Hi-Fidelity Design

4 Prototype

Hi-Fidelity Prototype

5 Test

Usability Testing
Priority Revisions


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.

HoA Competitive analysis

Feature based analysis

HoA Competitors 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.




Age Range
60% of participants
were under the age of 30




12 Questions
Based on ordering online

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


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.

User persona

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.

Empathy map

Customer Journey Map

Below is a customer journey map created to highlight the journey taken by a potential customer engaging with the restaurant.

HoA customer journey

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).

Project goals

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.

Product roadmap

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.

Feature Matrix

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.

HoA Information Architecture



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

HoA desktop sketches

Sketches for Mobile

HoA mobile sketches


Based on the sketches, I created mid-fidelity screens to better define the hierarchy, visual depiction and styles.

Wireframes for Desktop

HoA Desktop Wireframes

Wireframes for Mobile

HoA mobile Wireframes

You can have a look at all the wireframes here


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.

HoA UI kit

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

Hi Fidelity screens for Desktop

Mobile screens

Hi Fidelity screens for Mobile

You can have a look at all the Hi-Fidelity Screens here


Below you can watch a quick prototype preview of the ordering online and subscription journey.

Order Online



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.


1 Female and 4 Male


Age Range
80% of participants
were above the age of 30




Chartered Accountant
Software Professional
Insurance Consultant
Retired lieutenant

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


  • 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.

Priority revision for choose meal multiselect

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.

Priority revision to make add to cart more prominent

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.

Priority revision to intimate users on steps for subscription

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.

Priority revision for confirm in subscription


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.

Check out other projects


An End-to-end Mobile App for Habit Development
View Case Study

GPay Insights

Adding an insights feature to the existing GPay app
View Case Study


Responsive Website design for a retail store going online
View Case Study