About Flame Kobab
Redesign Website
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. It 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. Because of that, we decided to redesign this website and transform it into a user-friendly website
About Flame Kobab
Duration
3 month
Team
Group of 3
My Role
UX/UI Designer
Software
Figma
Figjam
Project Overview
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.
Design Goal
design a website where all users have easier access to the menu and all relevant information that can help them make successful purchases.
Discover
Heuristic Evaluation
· 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 the 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.
User Research
Competitive Analysis
We analyzed 8 ethnic restaurant websites' content & features.
Key Takeaways:
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.
Our Challenge
One of our challenges has been creating a functional menu for customers and also designing an easy way to order food so that users can complete their food orders without any ambiguity.
Interview
Define
Affinity Diagram
We utilized affinity mapping to arrange the data gathered from our research. Here are the primary needs and goals of our customers:
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.
Solution Statement
Establish the trust for customers visiting the website.
Providing customers reviews with photos that are uploaded to the website and photos of each product.
Add a refreshing friendly tone to our logo, colors, and content.
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.
They also want to have access to the menu clearly.
Made different parts of the menu more accessible
Persona
Develop
User Flow
Site Map
Design
Wireframes
Here are our initial wireframes presenting what we discovered as critical information on the homepage, main nav bar, and other pages.
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.
