Mia Brunch Bar App
An app designing a reservation flow for a local restaurant
My role
Ux Designer
Team
Faneesa Ishak
Cindy Tsoi
Razielle Samaco
Mitali Das
Camille Gordon
Timeframe
7 weeks
Skills
User experience design
Summary
MIA Brunch Bar is a charming Toronto-based restaurant struggling with an outdated website that lacked an online reservation system. The project created reimagines their digital presence. They struggled to get online reservations because their previous site was not attractive or useable. The website did not offer a way to book reservations online, causing customer frustration.This digital friction was driving users away, it increased operational inefficiency as manual booking requests increased staff workload and left room for errors or missed reservations.
Final Design
Challenges
The problems:
-Does not offer a way to book reservations online
-Not designed for a desktop view (unresponsive)
-Too much whitespace and lacks visually appealing elements
-Text heavy content
-Confusing navigation
The Challenges:
-
Mobile-first constraints of the menu:
There was a challenge in which photos and how much detail to include with the menu as there was limited screen space available -
Balancing simplicity with flexibility for the reservation process:
We wanted to create a quick two tap booking process while maintaining the ability to select other details like party size, date, time, seating preference and special requests.
Metrics
The metrics would be measuring:
-Reservation completion rate, drop off points where users abandon the reservation flow, time to book, and repeat visitors
Background
Many restaurants still rely on phone calls or social media messages for reservations, which can be error-prone, inconvenient, and limited to business hours. Online booking platforms have raised customer expectations, requiring instant availability, easy date and party selection, and confirmation notifications. Designing a seamless reservation system involves balancing simplicity for users with enough flexibility for different party sizes and special requests, while ensuring real-time availability and security. Mobile optimization and accessibility are critical, as more customers search and book on smartphones and expect inclusive experiences. A well-designed booking interface not only reduces staff workload and no-show rates but also enhances the restaurant’s brand and customer satisfaction.
Technological trends include the rise of online booking platforms like OpenTable, Rest and Yelp Reservations and many users search and book directly from their smartphones.
We transformed the current MIA Brunch Bar website into a modern, welcoming, and functional digital platform in order to improve its user experience. We optimized information architecture and user flow. We streamlined the reservation process by creating a central hub for inquiries, to effectively reduce business costs and the high load on employees, by decreasing the number of phone calls and Instagram messages. We enhanced user satisfaction by optimizing the website for seamless browsing on mobile and desktop platforms, ensuring accessibility for all customers. We found it easier to use the website and did some guerrilla testing and when we did, people said it looked better. Better experiences increase website traffic & online visibility.
Use Cases/ Design Research Synthesis:
Use cases include:
1. Customer making a reservation
2. Customer modifying or cancelling a reservation
3. Restaurant staff managing reservations
4. Customers discovering the restaurant
5. Marketing and retention
Design research synthesis includes the development of:
-Information architecture
-Moodboard
-Style Guide
-
Competitive Analysis
-
Flow Diagram
-
Information architecture
To have a cohesive style in our design, we first created a Style Guide
Creating the moodboard first helped us to decide on the colours we wanted to use in the website design
Competitive Analysis
We compared three different restaurants in the brunch space to see how they differed.
Explorations
The Desktop Menu:
Easy access to the sticky header gives user easy access to other pages
Clean layout of the menu with seamless scroll allows customers to browse menu with ease
Easily able to access each section by clicking on category heading
Screen fit for desktop view
The Desktop Reservation
Simple reservation booking process
Allows customers to select a table based on their dining preferences
Users receive an email confirmation of their booking
Seamless navigation to find directions to the restaurant
Wireframing
Each team mate owned a separate page on the mobile interface. We worked on each screen and used the icon style and colours indicated by our style guide.
We started with paper prototypes of the home page
Final UI Design
.png)
.png)
Before
After
.png)
Reflection
In designing the Mia Brunch Bar app, we learned the importance of creating a seamless reservations booking experience across both desktop and mobile platforms, ensuring users could easily secure a table with minimal friction. Organizing the menu more efficiently highlighted how clear information hierarchy directly impacts user satisfaction and decision-making. The project reinforced the value of consistency in layout and design elements to maintain an intuitive experience across devices. The next step would be to perform user testing to validate our design decisions and gather actionable insights. Additionally, incorporating more micro-interactions could further enhance the user’s engagement and overall experience on the website.