UI/UX case study: a step-by-step guide to the process of designing a Holistic Therapy website
Introduction
A few months ago, I started a holistic treatment with a friend, and when I opened the website to book an appointment, I realized how confuse and difficult it was to navigate on it. Besides, she has two different websites, each build in the two languages her clients speak: English and Portuguese. The user has a hard time to find about which treatments to choose and to book itself.
A brief story about Crystal 11x11
Crystal 11x11 is a holistic therapist who started her career in Brazil. She moved overseas, and some of her clients are located in different countries as well. She created a mainly remote work routine. Therefore the website became an essential tool to book appointments and for disclosure to new customers.
At first she only hired me to rebuild the logo, and I also offered her a completely new bilingual website for, focusing on the user experience website, as a sign of my appreciation for her services. And here we are.
Understanding the challenge
Most of the people looking for a Holistic treatment is having a hard time, filled with pressure, stress or pain (physical or mental). Approximately 80% of the interviewed people wait until their limits to finally seek for professional help. For these people, the last thing they want is a confuse and busy website or app to book a treatment. They don’t have time or pleasure to do significant research. For them, the problem is the amount of information disclosed in the home page of most holistic therapy websites what makes it difficult to find a short path to book what they need.
The Survey
To understand the real problem, I prepared a survey with Google Forms and shared with a mailing list collected by my client along the years. A total of 33 people answered the survey. The purpose was to learn why most of them prefer a call to book an appointment instead of booking it online. A percentage of 85% said that they always prefer booking online, when possible. Around 80% of the interviewed wait for the problem to became unbearable to seek for professional help. And 70% find the current site very confusing.
Storytelling
Once upon a time, there was a woman named Robin. She was a freelance illustrator and marketing coordinator in a big company.
Every day, she worked more than 12 hours, and cooked dinner and lunch for the next day for her and her husband.
One day she was trying to finish a job, but everything was going wrong. She was late for dinner, but she couldn’t skip it because she doesn’t have a place to buy lunch nearby her company for the next day.
Because of that, she was going to sleep very late and wake up earlier the next day. Her whole body hurts, especially her head.
Because of that, she was so tired that she sent to the printer 200 wrong banners. The director called her attention. The company lost money because they had to print the banners again. She was feeling miserable.
Until finally, she decided to take care of herself because in her knowledge it is crucial to keep feeling that you’re doing great in life. So she booked an appointment to have warm stones massage next weekend.
Personas
Most of the current customers are women (about 90%). There are two types of clients:
Group 1 — They look for different massages (Hot Stone, Swedish, Aromatherapy, deep tissue). They want pain relief, relaxation, release muscle tension and healing.
Group 2 — They are looking for healing and some alternative treatment.
Crystal healing, Reiki, Sound Therapy. They want to balance their energy and calm down their mind.
I have created two personas to better represent the target audience, meaning the users who would use the service.
User Journey
I designed a chart with a typical daily routine for my personas. This process helped me to decide how the website and apps user experience might be designed to fit into a holistic treatment routine.
Benchmarking
I decided to do market research with websites that offer similar services. Among those I had researched, it showed the fee, information, most of them displayed clients’ testimonials but it was challenging finding the address, as well the booking button. One curious similarity on the researched websites is about the colour palettes. Thereby, I realized that it is important to provide all the priority information to shorter the client path to the session.
Sketches
“Pencil before pixels” this was the first step to help me outline the website and visually imagine it.
As the previous analysis was made, is was time to create sketches for the future landing page. I made the first draft to organize the information, focusing on the briefing that was to conduct the user to learn more about the treatments, as well as building a shortcut to book an appointment.
Workflow
Sketch of the screens’ flow for the mobile version.
1 — User click on treatments.
2 — User chooses “energy clearing.”
3 — List of energy clearing treatments.
4 — Booking page.
I created a low fidelity prototype in the Marvel app. You can check the result here: https://marvelapp.com/1b5de0jg
Wire-frames
According to the sketches developed, it was time to build the wireframes as a foundation, the skeleton of the website. It helped me arrange the interface elements while I focused on the functionality rather than the layout. Moreover, the simplicity of wire-frames allows me to test ideas without diving into the details too quickly.
Styleguide
Colour Palette
I decided to follow the colours chosen for the logo. The palette is built from blue to purple. These colours symbolize the universe, astrology, sky, healing, rest and relaxation.
Typography
Roboto is a free Google font designed by Christian Robertson.
Roboto has a dual nature. It has a mechanical skeleton, and the forms are mostly geometric. At the same time, the font features are friendly and with open curves. Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes a more natural reading rhythm, more commonly found in humanist and serifed types.
Final Design
The purpose of the integration flow in Crystal 11x11 is to conduct the user to book an appointment more easily, one click away. As the possibility to research the price and treatments offered is straight to the point.
Prototype high definition
Final Thoughts
As an experienced print designer, I guessed it wouldn’t be the most challenging thing in my career to shift to a UI/UX designer. That was my thoughts before doing 3 UI/UX design and Design thinking programs in Udemy Academy.
Suddenly I was facing a challenging and exciting new experience.
Learning how to build the path before creating the layout, telling a story, understanding the user needs and pains, interviewing, testing, loving the problem instead of the result, are the most fantastic way to build a concise and fit project.
Putting together my creative skills with an investigative way to conduct work, made me more interested and willing to learn and practice the digital design.
Special thanks to Leandro Rezende, Lucas Lage and everyone who supported and helped me while working on this project.
Software used to develop this work: Sketch, Photoshop, Illustrator and Principle.