Mathew Cheung

CV

Mathew Cheung

Introductions

The Problem

Design

Conclusion

Introductions

Background

Rather than implementing different solution providers, the client wanted a bespoke and centralised membership experience for their diners. This included latest restaurant news, event and restaurant bookings and many more. Due to the scale of the project, I’ve decided to focus on the booking and reservation management experience, breaking down how I approached creating an optimised, consistent web and mobile experience.

Background

Rather than implementing different solution providers, the client wanted a bespoke and centralised membership experience for their diners. This included latest restaurant news, event and restaurant bookings and many more. Due to the scale of the project, I’ve decided to focus on the booking and reservation management experience, breaking down how I approached creating an optimised, consistent web and mobile experience.

Background

Rather than implementing different solution providers, the client wanted a bespoke and centralised membership experience for their diners. This included latest restaurant news, event and restaurant bookings and many more. Due to the scale of the project, I’ve decided to focus on the booking and reservation management experience, breaking down how I approached creating an optimised, consistent web and mobile experience.

Impact

The efforts of the project was able to improve convenience for users when making reservations and requests to customise dining experience. From surveying the client team after the project, it was found that there was a 15% increase in positive feedback submitted by diners in at least 2 of the restaurants under Club Batard.

Impact

The efforts of the project was able to improve convenience for users when making reservations and requests to customise dining experience. From surveying the client team after the project, it was found that there was a 15% increase in positive feedback submitted by diners in at least 2 of the restaurants under Club Batard.

Impact

The efforts of the project was able to improve convenience for users when making reservations and requests to customise dining experience. From surveying the client team after the project, it was found that there was a 15% increase in positive feedback submitted by diners in at least 2 of the restaurants under Club Batard.

The Design Stage

The Design Stage

The Design Stage

Design Requirements

The reservation feature must obtain the following details from the customers with an optimised user experience for both web and mobile.

Design Requirements

The reservation feature must obtain the following details from the customers with an optimised user experience for both web and mobile.

Design Requirements

The reservation feature must obtain the following details from the customers with an optimised user experience for both web and mobile.

1

Segmented by meal type (e.g. Drinks, Brunch, Dinner etc)

1

Segmented by meal type (e.g. Drinks, Brunch, Dinner etc)

2

Segmented by meal type (e.g. Drinks, Brunch, Dinner etc)

2

Booking time

2

Booking time

1

Booking time

3

Party size

3

Party size

3

Party size

4

Seating type

4

Seating type

4

Seating type

Mapping out our User’s Journey

Mapping out our User’s Journey

Below is the user journey to submit a reservation. Feel free to switch between web and mobile to get a full picture.

Below is the user journey to submit a reservation. Feel free to switch between web and mobile to get a full picture.

Below is the user journey to submit a reservation. Feel free to switch between web and mobile to get a full picture.

Mobile app

Web App

  1. Select a restaurant

  1. Directed to the Restaurant details Page

  1. Select a date

  1. Set the party size

  1. Select a booking time

  1. Select the booking type

  1. Select seating options

  1. Review booking details and submit

  1. Booking Success

Mobile app

Web App

  1. Select a restaurant

  1. Directed to the Restaurant details Page

  1. Select a date

  1. Set the party size

  1. Select a booking time

  1. Select the booking type

  1. Select seating options

  1. Review booking details and submit

  1. Booking Success

Mobile app

Web App

  1. Select a restaurant

  1. Directed to the Restaurant details Page

  1. Select a date

  1. Set the party size

  1. Select a booking time

  1. Select the booking type

  1. Select seating options

  1. Review booking details and submit

  1. Booking Success

Displaying unavailable options

We wanted to reduce friction for users when making reservations, regardless if they are planning ahead or making last minute bookings. An important aspect for consideration is how do we display unavailable options to speed things up for the user.

Displaying unavailable options

We wanted to reduce friction for users when making reservations, regardless if they are planning ahead or making last minute bookings. An important aspect for consideration is how do we display unavailable options to speed things up for the user.

The Design Stage

We wanted to reduce friction for users when making reservations, regardless if they are planning ahead or making last minute bookings. An important aspect for consideration is how do we display unavailable options to speed things up for the user.

Mobile app

Web App

#1 Completely hiding them

If it’s not selectable, then why show it at all? But by hiding it, this could mislead the user to think the selectable options are the ONLY ones available at all times. (e.g. if 6pm is hidden and not shown, diners might think the restaurant does not take customers at 6pm)

#2 Dimming and disabling unavailable options

