Tablz summer 23

Supporting guest menu customization in regular and large group bookings

Summary

timeline

3 Weeks

role

Lead Designer

process

Mobile Design
Design System
Icon Design

Tablz is a restaurant booking portal working with restaurants to allow customers to view the 3-dimensional perspective of the featured tables. Based on user research conducted, 60% respondents would want to book a table when they have a party of 6 people or above. Hence, large group booking was a top priority in Tablz roadmap during my internship period.

As one of my individual projects, I was assigned to lead the design of guest menu preferences of the booking experience on the mobile app, I worked closely with product team (designer, engineers) to tailor my design. I also learned new skills of creating icons by completing the project.

Result

Over the time of 3 weeks, I led the design of Large Group Booking customization page with various stakeholders (designer, engineer) and the product went live after my internship, helping 2500+ users per month.

Monthly Users

2500+

used the feature 1 month after launch

User retention rate

15%

increase in making reservation for large groups

01 Define

Booking summary page and Large Group Booking

Booking summary page allows users to configure details before checking out and making a reservation. It is an unavoidable step of Tablz's user flow for different use cases.

Usability feedbacks: discovered problems for design improvements

We gathered some user feedback from both customers and restaurant owners, which provided different perspectives to the solution.

⏳

Feedback from customers

Customers found the checking out process long and confusing.

Customers found customization inconvenience: “Each of us had to log in to fill out our preference”.

Customers found the checking out process long and confusing.

Customers found customization inconvenience: “Each of us had to log in to fill out our preference”.

👩‍🍳

Feedback from restaurants

Having customers configure their dietary restrictions and other requests save up time for preparation.

Thinks the process can still be simplified if there’s a large number of guests.

Having customers configure their dietary restrictions and other requests save up time for preparation.

Thinks the process can still be simplified if there’s a large number of guests.

Hence, the question became…

How Might We

How might we accommodate the needs of both large party guests and the restaurant to customize requests to ensure a seamless dining experience?

Regular booking vs. Large group booking

Next, considering the users may have difference priorities for using regular booking and large group booking, I proposed different design goals for both use cases:

Regular booking

Users often book restaurants for special occasions, which calls for tailored categories to guide their choices.

Large group booking

With at least six people customizing, efficiency in handling individual preferences becomes essential.

02 Design solutions

01. Add a new dietary note

Users have the flexibility to either choose a set menu from several available options or create a brand-new dietary note tailored to an individual guest.

02. Edit a dietary note

When edits are needed, they can simply click on the pen icon located on the specific user card to update, change, or refine any information.

03. Remove a dietary note

If a dietary note is no longer required, clicking the delete icon will allow users to completely remove it from the system.

03 Iterations

01 Design for regular booking

To include various fields for customization, I included four sections:

01. dietary restrictions; 02. occasion types; 03. group members (children size restriction); and 04. accessibility requirements.

Based on these fields, I explored the design of new components and icons for Tablz design library.

To include various fields for customization, I included four sections:

01. dietary restrictions; 02. occasion types; 03. group members (children size restriction); and 04. accessibility requirements.

Based on these fields, I explored the design of new components and icons for Tablz design library.

02 Design for Large group booking

As I was trying to accommodate the user needs for both personas, I came up with the solutions to include a Set Menu and Dietary Note in the customization page.

🧾

Set Menu

To further improve the efficiency of the restaurant, user can choose to select one of the set menus provided.

🥛

Dietary Note

As the most important customization section, user can choose their allergies or dietary preferences before dining.

Keeping the concept of large group (guests >= 6) in mind, I was exploring different design synthesis to allow the customers to select menu and dietary notes in the simplest way without any limitations.

Based on the user goals, I came up with 4 options. After evaluating different options, the team thinks that option 2 is the most feasible and effective. Designing on a small screen, option 2 can best display all the information without any truncation or blocking. Hence, I focused on exploring option 2 for my future iterations.

04 Takeaways

My learnings

Detail Orientation in UI

I focused heavily on fine-grained design adjustments—margins, font sizes, icon scales, and spacing. On mobile screens, even the smallest tweak can create a significant visual and usability impact.

Organizing Workflows

I learned to structure my design files and iterations in a way that benefits not only myself but also fellow designers and cross-functional teammates, streamlining collaboration and communication.

Thanks for stopping by!

Connect or say hi @

↗

Thanks for stopping by!

Connect or say hi @

↗

⟵

Back to All Work

⤒

Back to Top

⟶

View Next Case Study

Thanks for stopping by!

Connect or say hi @

↗

Thanks for stopping by!

Connect or say hi @

↗