Tablz summer 23
Supporting guest menu customization in regular and large group bookings
Summary
timeline
3 Weeks
role
Lead Designer
process
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
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.
⏳
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”.
👩🍳
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:
Users often book restaurants for special occasions, which calls for tailored categories to guide their choices.
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.
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.
🥛
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.