UX/UI Designer

Flame Kabob

Website Redesign for a Middle-Eastern Restaurant

Flame Kabob is a family-owned Middle Eastern restaurant in Las Vegas and Henderson. Renowned for its authentic dishes made from scratch using top-quality, Halal meats, the restaurant has garnered a loyal customer base over its 30 years of operation.

Project Overview

Problem Statement

The website wasn’t generating any online orders. Customers were either dining in or using third-party apps instead. The outdated design and poor user experience were major obstacles. To address this, the business pursued a comprehensive website redesign to enhance user experience and streamline the ordering process, with the primary objective of increasing direct online orders.

Business Goals

Enhance User Experience: Design an intuitive, user-friendly website that makes it easy for customers to explore the menu and place orders.
Increase Online Orders: Optimize the online ordering process to increase conversion rates and reduce cart abandonment.
Implement Interactive Design: Introduce engaging, interactive elements to capture user attention, enhance the overall experience, and drive higher site engagement.

Design Thinking

Our team of 4 followed a Double-Diamond approach based on the design thinking methodology. It was not a linear path; we bounced between stages as the project progressed.

Discover

We began the project with comprehensive research to understand the target audience, analyze competitors, and pinpoint key pain points on the existing website. We used:

Heuristic Evaluation
Survey
Interview
Competitive Analysis

Heuristic Evaluation

Heuristic evaluation involves a systematic analysis of a website’s usability, focusing on aspects such as navigation, information clarity, consistency, and error prevention. Based on the insights gained from this evaluation, we enhanced the browsing experience, making it more intuitive and user-friendly.

Takeaway

The background is black, which negatively impacts readability.
There is excessive space, disrupting the visual balance.
The images are inconsistent, with some having cropped corners.
The location information is not placed in an easily accessible area.
The menu is presented in a static, non-clickable, paper-like format.
The menu lacks categorization, making it difficult to navigate.
There is no shopping cart or user account icon available.

Competitive Analysis

Conducting a competitive analysis informed our decisions about the homepage design, offering valuable insights into key features, functionality, and user flows. This analysis helped us in understanding what worked well in terms of design, content structure, and functionality.

Takeaway

Examining competitors’ features helped us identify effective navigation strategies to optimize online ordering.
Their checkout approaches provided insights for streamlining and improving efficiency.
Observing best practices reinforced the value of a minimal and clear design for enhancing user experience.

Survey

To better understand the needs and preferences of our target users, we conducted a survey. We received a total of 30 responses, of which 67% were between the ages of 35 and 44. Here are the key findings:

Features that would encourage people to order food or make a reservation through a foreign restaurant’s website include:

Price (70.4%)
Detailed menu description and images (66.7%)
User reviews and testimonials (51.9%)
Delivery time (51.9%)
Online table reservation system with available time slots (33.3%)
Multiple and secured payment options (25.9%)
Customer support chat or hotlines (11.1%)

Takeaway

Key factors influencing online orders and delivery satisfaction:

Competitive pricing and comprehensive menu details are primary considerations for online orders.
User reviews, timely delivery, and an efficient reservation system significantly enhance customer experience.

Interview & Affinity Diagram

To gain deeper insights into the needs and preferences of our target users, we conducted interviews with 12 individuals. These interviews provided valuable qualitative data to complement our survey findings.

Review

Price

Categorized Menu

Information about Ingredients

Information about Offers

Images of Food

Takeaway

The Affinity Diagram analysis revealed the following key factors that are important to users:

User reviews are essential for building trust and influencing purchase decisions.
Transparent and clear pricing is a major consideration for users when ordering food.
An organized, categorized menu helps users navigate and find dishes more easily.
Providing detailed information about ingredients is important for users, particularly those with dietary restrictions.
Users value knowing about current promotions and offers to make informed decisions.
High-quality images of dishes significantly impact user engagement and decision-making.

Define

Persona

The research insights leading to the development of the persona revealed key patterns and pain points. These findings enabled us to gain a deeper empathy for the users and better understand their needs and challenges.

Site Map

Through 10 close card sorting sessions, we gathered valuable insights on structuring various website sections. These findings helped us develop the initial version of our site map, tailored to the preferences and needs of our target users, which we continuously refined through user testing.

User Flow

Develope

During the development phase, we encountered several challenges that required thoughtful solutions. Here are some key challenges and how we addressed them:

Challenges

The primary challenge was providing users with an easy way to indicate their preference for in-person pickup or delivery to their address. This option needed to be readily accessible and adjustable throughout their browsing experience.

Solutions

To tackle this challenge, we implemented an “Order Pickup & Delivery” button prominently in the hero section of the homepage. This feature allows users to easily select their preference for delivery or pickup. Additionally, the button is consistently accessible at the top of all menu and checkout pages, enabling users to adjust their choices anytime.

The original menu was not categorized, making it difficult for users to browse and find specific items quickly.

We implemented a well-structured, categorized menu, enhancing the user experience by allowing users to filter items by category, thereby facilitating easier exploration and selection.

Users expressed a desire for more detailed information about the dishes, specifically regarding calorie counts and ingredient transparency

