Dineable is a restaurant reservation platform that allows users to visually select their table before dining. Inspired by the seat-selection experience of BookMyShow, the product focuses on transparency, control, and confidence during the booking process. Instead of guessing where they’ll be seated, users can see the restaurant layout from a top view and choose the table that best fits their preference. 

*Click on the banner below to see the Figma prototype of this Website

1. What problem was I trying to solve?

When booking a restaurant table, we usually don’t know where we’ll actually be seated. I personally experienced this when I booked a table for a private gathering and was seated very close to the entrance, which felt uncomfortable and disruptive. On the other hand, some people prefer entrance-side tables, especially when dining with elderly family members who cannot walk long distances, but they often end up getting tables at the far end of the restaurant.

This lack of visibility creates unnecessary inconvenience and disappointment. To solve this, I designed Dineable, a table booking experience that lets users see the restaurant’s table layout in advance and choose a table based on their comfort and needs.

2. Who I made this for

I designed Dineable for people who care about comfort and experience while dining out. This includes families with elderly members, couples planning private meals, groups hosting celebrations, and anyone who wants more control over where they sit. It is also useful for frequent diners who prefer specific seating and for restaurants that rely on reservations to manage seating more efficiently. 

3. My simple product goals

• Give users clear visibility of where they will be seated before booking

• Reduce discomfort and awkward dining experiences caused by random table allocation

• Help users choose tables based on their needs like privacy, accessibility, or proximity to the entrance

• Make the table booking process quick, intuitive, and stress-free

• Improve trust and satisfaction in reservation-based dining experiences

4. Why these features? (In my normal way of explaining)

I designed these features by thinking about how people naturally book a table. First, users need a home screen where they can either find their favourite restaurants or discover new ones nearby. This helps them explore without feeling lost.

Once a restaurant is selected, the restaurant page gives all the important details like menu, ratings, and reviews so users can quickly decide if the place is right for them. After that, users choose their preferred date, time, and party size because this is the basic information needed before showing available tables.

The table selection screen is the core of the product. I designed it as a top-view hall layout, similar to BookMyShow, so users can clearly see where each table is located. Users can also switch between floors if the restaurant has multiple levels.

Finally, the last screen is kept simple to complete the reservation without distractions, making the entire flow smooth and easy to follow.

User flow

Wire-Framing 

Wireframing helped me focus on structure and user flow before thinking about visuals. At this stage, my goal was to understand how users move from discovering a restaurant to completing a reservation without confusion.

I started with low-fidelity wireframes to map the core screens: home, restaurant details, time and party selection, table layout, and confirmation. This allowed me to quickly test different layouts and screen orders and remove unnecessary steps early on.

Special attention was given to the table selection screen. I ensured the hall layout was clear, scannable, and usable on a single screen, so users could compare tables at a glance without excessive scrolling. Wireframing also helped me define hierarchy, spacing, and interaction patterns that later translated smoothly into the high-fidelity designs

My Design Thought Process

1. Understanding the vibe I wanted

From the very beginning, I wanted Dineable to feel premium and luxurious, not in a loud or flashy way, but in a calm, confident, and refined manner. The goal was to make users feel that they are booking an experience, not just a table.

I focused on clarity, spacing, and visual balance so the interface feels breathable and elegant. Clean layouts, minimal clutter, and well-structured sections help users focus on what matters without feeling overwhelmed. Every screen is designed to feel intentional and polished, giving users confidence that the restaurant and the booking process are trustworthy and well thought out.

The luxurious feel also comes from attention to detail. Smooth transitions, consistent typography, and subtle visual hierarchy guide users naturally through the flow. Instead of adding too many elements, I prioritized simplicity and precision so the product feels premium, professional, and easy to use at the same time.

2. Why this color palette?

I chose this color palette to support the premium and luxurious vibe I wanted for Dineable, while still keeping the experience clear and usable. The dark shades like black and deep grey create a sense of sophistication and focus, which is often associated with high-end dining experiences. They also help reduce visual noise and keep the attention on the content.

