These days most individuals prefer to order their food online for several reasons. Flame Kabab is one of these restaurants that has provided a website from which customers can order their food. Flame Kabab is an ethnic restaurant that serves Persian and Middle Eastern dishes. Unfortunately, the website is poorly designed and users can not finish the order process successfully. Consequently, we decided to redesign it and transform it into a user-friendly website.

Here is a sample displaying a part of this design, but you can scroll down and read more or click the button to view the complete Figma prototype.

Project Overview

Team

My Role

Duration

Tools

Sorour Askarzadeh

Shamim Validi

UX|UI Designer

3 Months (Summer 2023)

Figma, FigJam, Photoshop, Zoom, Google Meet

While analyzing the website through user research, we identified some key pain points:

• Even though all the necessary information is included on the website, it isn't straightforward and users cannot interact effectively with it.

• The website is not visually well-designed so it can not be attractive at first sight for users.

• The menu is not functional and there are no photos of the foods.

• Design a website where all users have easier access to the menu and all relevant information that can help them make successful purchases.

• Create a consistent visual hierarchy. By applying UI design principles, ensure that important elements like menu items, call-to-action buttons, and contact information stand out clearly, making the site more user-friendly and accessible.

Design Goal

Solution Statement

Establish the trust for customers visiting the website.

• Providing customers reviews and photos of each product.

• Add a refreshing friendly tone to our logo, colors, and content.

They also want to have access to the menu clearly.

• Made different parts of the menu more accessible.

Users need to choose their food based on their appetite.

• Design a website in a way that users can customize their order.

• Designing a box for users to write any necessary instructions.

The Process

In our project, we followed the Double Diamond method, which is rooted in the Design Thinking methodology. Rather than a linear progression, we moved back and forth between stages as the project evolved.

1

2

3

4

Define

Discover

Develop

Deliver

Discover

• The absence of a search bar has caused the site to be dynamically unusable.

• The home page is disorganized.

• The menu is not clickable and easy to use.

• The arrangement of navbar icons is not according to their importance.

• Not having the proper color palette and using several fonts with different ranges of sizes.

We interviewed 12 users to discover customers' needs when they visit restaurants' websites and also what information they need to order their food.

Competitive Analysis

Interview

We analyzed 8 ethnic restaurant websites' content & features.

• Approximately most of these restaurants tried to present themselves by telling the story behind their restaurants and providing several photos to make users trust them better.

• These websites show all the details that users need to know like the ingredients of the foods; additionally, they have provided facilities for users to customize their orders.

• The restaurants have provided details about their location and opening hours in an accessible part of the website so that users can find these details quickly.

Heuristic Evaluation

And these are our takeaways:

Define

Persona

And these are our takeaways:

Affinity Diagram

We utilized affinity mapping to arrange the data gathered from our research.

• Discovering a restaurant, they can rely on.

• Every dish should come with a thorough description.

• There is an image for each food item to simplify the selection process.

Develop

Based on the information from competitive analysis and the needs of the clients and users, we came up with a hypothesis for the site map. To make sure it aligns with the users’ mental model, we tested it by conducting 12 closed card sorting tests. We used the information that we gathered from card sorting to figure out where we should put essential data according to the users’ perspective.

Task & User Flow

First we designed a task flow that represents the user’s journey through a specific task.

Then we designed a user flow that represents the series of steps the user takes to accomplish a single task in the website.

Site Map

Wireframe

At the next step we designed website's lo to mid fidelity wireframes:

UI Kit

At this stage we prepared our mood board, consequently, we designed the other parts of our design such as colors, typography, and CTAs. Additionally, we checked color contrasts to align them with UI standards. Here you can see the full UI kit we created for this project.

Homepage

Product Page

Menu

Checkout

Deliver

High fidelity prototype

For the hi-fi prototype, we designed several pages for the website.

Homepage

Menu

Product page

Checkout

Reflections

What did I learn?

• Through this project which was one of my first projects as a student, I learned the significance of understanding users’ needs throughout the design process. The most effective approach to gaining this comprehensive understanding is by meticulously documenting and consistently referring to all research findings.

What can we do next?

• In the future, we have decided to design the profile section of the website in a way that can provide users with full access to their previous orders. This means that there is no need to search through the menu to reorder items; you can easily re-register your previous orders. Additionally, we aim to make the registration process on the website user-friendly.