Ironhack’s Challenge2 : The ease of making an appointment

Making an appointment for a manucure, a haircut or a waxing has always been quite an adventure. Calling the institute, trying to find a slot available, not exactly knowing what service is offered (…) are often a source of trouble. But that was until mobile apps like Le Ciseau or Treatwell appeared. I have always wondered « How did they manage to make it so simple ? »: that’s what I would like to analyze with you today. Let’s go !

Less than 10 screens, less than 10 minutes

First 4 screens of Treatwell’s user flow of making an appointment

For my 2nd assignment for Ironhack’s prework, I wanted to analyze and « reverse engineer » the famous mobile app Treatwell. I chose this app because — as a user of this app myself, — making an appointment seems easy and quick, but also pleasant and stress-free.

I was curious about how they manage to make this user flow seem so flawless.

To analyze this task I first started by drawing a lo-fi user flow to see how many steps are needed to complete the task and there is a total of 7 steps from the homepage to the confirmation page:

1. You select a category and a service associated (for example: the « Haircut » category offers services like « Men’s haircut », « Woman’s haircut », « Hair coloring »…);
2. Then, you automatically have a list of institutes recommended for your choice;
3. According to your criteria (reviews, distance or price) you can choose an institute;
4. On the institute’s page, you have access to all of their services with details, prices and promotions available. You can here, add a service and go check the slots available;
5. Thanks to a calendar with the days and slots available, you have a clear view. It allows you to select your preferred slot and make your appointment;
6. Penultimate step: you check your personal details (which are already filled from your profil) to validate the booking;
7. Final step: you pay online (several payment methods are offered) and when it’s done, you have a confirmation page with the summary of your booking (date, time, institute…).

In less than 10 minutes, I managed to make a reservation stress-free. I had all the right information about the institutes that helped me choose one (reviews, prices, services…). Without calling, I had a clear view about the slots and dates available. I was able to check my calendar at the same time without the pressure of answering quickly because someone was waiting on the phone. I paid easily with my phone and had a confirmation about my booking in the app and through an email.

A small number of screens to complete a task doesn’t necessarily mean it’s quicker or better for the user. In Treatwell for example, I had 7 screens to browse which can seem to be a lot but some screens were so effortless that it wasn’t a flaw. Indeed, you can sometimes see user flows with less than 5 screens but it results in having long steps to fill in. At least in Treatwell, each step has a purpose: it’s simple and you don’t get lost in long scrolling pages with 3 or 4 kind of information.

Let’s see now how the components used in the app, helped create smoother steps.

Consistent and predictable UI elements in the app

Treatwell was very successfull in using consistent and predictable UI components in the app which helped create obvious steps. Indeed, the number of services proposed can be huge (specially with a specific criteria like your hair lenght for example) and Treatwell managed to do a great job at organizing the information at each step.

• The search for an institute or a service is made evident with a search field;
• Selecting preferences is intuitive with checkboxes and radio buttons;
• The amount of information to be seen is not overwhelming thanks to the dropdowns;
• The personal details are already filled in traditional text fields;
• The information is accessible thanks to a slider, you don’t have to browse a whole calendar;
• Since the information is essential, icons are used sparingly;
• Selecting a service is made plainless with the « + » button that transforms into a « check » button, it is as easy as adding an item to your shopping list.

To better the user flow, we could add information about the progress made in completing the course with a wizard or a progress bar for example.

Try for yourself !

Treatwell’s wireframes

Resulting from my analysis, here are my wireframes and a link to my prototype recreating this user flow with a minimum of information. I tried to keep it simple, only writing the relevant information to the flow I’m following (Woman cut > Shampoo and blow dry…) My goal was to keep it clear and consistent in the prototype.

I hope you appreciated this article and please don’t hesitate to comment ! What do you think about my analysis ? About my prototype ? Any feedback can bring me a lot to improve my skills :)

Thank you for reading it and see you next week for my 3rd challenge !