Byblos -Eastern Mediterranean Cuisine
UI/UX Case Study . 2024
Project Overview
Byblos is a Toronto restaurant offering Eastern Mediterranean cuisine. Until now, Byblos did not have an online checkout process for orders. Our goal was to create a simple and effective online ordering system, enabling customers to easily browse the menu, order for delivery or pickup, and enjoy the convenience of online ordering.
My Role
This was a group project with another UX designers. My role included UX research, brainstorming, creating wireframes and prototypes, and conducting usability testing.
Possible Solution
I proposed developing a complete online ordering system that would allow customers to:
This solution aimed to enhance customer experience, increase convenience, and boost Byblos' sales and online presence.
-
Browse the menu easily.
-
Order food for delivery or pickup.
-
Enjoy special online offers and discounts.
-
Track their orders and manage their favourite items.
Research
I adopted a design-thinking approach, starting with qualitative research through interviews with potential users and then conducting surveys. This helped me understand the main challenges and preferences of Byblos’ customers, revealing pain points such as:
-
Difficulty in navigating the menu.
-
Lack of a convenient ordering method.
-
Desire for special offers and easy order tracking.
User Flow & Ideation
Using insights from the research, I created a user persona representing the typical Byblos customer. This persona helped me generate ideas and solutions tailored to user needs, focusing on simplicity, convenience, and a seamless ordering experience.
-
Easy menu navigation.
-
Simple order placement.
-
Clear steps for checkout and payment.
This solution aimed to enhance customer experience, increase convenience, and boost Byblos' sales and online presence.
Wireframes
I started with rough sketches on paper to brainstorm ideas. These sketches helped me visualize the user journey and identify key features.
Next, I created low-fidelity wireframes in Figma, focusing on layout and functionality. I then conducted usability testing with friends and family to gather feedback, which was invaluable for refining the design.
Visual Language
The goal was to create a fun, user-friendly app. I explored various inspirations, colors, and typography to develop a minimal and engaging design system. I chose a clean, simple style to ensure the app was visually appealing and easy to use.
Conclusion
We successfully developed an online ordering system for Byblos, making it easy for customers to order food online. This new system enhances convenience, boosts user satisfaction, and increases Byblos’ revenue and online presence.
User Flow
Paper Sketches
Lo-Fi Mobile
Hi-Fi Mobile
Hi-Fi Web
Lo-Fi Web





