Introduction
Background
Restaurants play a vital role in bringing communities together, serving as gathering places where people can connect over delicious food and shared experiences. Whether it's a cozy neighborhood diner or a bustling eatery in the city center, restaurants provide a space for individuals to come together, socialize, and forge meaningful connections. At times, dining out is an integral part of building connections with friends, family, and loved ones.
Problem
In the realm of web design for restaurants, one key challenge I’m addressing is optimizing the user experience to drive more customer engagement. This involves creating a visually appealing and intuitive website that not only showcases the restaurant's menu and ambiance but also provides seamless functionality for online ordering and reservations (which it currently doesn’t have). The current website needs an improvement on visual harmony and informational structure. The restaurant’s color schemes are a bit uncomplimentary, so I’d love to improve on branding as well to bring more cohesion.
Goal
My goal is to create a seamless and enjoyable experience for every visitor, regardless of their choice of device. It’s significant for users to be able to find key information like the menu, location, hours, and reservation options easily. I also plan on staying within a similar color scheme, while also improving on where the colors are used to preserve a well-balanced focal point.
Research
Research Goal
I would like to explore ways to help restaurant diners who prefer to be seated fast to smoothly book a reservation, because this can encourage a sense of convenience when they participate in a dine-in experience.
Food for thought:
How might we create a seamless booking tool for restaurant diners in order to better their time-spent on planning for a dine-in meal?
Objectives
Identify other responsive websites by restaurants/food businesses
Understand what types of information users tend to seek when going onto a restaurant’s website (also what action items they usually pursue)
Define the perspective, needs, and priorities of restaurant diners
Focus Areas
What pertinent information is needed from the user for them to book a reservation?
How long does it usually take?
What kind of information should be displayed prior to the reservation process?
What types of information do restaurant diners seek at the homepage?
What information is missing from the original website that could be helpful for new customers?
What additional pages are needed?
Methodologies
User interviews
Understand what a user is looking for when going on a food website
Gather knowledge on information hierarchy of folks interested in using this website
Usability Testing (on original site)
Observe first-hand how the user finds information they need on the original website
Identify any pain points users may have for overall structure and visual design
Participants
Restaurant diners
Food content influencers
Food enthusiasts
Competitive Analysis
Persona
Define
Task Flows
General Pain Points
The site has too many strong colors, so there’s no focal point
There’s misalignment at the footer and is too large (takes up entire screen when scrolled all the way down)
Not all pertinent information are showcased
The full menu on the home page is a bit overwhelming (photos are also way too large)
No direct CTA — users not too sure they’re draw to any action
Design
Mid-Fidelity Wireframes
High-Fidelity Wireframes
Test
Methodology
Prototype usability testing was conducted on 5 various participants — each person took approximately 30 minutes to go through the task flows as well as provide constructive feedback. Testing was presented in 2 different task flows — making a reservation (desktop v. mobile).
Usability Task Flows
Making a reservation (desktop and mobile)
Success Metrics
Task completion
Users were able to complete the tasks from beginning to end without mistakes
Task flows were equally easy to understand as both tasks are the same (different screen format)
Feasibility
Users reported that the necessary buttons and CTAs were easy to find
They were able to determine the focal point and information is easy to find due to visual harmony
Enjoyable Sentiment
Users sees a huge improvement from original website to new one (visual design and functionality)
Overall User Feedback
Footer was more symmetrical and balanced in comparison to the old website
The logo’s yellow could be a bit brighter/more vibrant
The footer was a bit too bright – it drew attention away from certain parts of the website
The scroll menu for each option in the reservation tab looks very clean and simple
The hero section of the mobile site should be a bit bigger
Loved that the main CTAs are in their own section on the top right
Conclusion
Prototype
Desktop Web Design
Mobile Web Design
Final Thoughts
Designing a responsive website has taught me so much about screen-sizing inclusion! Being able to create a product that can be used by many different devices will enable the restaurant to reach a broader audience. This project also allowed me to improve on a website of a small business that I tend to frequent with my family for most of my childhood!
Adding a reservation booking system on the website definitely brought more functionality to the product as a whole. Customers can now not only hop on the site to find the information they need but also pursue certain action items as well.
As a UX designer, I learned how to re-design a business’ responsive website from the ground up! While achieving a new structure was important, I was able to further my branding skills by creating a new logo and improving the website’s color scheme. Additionally, I was able to build out a new tool from scratch! Overall, the experience from this project will challenge me to push my boundaries in the future.