Mobile app

Web App

#1 Completely hiding them

If it’s not selectable, then why show it at all? But by hiding it, this could mislead the user to think the selectable options are the ONLY ones available at all times. (e.g. if 6pm is hidden and not shown, diners might think the restaurant does not take customers at 6pm)

#2 Dimming and disabling unavailable options

Mobile app

Web App

#1 Completely hiding them

If it’s not selectable, then why show it at all? But by hiding it, this could mislead the user to think the selectable options are the ONLY ones available at all times. (e.g. if 6pm is hidden and not shown, diners might think the restaurant does not take customers at 6pm)

#2 Dimming and disabling unavailable options

#2 was the winner!

We went with #2 as we want to give diners the full picture, but still make it clear which options are selectable. I also explored a way to reduce the vertical spacing and scrolling required from the user, but after discussing with the client, they prefer having a larger touch point to avoid mis-clicks. When presenting my designs and arriving at a conclusion, I always ensure the client is aware of the pros and cons of the selected option.

#2 was the winner!

We went with #2 as we want to give diners the full picture, but still make it clear which options are selectable. I also explored a way to reduce the vertical spacing and scrolling required from the user, but after discussing with the client, they prefer having a larger touch point to avoid mis-clicks. When presenting my designs and arriving at a conclusion, I always ensure the client is aware of the pros and cons of the selected option.

#2 was the winner!

We went with #2 as we want to give diners the full picture, but still make it clear which options are selectable. I also explored a way to reduce the vertical spacing and scrolling required from the user, but after discussing with the client, they prefer having a larger touch point to avoid mis-clicks. When presenting my designs and arriving at a conclusion, I always ensure the client is aware of the pros and cons of the selected option.

Optimising for Mobile

Optimising for Mobile

This project did not adopt a “mobile-first” approach as the client expected more usage out of the web platform, however I kept mobile in mind to ensure a consistent user experience. Below are some design considerations made specifically for the mobile experience:

This project did not adopt a “mobile-first” approach as the client expected more usage out of the web platform, however I kept mobile in mind to ensure a consistent user experience. Below are some design considerations made specifically for the mobile experience:

This project did not adopt a “mobile-first” approach as the client expected more usage out of the web platform, however I kept mobile in mind to ensure a consistent user experience. Below are some design considerations made specifically for the mobile experience:

#1 Making it easy to start reserving

Due to the smaller screen size, users will need to scroll through the restaurant information before getting to reservation module. To address this, I added a sticky call-to-action button at the bottom of the page that acts as a shortcut and scrolls the page directly to the reservation form.

#2 Maximising the use of space

#1 Making it easy to start reserving

Due to the smaller screen size, users will need to scroll through the restaurant information before getting to reservation module. To address this, I added a sticky call-to-action button at the bottom of the page that acts as a shortcut and scrolls the page directly to the reservation form.

#2 Maximising the use of space

#1 Making it easy to start reserving

Due to the smaller screen size, users will need to scroll through the restaurant information before getting to reservation module. To address this, I added a sticky call-to-action button at the bottom of the page that acts as a shortcut and scrolls the page directly to the reservation form.

#2 Maximising the use of space

Conclusion

This project allowed me to work in the F&B field, helping to solve problem for a less-niche demographic. With me also having experiences with numerous dining reservation experiences as a diner myself, it made it easier to empathise for the target user. Despite this, I still wished I could have been more hands-on with the client and the diners, due to time constraints most of the research and insights were derived from secondary sources. In the future, I would love to be more in touch with the diners or conduct interviews with restaurant staffs about their observations and create a more holistic membership experience.

Conclusion

This project allowed me to work in the F&B field, helping to solve problem for a less-niche demographic. With me also having experiences with numerous dining reservation experiences as a diner myself, it made it easier to empathise for the target user. Despite this, I still wished I could have been more hands-on with the client and the diners, due to time constraints most of the research and insights were derived from secondary sources. In the future, I would love to be more in touch with the diners or conduct interviews with restaurant staffs about their observations and create a more holistic membership experience.

Conclusion

This project allowed me to work in the F&B field, helping to solve problem for a less-niche demographic. With me also having experiences with numerous dining reservation experiences as a diner myself, it made it easier to empathise for the target user. Despite this, I still wished I could have been more hands-on with the client and the diners, due to time constraints most of the research and insights were derived from secondary sources. In the future, I would love to be more in touch with the diners or conduct interviews with restaurant staffs about their observations and create a more holistic membership experience.