From Outdated to Outstanding : Enhancing India Cafe’s Online Experience
Restaurant Website
Overview
Redesigning the website of an Indian restaurant to improve its visual design, navigation, and overall user experience through usability testing and user research.
Problem Statement
The existing website had several usability and design issues, including:
Outdated visual design with low-quality images.
Poor navigation structure, making it difficult for users to find essential information.
Limited content about the restaurant, its history, and offerings.
Dependency on a third-party site for menu access.
Goals
Improve the website's aesthetics with high-quality visuals.
Enhance navigation and provide a seamless user experience.
Integrate a well-structured menu directly into the website.
Add engaging content about the restaurant’s story and cuisine.
Implement feedback from usability testing to refine the design.
Role
User Experience Design, Visual Design, User Research, Prototyping, Usability Testing
Duration
January 2022 - April 2022
Tools
Figma, Photoshop, Illustrator, FigJam, Google docs, Usertesting.com
Design Process
Following the design processes doesn't just give users an intuitive and pleasurable experience - it poses an opportunity for designers to iterate and improve their design.
Heuristic evaluation
As part of my research, I conducted a Heuristic Evaluation of the India Cafe website to assess its usability, accessibility, and overall user experience.
Using Nielsen’s 10 Usability Heuristics, I identified key usability challenges and provided actionable recommendations to enhance the website's functionality and user experience.
User Research
To get some quantitative data, user questionnaires built with Google Forms were distributed across entrepreneurial social groups and pages on WhatsApp & Slack.
Personas & User Stories
By analyzing the information gathered from user questionnaires and creating personas, a series of user stories were formulated to gain a deeper understanding of the user experience on the India cafe website. These user stories aim to capture the various stages and interactions users go through during their journey on the website.
"What would the users want to do?"
Usability testing of current site
100% of respondents found that there were no images on the Gallery page .
80% of respondents found that the menu items were not labeled clearly.
60% of respondents found that the ingredients list for dishes was incomplete, and reported that vegetarian options were not clearly
40% of respondents reported that the information on the About page was incomplete and outdated.
40% of respondents found that the hours of operation were not clearly displayed
40% of respondents reported that there was no option for special requests when placing an order.
Low Fidelity Wireframe
Created basic wireframes in Figma, focusing on simplified navigation, clear menu access, and engaging visuals.
High Fidelity Screens
Created basic wireframes in Figma, focusing on simplified navigation, clear menu access, and engaging visuals.
Prototype
Building the prototype has been really fun experience. I’ve created components and related variants to create animations such as hovering effects, horizontal scrolling of the images carousel. I’ve set up Navbar as a fixed element in each page to give even more the impression of a working website. And of course I’ve linked each item to its page.
What did I learn?
Holistic UX Research and Methodologies:
Applied a comprehensive range of user-centric research methodologies, including heuristic evaluations, surveys, interviews, and persona creation, to gather actionable insights and inform design decisions.
User-Driven Information Architecture and Navigation:
Enhanced information architecture and navigation by analyzing user flows, conducting task-based usability testing, and addressing issues through iterative design, resulting in a more intuitive and structured user experience.
Proficient Prototyping and Design Iteration:
Demonstrated proficiency in both low-fidelity wireframing and high-fidelity prototyping using Figma, embracing an iterative approach to refine designs based on continuous feedback, ensuring visual alignment and user satisfaction.
Strategic Design Thinking and Implementation:
Applied strategic design thinking by addressing critical issues identified through usability testing, such as menu labeling clarity and incomplete information, translating recommendations into actionable design changes for improved usability and user satisfaction.
