Problem
The Norwegian therapist office of Terapivakten was facing high high drop-out rates in the booking process of therapy sessions after publishing the new version of their website. Many clients abandoned the booking process before reserving a session, which turned out to be a crucial challenge for the business, as most of the sessions were being reserved via the mobile website.
Solution
I created a whole new website with a different approach to the reservation system, which I split up into different steps. The user is being guided through the process with care, asking them to input the necessary information step by step to evoke trust, improve usability and reduce cognitive overload. In the old website, the booking had to be done in a small window with drop-down menus and input fields, where all of the information had to be entered immediately.
01 Research & Exploration
Audit of the website
I started with a deep analysis of the website’s layout, branding and then turned all my attention to the booking flows, as they are the backbone of the business, they serve as the touchpoint between the (potential) client and the therapy office.
The first issue that became obvious was the visual layout of the current website. The colors and the typeface were not appealing and the size of the website’s elements was not coherent. The whole structure of the landing page and the CTAs had to be improved, the overall design had to be consistent while following design principles.
It is important to keep in mind that the typical user of this website is a person who is looking for a therapy session, so they might face cognitive challenges, stress or the feeling of being overwhelmed already. It is important to underline that this implies designing with accessibility as a primary goal, accessibility for users that might have temporary difficulties navigating the platform.
The booking flows turned out to be very complicated and hard to use for a number of reasons:
Cognitive overload
Many of the pages, such as the blog, was overloaded by all kinds of information, what made it very difficult to navigate the whole website.
The users had to choose from a number of options from drop-down menus (first selecting the location of the session, although most sessions were conducted online).
The selection of an item in the first drop-down menu would alter the next drop-down menu in unexpected ways.
The users had to scroll their way through many options in the drop-down menus, many of which were found to be similar and confusingly named. These were not ordered in a structured way.
The therapist had to be chosen immediately.
They had the input field with a data picker right below the dropdown-menus and next to the input fields to enter their name, surname, email address and phone number. This could feel intrusive and raise privacy concerns especially in new users.
Information architecture
The naming of many sessions was confusing and unclear, some of them were too similar while describing a very different kind of therapy and vice-versa.
The order of the sessions in the list did not seem intentional but rather randomly organized
The user had to make too many choices at once while thinking about the date and time and entering sensitive information.
The form fields were sometimes placed directly on the website, sometimes they would open in a modal after clicking a CTA. Having to input the necessary information to book a session while seeing the content of an entire blog post in the same page would overwhelm the user additionally.
Site analytics showed that most of the users aborted the booking flow when choosing the right session, so it was clear that the booking flows had to be re-designed completely.
02 Define
Problem Space
Based on the analysis, I defined the problem as: ‘Users struggle to make online reservations because of the complicated offer of the services, the cognitive overload and the lack of trust in the booking process.’ The primary goal was to optimize the user experience by guiding the user step by step through the booking process, while grouping and organizing the offers would help to provide clarity.
Demographic User Behaviour
Based on the data about the user behaviour of different demographic groups, there had to be the optimal way for every group to ensure a smooth reservation process.
Female user group
The majority of female users would initiate the booking process by choosing a therapist before choosing the type of therapy. It seems that this demographic group puts emphasis on personal connection rather than the systematic treatment based on diagnosis.
This means that the female user group is likely to enter the booking flow from the "Therapists"-page, so there should be a separate user flow from this starting point.
Male user group
The male users predominantly research about the therapy form first before choosing the therapist.
The probable starting point for the male user group is either the homepage or the "Services"-page, in which they can find detailed information about each service and therapy type.
Clients who book sessions regularly
This customer already knows what therapy they are looking for and already had experiences with a specific therapist.
Their starting point would mostly be the homepage, from where they can enter the booking flow directly without conducting further research.
Mobile-first
Most users open the website and complete booking on their phone, so the website had to be designed for mobile and then scaled up to the desktop version.
03 Build
Information Architecture
Unclear naming of the service offers
One of the difficulties of the booking flow was the overly complicated naming of the services. If the location was set to online, every type of therapy session would be labelled as online again. It would be labelled with the name of the target group (For who is it?) and the name of the therapy session (What is it?). The list was long and some of the sessions would repeat without making clear what the difference between each session was. The therapy sessions were not always grouped by related topics and the naming was inconsistent after changing the location.
Optimizing information architecture with ChatGPT 4o
First, I asked the client for a complete list of their services and then prompted ChatGPT 4o to analyze and organize it into the structure I provided.
Then I asked it to re-organize the services by focusing on the type of service as a primary attribute and adding the location and related challenges as secondary attributes. By doing this I was able to shorten the list by getting rid of some of the service offers and to group them by similarity. This would reduce the number of buttons in my booking flows and therefore leave the user with lesser options to reduce cognitive overload.
1
2
3
4
5
Booking flows
As we had figured out before, there were 3 principal ways to book therapy sessions:
Entering the booking flow from the homepage or the main navigation CTA
Choosing a therapist from the "Therapists"-page
Choosing a service (type of therapy) from the "Services"-page
Every entry point would change the booking flow in the way that every step would activate a filter that would pre-determine the options in the next steps. If the user choses the therapist first, they would only see the types of therapy the respective therapist offers. Vice-versa, if the user would choose the type of therapy first, they would only see the therapists who specialize in this field or service.
User Flows
Testing
No formal usability testing was conducted due to the scope of this project. Instead I created different tasks that the head of the company could test with his team and clients. In return, he informed me about the results and difficulties they were facing in the booking process. As this project involved constant communication with the head of the company, there were many small iterations that were implemented during the design process, such as CTA placement and naming, the styling of the headings, changing in the layout and naming of the services in the booking flows.
04 Final UI
Branding
Color palette
In this unusual case, I was asked to create a new color palette for the website in order to boost online reservations which had dropped significantly after the website’s re-design. I started to create a new color palette for the client but quickly noticed that this would not be sufficient, that it would be inevitable to create a completely new design and especially focus on the booking process.
The color palette I created should have a calming effect on the user and convey a professional yet modern feeling, while being soft and gentle. I offered two different options and, after discussing these with the client, we decided to get rid of the clinical feeling of Teal in favor of a darkish Purple with a soft Beige as secondary color, mainly as the background of containers. The tertiary color is a pastel Green tone which I used in a few occasions to highlight several components, such as the Google Reviews and the tag chips for the blog posts and the therapists’ specializations.
Typeface
I kept the style of the serif font for the headings and a sans-serif font for the body copy. To give my design a more elegant aesthetic that works well with the colors and the minimalistic layout, I went for Playfair Display for the headings and Manrope for the body copy. This creates a smooth contrast between headings and body while ensuring readability.
Illustrations
As the website already had many illustrations in it, I decided to keep these in my new design. As therapy and mental illness are serious topics, these illustrations gave the platform a playful and even childish touch, that is thought to take away a bit of the seriousness. Combined with the choice of colors, this should have a calming and relaxing effect on the potentially stressed user.
I made changes to the size and the placement of the illustrations, so that they would work well in the new platform.
Responsive UI
Mobile
Desktop
Booking flows
Mobile
Desktop
When choosing the therapist first, the user has the option to go back and choose another therapist:
Notes for the Developers
Key Learnings
Close communication with the client
Creating clear instructions for the project manager and the developers
The high impact of usability on the conversion rate
Usability is a shared effort between many elements and interactions and should be treated as such
The key to creating incredible user experiences is a systemic approach that looks at the whole as a sum of small problems that will create a wonderful product, when each of them gets solved
The amazing portential of Artificial intellence in processing multi-lingual data sets that can implemented as solutions in digital products
The importance of creating barrier-free, accessible products in edge cases, such as temporary mental health issues
Next Steps
The website has to be implemented and tested live to see the results of the improvements I made.
Website metrics will show difficulties and pain points of the new website, the designs will be adjusted accordingly.