The Dhaba
UX/UI Design · website reDEsign
The Dhaba, initially started as a traditional Indian grocery store later expanded into a marketplace that offers an on-site restaurant. Customers use third-party applications to place orders. The objective of this project was to attract users and increase website traffic ensuring an enjoyable experience.
INTRODUCTION
MY ROLE
THE TEAM
TIMELINE
UX Research, user interviews, usability testing, branding, UI design
Just me
Aug 2022 — Nov 2022
I redesigned the website and addressed major usability issues based on research findings to ensure an enhanced user experience. By identifying pain points through user research, I could prioritize improvements that align with user needs and expectations.
heuristic evaluation
I examined the website according to its compliance with Nielsen’s 10 heuristics shown below.
My goal here was to evaluate website's usability using a heuristic evaluation method and determine how quickly users can navigate and complete the tasks they want. This process involved compiling a list of usability issues, rating severity, analyzing the issue, and formulating suggestions on how to address the issue.
issue #1
Broken navigation links.
Many navigation options lead to non-functional or irrelevant pages, causing confusion and frustration for users.
violation: H1, H5, H9
severity: 4
Recommendation: Ensure all navigation links direct users to relevant and functional content,
issue #2
Inconsistent navigation and absence of breadcrumbs.
Navigation inconsistencies, including links redirecting users to unfamiliar pages without breadcrumbs, contribute to user discomfort and potential page abandonment.
violation: H1, H3, H4, H7
severity: 3
Recommendation: Implement breadcrumbs to provide users with clear navigation paths and maintain design consistency across the website.
issue #3
Overloaded content and lack of visual aid.
"About Us" section contains excessively long lines of text, decreasing readability. The absence of food images in the menu makes it difficult for users to visualize their choices.
violation: H8
severity: 3
Recommendation: Shorten text lines to enhance readability and incorporate images into the menu for a more engaging experience.
issue #4
Inconsistent icon representation.
Some icons on the website do not accurately represent their corresponding content, potentially causing confusion for users.
violation: H6
severity: 2
Recommendation: Ensure icons align with their respective content to facilitate user recognition.
issue #5
Unclear visural hierarchy and layout.
The website contains disorganized content placement, resulting in an aesthetically unappealing user experience.
violation: H8
severity: 2
Recommendation: Simplify the interface, emphasizing visual hierarchy and organizing elements for improved aesthetics and usability.
issue #6
Lack of system status indication
The website fails to provide users with clear feedback on their actions, particularly during the food ordering process.
violation: H1
severity: 2
Recommendation: Implement visual cues such as progress bars, loaders, or pop-up messages to inform users about their actions' status.
user research - the survey
I conducted a survey to better understand the customers and their preferences. It aimed to gather insights on demographic trends, online ordering habits, and user expectations.
Findings revealed that the customers expressed a desire for features such as aesthetic appeal, clear food descriptions with pictures, allergy guides, offers, and fast delivery. Observations highlighted issues like the website directing users to third-party platforms for menu viewing, potentially leading to user distrust, and confusion. Some users expressed confusion and skepticism due to the website's navigation issues, highlighting areas for improvement to enhance user trust and satisfaction.
usability testing
I interviewed 5 individuals and conducted usability testing(remote and in-person) to gather diverse perspectives into their interactions with The Dhaba website.
Four key issues were addressed during testing.Scenarios were devised to test these issues. Pre-test questionnaires were used to gather demographic information and user expectations, while post-test questionnaires assessed ease of use, design, navigation, and overall impression of the website.
The session was conducted with a script outlining the goals, tasks, and recording permissions, ensuring participants' understanding and cooperation.The entire process aimed to identify usability issues and gather feedback for website improvements.
Don't understand the chart? The link below provides a detailed breakdown and results of the usability test conducted.
Usability test sheet link.
The survey and the usability test findings guided the development of recommendations and personas, aiming to address user concerns and optimize the website for improved user experience.
Don't understand the chart? The link below provides a detailed breakdown and results of the usability test conducted.
Usability test sheet link.
The survey and the usability test findings guided the development of recommendations and personas, aiming to address user concerns and optimize the website for improved user experience.
i identified four user groups and defined user stories for the same
“As a customer, I want to be able to filter veg and non-veg dishes, so that I can specify my preferences.”
“As a customer, I want to view the pictures of the dish and its ingredients list, so that I know what to expect from my order”
“As a customer, I want to view the pictures of the dish and its ingredients list, so that I know what to expect from my order”
“As a regular user, I want to have a good experience navigating the website, so that I can return to the website with no frustration.”
“As a regular customer with food allergies, I want to specify my allergens, so that my order is prepared excluding those allergens.”
“As a regular customer with food allergies, I want to specify my allergens, so that my order is prepared excluding those allergens.”
“As a new user, I want to browse through a simple menu, so that I can order the right dish of my taste without wasting time.”
“As a new customer, I want to get food recommendations from the website, so that I can order them.”
“As a new customer, I want to get food recommendations from the website, so that I can order them.”
“As a customer, I want to be able to trust the website to input my card details during checkout.”
“As a customer, I want to know the quantity of food per dish, so that I can order according to my needs.”
“As a customer, I want to know the quantity of food per dish, so that I can order according to my needs.”
wireframing
I then started ideating solutions and drafting designs on paper. It was helpful to create these sketches side by side so that I could come up with the advantages, disadvantages, and "what-ifs" of each sketch right away.
information architecture
I established a foundational information architecture by mapping out the primary routes users take when navigating the website. By understanding that I created a simple hierarchical structure that facilitates efficient navigation. This foundational architecture serves as a blueprint for the website's layout and design, ensuring that users can easily find what they are looking for and complete their tasks with minimal effort.
SOLUTION
Final Outcome: Highlights
Each highlight addresses an issue mentioned before. It calls out which problem its solving and what the solution is.
popular dishes
No popular dishes & platform for specifying dietary requirements.
problem
solution
New users struggled to identify the most sought-after items, leading to decision paralysis and potentially impacting user engagement. Users may miss out on trying highly-rated dishes, and the absence of this information could reduce the perceived credibility and appeal of the menu.
A text box allows users to add extra comments while ordering, which fails to effectively communicate its purpose or relevance to specifying dietary needs.
A text box allows users to add extra comments while ordering, which fails to effectively communicate its purpose or relevance to specifying dietary needs.
Display the best sellers prominently on the home page to grab users' attention and encourage them to explore popular menu items. This taps into the principle of social proof. Users are more likely to perceive those dishes as desirable and worth trying themselves.
To provide clear indications and guidance within the ordering process, I added a dedicated section where users can specify dietary restrictions or preferences.
To provide clear indications and guidance within the ordering process, I added a dedicated section where users can specify dietary restrictions or preferences.
search
Absence of a search option for menu items on the entire website.
problem
solution
Four out of five participants used the "Ctrl+f" function to search for a dish during the usability test. It was difficult for users to locate specific dishes they are interested in, especially in with a large variety of items. Users become frustrated having to manually scan through the menu.
I introduced a search bar in the menu section, allowing users to easily search for specific dishes they are looking for. The search bar addresses the user need for efficiency and convenience. By offering a search functionality, the website accommodates the user behavior, reducing frustration.
veg filter
No option to filter or differentiate vegetarian and non-vegetarian dishes.
problem
solution
For users with dietary restrictions or preferences, such as vegetarians or vegans, the inability to filter or identify suitable menu options can result in frustration and inconvenience. Without clear differentiation between vegetarian and non-vegetarian dishes, users may waste time searching through items that do not align with their dietary requirements, leading to dissatisfaction.
I added a filter feature that allows users to filter between vegetarian and non-vegetarian dishes. Implement color-coded icons next to each dish to clearly indicate its classification. This enhancement will cater to users with dietary preferences and streamline their menu browsing experience aligning with personalization and inclusivity.
visual appeal
Lacks food pictures and quantity of a single serving on the menu.
problem
solution
Users struggled to envision the dishes and understand their portion sizes without visual representations and descriptions of menu items. This can lead to uncertainty and hesitation when making selections, potentially resulting in fewer orders or dissatisfaction if expectations regarding portion sizes are not met upon delivery. Additionally, the absence of images and portion size details decrease the overall appeal of the menu.
I added pictures and appropriate descriptions to all the dishes on the menu and specified portion sizes in terms of the number of individuals. Visual representation enhances user comprehension and decision-making. Providing portion size information helps manage their expectations regarding quantity.
I also added breadcrumbs as a secondary navigational element that supports way-finding and making users aware of their current location within the hierarchical structure of the site.
I also added breadcrumbs as a secondary navigational element that supports way-finding and making users aware of their current location within the hierarchical structure of the site.
PS: All the images used in the design are sourced from Pinterest and were purely used for educational purposes as a part of this case study.