Lezzet Shawarma and Falafel House
- A Responsive Website redesign for a Restaurant
From Overwhelm to Ease:
Simplifying Lezzet Shawarma’s Website Experience
Lezzet Shawarma Falafel House, a restaurant specializing in shawarmas and falafels, was facing several challenges with its existing website. While the menu appeals to a wide range of customers, the website needed improvements in user experience, brand identity, and accessibility of essential information such as the menu, location, and contact details. The goal was to redesign the website to streamline navigation, strengthen the brand presence, and make it easier for users to find what they need.
Role: UX Designer
Client: Lezzet Shawarma and Falafel
Timeline: 7 Weeks
Team: 4 Members
Existing Website
Landing Page
Landing Page
-
Use of too many bold colours.
-
Inconsistent buttons that doesnt look clickable.
-
Very big and prominent hero image.
-
Use of too many bold colours.
-
Inconsistent buttons that doesnt look clickable.
-
Very big and prominent hero image.
-
Use of too many bold colours.
-
Inconsistent buttons that doesnt look clickable.
-
Very big and prominent hero image.
Testimonials
-
Color choices blend with the background, reducing legibility.
-
Irrelevant image to support testimonials.
-
No proper theme being followed in terms of images and other visuals.
Menu Page
-
Overly text-heavy interface.
-
Lack of high-quality images.
-
Color choices blend with the background, reducing legibility.
-
Overly text-heavy interface.
-
Lack of high-quality images.
-
Color choices blend with the background, reducing legibility.
Current Roadblocks
Lezzet Shawarma and Falafel is a well-established shawarma restaurant in Canada. Upon reviewing the website, we identified several areas for improvement in its user interface. The vertical navigation created disruptions by limiting user control, and the landing page featured unclear and inconspicuous call-to-action buttons ("menu" and "location"). We noted a lack of consistency and a weak brand identity throughout the site. Additionally, the use of low-contrast and low-quality visuals impacted the overall user experience.
Redesign Roadmap
The main goal was to enhance the website’s overall design and organization for improved usability.
-
A visually appealing and coherent Mediterranean-themed brand identity.
-
Improve the visibility and accessibility of key elements, including the menu, location, and contact information.
-
Create an organized and visually appealing presentation of the menu .
​​
This comprehensive approach aims to elevate user experience and align with the desired brand image.
User Flow
Style Guide
We incorporated Montserrat and Bismillah fonts to reflect the brand’s heritage. To align with the Mediterranean theme, we utilized a palette of gold and black. The entire website features a black background, maintaining continuity with the previous design while creating a cohesive and modern aesthetic.
​
The logo design was thoughtfully crafted to symbolize a shawarma roll, subtly representing the restaurant's core offering.
Usability Testing of Existing Website
We conducted usability testing with 4 participants for a better understanding of what and how users feel about the current responsive website. We identified few insights pointed out by the participants to incorporate in our final prototypes.
Why are there no pictures for the shawarmas and falafel? How do i know if they look good inorder to go there?
Too cluttered and confusing home page. The colors used are too bright and lot of things here and there.
They could have categorized the menu well.
What is this menu? So descriptive and no pictures! I would rather not use this website.
Paper Wireframes
Based on the findings from the usability tests on the current website, we synthesized the findings and developed wireframes following the 'Mobile first' method.
Home Page
Menu
1. The Primary Navigation with the logo on the left
2. The primary Navigation with the hamburger menu on the right. The Hamburger menu includes Menu, Location and Contact, Catering, about Us, Reviews and Home sections.
3. The main CTA of 'Menu and Location' as the restaurant doesnt offer delivery and is purely used to look for menu and directions.
4. The footer with all the important information.
5. Categorization of food tabs into shawarma, falafel etc.
About Us
6. Shows the story of the place, the team, followed by the footer
Catering Service
7. Videos of the catering services, its success, followed by the footer
Location & Contact
Gives the contact details and directions with a map view.
Reviews
8. Moving carousel of reviews and testimonials.
Desktop Wireframes
After working on the paper wireframes for mobiles, We implemented the same design thoughts on to the paper wireframes of desktop version. All the design parameters remain same except it has been made to a desktop version.
Home Page
Menu
Catering
About Us
Location
Reviews
Mid Fidelity Wireframes
After a thorough discussion on the paper wireframes, we created mid-fidelity wireframes with the motto - MOBILE FIRST. We designed the header and created a fat footer with lots of breathing space.
As defined earlier, we created prominent CTA buttons for menu and location as that is the main goal of the users arriving on this website. As this is a responsive website, we have all the information on the home page as well and the users could get detailed information if they click on the hamburger menu on the mobile version and the tabs on the desktop version.
The idea and the layout is kept similar for both the versions of mobile and desktop.
Mobile Wireframes
Home Page
Menu
About Us
Catering
Location
Reviews
Desktop Wireframes
Home Page
Menu
About Us
Catering
Reviews
Location
Usability Testing of Mid-fi Wireframes.
We conducted usability testing with 4 participants on the mid fidelity prototypes for a better understanding of how the users interacted with them and collected some insights based on their experience.
Oooh. I think the Veg non-veg indication is missing
If the ingredients were mentioned i would have had a basic idea on what to choose and what not to choose as i am allergic to few.
How do i know the spice level of each item? I mean i have seen it being used in other food apps and websites
Please add tempting pictures. That does make a difference
Mobile High Fidelity Wireframe
Our final redesign of the Lezzet Shawarma website focused on three main opportunity areas for enhancing user interaction and accessibility. We incorporated user feedback to improve the overall layout, including suggested updates to the menu for clarity and ease of use. To streamline the ordering process, we integrated third-party delivery links, such as Uber Eats, allowing users to order effortlessly. The redesigned homepage now provides a concise overview of the website’s content, with clickable links guiding users to designated pages via an improved navigation bar. Additionally, we ensured the design maintained a cohesive brand identity, creating a seamless and intuitive user experience.
Final Prototypes
Desktop High Fidelity Wireframe
Mobile Prototype
Desktop Prototype
Key Takeaways:
After redesigning the website for 'Lezzet Shawarma and Falafel House,' I gained several key insights:
-
Clear and Intuitive Navigation: Effective navigation is critical to delivering a positive user experience. A well-structured layout ensures users can easily access the information they need, improving engagement and satisfaction.
-
Iterative Design and Testing: Usability testing provided invaluable insights for refining the design. Iterating on prototypes helped identify areas of improvement and ensure the final solution was both functional and user-friendly.
-
Responsive Design Challenges: Designing for various platforms, including mobile and desktop, emphasized the importance of responsiveness. Ensuring the website adapted seamlessly across devices required attention to detail and technical expertise.
-
Attention to Detail: Even small design elements, such as button placement or color contrast, can significantly impact the overall user experience and accessibility of the website.