Web
Case Study
2023

Timma

booking form
re-design

Overview
& Goal

Timma is a well-known booking service for searching, comparing and booking beauty and wellnesss services.
Timma’s booking form could be adapted to the request and integrated to any website, so lot’s of Finnish salons in beauty industry use it.
I noticed some UX and UI issues in there. So I decided to propose a new solution with which it could be improved.

Initial look

There are some screenshots of the initial form appearance without any changes

Good points & limitationsof the initial form

Good points
Limitations
Grouped booking stages
An automatic transition to the next stages
Possibility to go back to the previous stage
A lot of information that is not key and necessary on one screen
Design that suggests the possibility of skipping a step, but in fact does not give such an opportunity
The step with choosing a specialist is mandatory, not always useful and only time consuming
No way to see specialization, reviews and rating of a specialist so is not clear on what basis to make a decision
Incorrect inline validation for inputs
Unpleasant visual

Competitor
analysis

Pros
Less info on one screen
Automaticaly chosen specialist (but can be managed)
Easy return to the previous stage
Time choosing page is divided into morning, afternoon and evening sections
Pros
Clear sequence of steps that doesn't confuse
Total info about service available from the first screen
Number of steps indication
Cons
Some services are not combinable together and it confuses
If you choose time first, sometimes the desired service is not available at this time and it is not highlighted, but the user isn’t sure what is and issue
Cons
No possibility to remove the service from the list of chosen services  without returning to the first step
Long horizontal list of service categories that is not convinient to scroll

Inspiration

My point was to preserve some general style through all Timma products
but make this product more generic, with a modern vibrant feel

Problems
& solutions

First screen

I have identified main categories, and the procedures related to them have been
placed in separate branches — it simplifies choice on the first step.
Option to choose specific specialist placed separately

Choosing specialist

In the new design choosing specialist is optional. Design also allows to review specialists ratings and nearest time the specialist is available

Before

After

Procedure selecting

In order to to make selecting individual options faster, you proceed on this stage just right when you choose first option but can add other options further

Selecting main service

Here you choose the main service and proceed to the next step immediately as well

Before

After

Selecting additional service

In the redesigned version there’s a possibility to choose multiple additional services, check total info and edit services chosen

Before

After

Time picking

Сommon practice of calendars makes it more intuitive and simple to choose a date. Division into periods of day also speeds up the selection process

Contact info

In the new design I’ve changed placeholders to inputs for better usability and marking mandatory fields.
There is also a live form validation that doesn’t distract or annoys when filling out the form but makes it possible to understand what exactly is incorrect if the error occurs

Before

After

Confirmation

Сheckout with  all general information is also added to the redesign — it is shown on the same screen after the contact info, and it is possible to remove some services, add others or select a specific specialist.

Typography
& Colors

Playfair
Manrope
Main
Grayscale

Thank you for your time!