We incorporated detailed ingredient information and calorie counts into the food cards. This enhancement not only addressed users’ dietary concerns but also provided added value, enabling them to make informed decisions based on their preferences and restrictions.

Sketches & Wireframing

Low-Fidelity

Using low-fidelity wireframing through hand sketching, we quickly and efficiently explored ideas and enhanced team communication.

Home Page

Menu Page

Checkout Page

Mid-Fidelity Wireframe

We created mid-fidelity wireframes using Figma to gather feedback and iterate on designs before progressing to more detailed and refined stages of the design process.

Home Page

Menu Page

Checkout Page

Delivery Details Page

Pickup Details Page

Food Details Overlay

About Us Page

Usability Test (Phase 1)

Home Page

To streamline the cluttered navigation bar, we implemented the following changes:

Removed the “Online Order” and “Table Reservation” options from the navbar, positioning them prominently in the center of the homepage.
Reorganized the menu on the landing page into categorized sections to facilitate easier access.
Replaced the user reviews on the homepage with a new section highlighting the prompt delivery service available to customers.

Menu Page

In the subsequent stage, we implemented the following changes:

Removed the top buttons to categorize different types of food and replaced them with filters located on the left side of the page.
To enhance visibility for users struggling to locate the delivery or pick-up selection, we introduced a clear toggle positioned prominently at the center top of the page.

Food Card Overlay

In response to user requests for calorie counts and ingredient details for each dish:

We incorporated this information into the food cards.
We replaced the user reviews on the homepage with dish ratings and the number of people who rated each item, enhancing the value of the food cards.

UI Design Direction

To design a high-fidelity interface, we initiated the process by crafting a mood board that encapsulates the stakeholders’ primary objectives and desired emotions. This approach helped us set the visual direction and overall aesthetic for the interface.

Mood Board

The next step in our process was color exploration. We incorporated the red and yellow colors from the logo, as the stakeholders requested that these colors be featured on the website. This approach helped establish the overall aesthetic of the site.

UI Kit

The UI Kit is an essential component of our design process, providing a collection of standardized design elements and components that ensure consistency and efficiency throughout the development of NeighbourTools. This toolkit helps maintain a cohesive look and feel, streamlining the design and development process.

Deliver

Usability Test (Phase 2)

Home page

Home Page

During testing, users frequently overlooked specifying whether they wanted to pick up their order or have it delivered. To resolve this issue:

We relocated the “Reserve a Table” button to the header, placing a greater emphasis on online ordering in the hero section.
The “Order Online” button was changed to “Order Pickup & Delivery,” which now triggers a pop-up that allows users to select their preferred option and enter their address and timing details before accessing the menu.

Menu Page

Another observation from user testing was the challenge users faced in finding specific dishes within the menu. To enhance this experience:

We reorganized the menu into clearly defined categories: Appetizers, Main Dishes, Desserts, and Beverages.
Each category is equipped with relevant filters to facilitate easier navigation.

Checkout Page

Finally, we placed the user’s selected address, date, and time at the top of the checkout page, allowing them to review these details and make changes easily with an adjacent edit button.

How do we evaluate our mission of success?

Heat map optimal path analysis

To analyze the success and confidence of users in one of the most important IAB tasks (donation), we have set up a test platform on Maze. The users have been asked to support IAB by donating $300 to the general fund.

All users completed the task without giving up or bouncing.
As compared to the existing website, the duration of the task has decreased by 50%.

Delivered Design Pages

Home Page

Main Dishes Page

Ingredients Overlay

Delivery Overlay

Menu Page

About us Page

Create New Account

Apptizer Page

Beverages Page

Desserts Page

Main Dishes Details Overlay

Appetizer details overlay

Checkout Page

Confirmation Page

Prototype

Here is the last prototype, displaying what we have achieved through our design process.

Reflection

What did I learn?

Research was key to improving product effectiveness and user alignment.
Team collaboration ensured timely delivery and met deadlines.
Testing and iteration enhanced usability.
The UI kit maintained consistency and streamlined communication.

What can we do next?

The next steps include designing the mobile app.
Additional usability testing and iterations will refine the user flow and enhance the experience.

UX/UI Designer

Flame Kabob

Website Redesign for a Middle-Eastern Restaurant

Project Overview

Duration

Team

Role

Tools

Problem Statement

Business Goals

Design Thinking

Discover

Heuristic Evaluation

Takeaway

Competitive Analysis

Takeaway

Survey

Takeaway

Interview & Affinity Diagram

Takeaway

Define

Persona

Site Map

User Flow

Develope

Challenges

Solutions

Sketches & Wireframing

Low-Fidelity​

Mid-Fidelity​ Wireframe

Usability Test (Phase 1)

UI Design Direction

Mood Board

UI Kit

Deliver

Usability Test (Phase 2)

How do we evaluate our mission of success?

Drop Off

Average Duration

Success Rate

Delivered Design Pages

Prototype

Reflection

What did I learn?

What can we do next?

Low-Fidelity

Mid-Fidelity Wireframe