Restaurant's Website Design
Restaurant's Website Design
Embedded Files
Restaurant website that offers a wide range of services such as dining, catering, delivery, etc. The goal of the restaurant is to offer food made with fresh ingredients and provide its details making it easier for customers to make choices according to their dietary restrictions.
Challenges: Available restaurant websites have cluttered designs, incomplete details of the menu items, and lengthy checkout processes.
Challenges: Available restaurant websites have cluttered designs, incomplete details of the menu items, and lengthy checkout processes.
Solution: Design a Restaurant’s website to be user-friendly by providing necessary information related to nutrition, allergy, and services offering a fast checkout process.
Solution: Design a Restaurant’s website to be user-friendly by providing necessary information related to nutrition, allergy, and services offering a fast checkout process.
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User research:
User research:
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users order food online to relax when they need a break from work. However, many restaurant websites are overwhelming and confusing to navigate and lack ingredient details which frustrates many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of relaxation.
A primary user group identified through research was primary caregivers and part-time students who would like to get social with their coworkers and help them by collecting their orders.
User Persona
User Persona
User Journey Map
User Journey Map
Starting the design:
Starting the design:
Sitemap:
Sitemap:
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create 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.
Paper Wireframes:
Paper Wireframes:
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a “group order” for a quick and easy ordering process to help users save time.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes
Refined paper wireframe
Paper wireframe
screen size variation(s):
Because Restaurants’ customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Wireframes for tablet and mobile
Digital wireframe:
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.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Paper wireframe screen size variation(s):
Low-fidelity prototype
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The low-fidelity prototype connected the primary user flow of selecting menu items and making payments for orders so the prototype could be used in a usability study with users.
Usability study: findings
Usability study: findings
These were the main findings uncovered by the usability study:
Refining the design:
Refining the design:
Mockups
Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was adding the search text along with the icon. This allowed users to have an intuitive navigation.
To make the checkout flow even easier for users, I added “***” for required details and also provided text to enter required details.
Mockups: Original screen size
Mockups: Original screen size
Mockups: Screen size variations
Mockups: Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Tablet Screen
Mobile Screen
High-fidelity prototype
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by peers.
View the Restaurant’s website high-fidelity prototype
Accessibility considerations
Accessibility considerations
Takeaways
Takeaways
Impact
Impact
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
“The task was completed in approximately thirty seconds, if not less. There is no necessity for any modifications as the process adheres to the appropriate and straightforward standard procedure.”
What I learned:
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next Steps:
Next Steps:
Conduct follow-up usability testing on the new website.
Identify any additional areas of need and ideate on new features.
Page updated
Google Sites
Report abuse