The purple accent is used intentionally and sparingly. It adds a touch of elegance and modernity without overpowering the interface. Purple also works well as a highlight color for selected tables, active states, and key actions, making important elements stand out clearly.

The lighter greys and white balance the darker tones and improve readability. They help separate sections, text, and cards so the interface does not feel heavy.

For typography, I used Meie Script for the main branding and key headings because it brings a subtle calligraphic feel that adds authenticity, warmth, and a sense of royalty to the experience. To balance this, I used Inter for supporting content and body text, as it is clean, highly readable, and works well for functional information. Together, this typography pairing maintains elegance while ensuring clarity and usability throughout the booking flow.

3. Illustrations & visual language

I chose not to use illustrations in this design to keep the experience clean, focused, and premium. Instead of decorative visuals, I relied on a consistent icon system wherever visual support was required. This helped maintain clarity without adding unnecessary distractions.

Icons are used thoughtfully at key points to guide users, communicate actions quickly, and reduce cognitive load. They support navigation, table selection, and booking actions while keeping the interface minimal and structured.

4. Layout choices (my logic behind it)

Since this is a website, I designed the layout with a wider screen experience in mind while keeping it simple and structured. I used a clear grid system to maintain alignment and consistency across pages, which helps the interface feel organized and premium.

Information is divided into well-defined sections so users can easily scan and find what they need. On the home and restaurant pages, key details like images, ratings, and actions are placed above the fold to reduce effort. For complex steps like table selection, I used a full-width layout so users can view the entire floor arrangement at once without feeling restricted.

White space plays an important role in the layout. It prevents the design from feeling heavy, improves readability, and allows important elements to stand out. Overall, the layout supports smooth navigation, easy comparison, and a calm booking experience from start to finish.

6. UI decisions that came from my own habits

Many of the UI decisions in Dineable came directly from my own experiences as a user. When I book a table, I personally like to see all my options clearly at once rather than scrolling through multiple screens. That is why I designed the table selection view to show the full hall layout in a single, expanded view.

I also tend to scan information quickly instead of reading long descriptions. This influenced my use of clear sections, short labels, and visual hierarchy so important details like timing, seating position, and availability stand out immediately.

Another habit is wanting reassurance before confirming a booking. To support this, I placed reviews, ratings, and key restaurant details close to the booking actions. These choices are based on how I naturally interact with booking platforms and helped me design an interface that feels intuitive and comfortable to use.

I designed the time selection in a way that reflects how people actually plan dining. Instead of locking users into one exact time, the interface shows available slots 30 minutes before and 30 minutes after the selected time. This gives users flexibility to choose what feels most convenient without restarting the search.

This small variation reduces frustration when the preferred time is unavailable and helps users make quicker decisions. It mirrors real behavior, where people are usually comfortable adjusting plans slightly if it means securing a better table or restaurant experience.

The final feel (and what I learned)

The final design of Dineable feels calm, premium, and intentional. Every screen is focused on helping users make confident decisions without feeling rushed or overwhelmed. The dark palette, structured layout, and clear flows come together to create an experience that feels luxurious yet practical.

What I learned most from this project is how small UI decisions can have a big impact on user comfort. Things like table visibility, flexible time selection, and clear hierarchy significantly improve trust and ease of use. I also realized that good design is not only about what you add, but what you consciously choose to leave out. While designing, I became more aware of edge cases, accessibility needs, and the trade-offs between ideal experiences and real-world constraints.

Beyond that, I noticed the value of observing real user behavior even in subtle ways : how micro-interactions, transitions, and timing can influence confidence and satisfaction. Dineable reinforced that thoughtful design requires balancing aesthetics, usability, and emotion. Every decision, from content prioritization to interaction cues, can shape how users perceive and engage with a product. This project reminded me that design is an ongoing learning process: there’s always something just beyond immediate sight, and being open to discovering it can elevate the experience even further.