Booking System Design

01 / Context and research

Appointments were arranged around haircuts.

The salon takes appointments through WeChat, phone calls and conversations in the shop. The owner writes bookings in a notebook and refers to messages and her memory when arranging times. Customers usually need to contact her to find out when she is open and which appointments are available.

Different services take different lengths of time. A longer appointment can delay the customers booked after it, while a temporary closure creates another round of messages and rescheduling. The owner handles this work while also cutting and colouring hair.

We wanted customers to see opening dates and suitable appointment times for themselves. The owner needed a clear daily schedule, a quick way to add phone and in-person bookings, and a straightforward way to change her availability. These needs shaped the two interfaces.

02 / AI collaboration and iteration

Using AI to develop and refine the interfaces.

I organised the customer and owner tasks, selected interface references and used AI to generate layouts and code. I then reviewed the screens and interactions, checking whether choices were clear, selections survived a return to the previous page, and frequent actions were easy to find. Each review became a more specific instruction for the next version.

The first customer page combined services, dates, the day's schedule and available times in one long view. I separated it into service and date selection, time selection and confirmation. My bookings became a separate destination for viewing, cancelling and changing an appointment.

I also explored a multi-row calendar in the Chinese prototype so more dates could be seen together. On the owner side, opening hours, temporary closures and the booking window were reorganised under Today, Schedule, Open bookings and More. AI helped turn these decisions into working versions that I could inspect and revise.

03 / Interface design

Booking an appointment and managing the day.

The customer interface starts with services and their expected durations, followed by dates and times. It shows the earliest available appointment and distinguishes available, full and closed dates with text. Customers who have a particular time in mind can use Find a time.

Availability changes with the selected service: a longer treatment needs one continuous gap. After choosing a date, the customer sees valid start times and can expand the day's schedule. Suggested times remain optional. The confirmation step brings the service, date, start and end time together before submission.

04 / Website development

A return visit led us to a website.

We returned to the salon to help register the WeChat Mini Program and encountered regional and application restrictions. We also considered ongoing costs and the work of updating and testing separate interfaces. We decided to continue as a website, bringing customer booking and owner management into one web project and giving customers who do not use WeChat a link they can open.

During the visit, a booking brought two people who needed a service, pushing back the customer scheduled after them. Several phone bookings came in while the owner was working. She offered times while still trying to keep track of the day's arrangement.

These observations raised further design questions about recording the number of people and each person's service, entering phone bookings during a busy day, and adjusting the schedule when work runs over. I am taking these situations into the next iteration and planning hands-on tasks with the owner: find the next customer, add a phone booking and set a period of closure.

The website is in development. The next stage is to refine the text, controls and information order through the owner's use, and observe customers completing the booking process.