Everybody Needs A Little Time Away

Creating a Health Center that was so much more than a fancy spa was a life-long dream of this client

Summary

I was hired as a freelance UX\UI Designer at the start of this project. This client had a life-long dream of creating a true health center where high-end clientele could access the latest mental, physical and emotional health treatments from around the world in a setting that would hold their privacy sacrosanct. This would not be just a spa, but a true center of transformation!

CHALLENGE

The difficulty in this project was to design a website that would be recognized as a spa-like establishment yet get across the important difference that this place has a reputable education center and vets all treatments and practitioners for efficacy. So the overall look will be polished, high-end luxury while emanating an air of a reputable clinician.

solution

The solution the stakeholders at the Healing Center wanted was a web presence specifically designed to engage their potential clients, keep them scrolling the page, and ultimately booking services. That is the design I delivered.

Large monitor with healing center site

persona creation

The client was adamant that he team understand who it was they were intending to serve as the potential clients would find this understanding of them in all things extremely appealing.

Palette

Photos of colors were provided to me, which I turned into a usable web design palette.

logo design

The client had no logo but wanted something that would contain all the symbols of their project mission.

Wireframes

Quick wire framing of various layouts was helpful in determining an overall pattern to the site.

high-fi prototype

My speciality is high-fi prototyping in Figma. So being able to show the client clickable mockups with scrolling, navigation and even a before and after slider for a facial, really sold the final design.

Personas

Based on a detailed study of the client interview videos, three personas were created.  It was highly important that I understood who the stakeholders were looking at as their target audience.  They spent a lot of time in the initial interview detailing the clients they were hoping to serve. Using my study of the interview video and some additional research, I created these three personas.  When prototyping I kept these personas in mind.

Anita

Anita represents the wealthy clientele who travel the world in search of exciting new treatments to always look their best.

Hesitations & Pain Points

1. Not being the first to post on social media about a new wellness method

2. Clunky scheduling system

3. Not finding her favorite products

Anita, High-Profile Client, Age 35
Anita, High-Profile Client, Age 35

Needs

1. Anita needs treatments that help her fit into her dresses for the many high profile functions she must attend monthly

2. She needs to be able to schedule her appointments easily and around her many commitments

Motivations

1. She wants to be the first to post on social media about a new wellness trend

2. She wants to always look her best

3. Anita needs a place to relax from her busy schedule

4. She wants to experience something more magical than a regular luxury spa

Barbara

Barbara represents clients who have severe health problems and are searching for an alternative to Western medical treatments.

Hesitations & Pain Points

1. Not finding enough educational material on the website

2. Not being able to examine the successes of the various practitioners

3. Not being able to order recommended supplements easily

Barbara, Age 45, Client with Severe Health Problems
Barbara, Age 45, Client with Severe Health Problems

Needs

1. Barbara needs to feel that these practitioners are not quacks and can truly help her

2. She needs to be able to schedule her appointments easily and around her many other doctor visits

3. Barbara wants and needs to get better

Motivations

1. Barbara’s prognosis is not good. Her life is literally at stake.

2. She enjoys life and is not ready to give in

3. She researches many alternative treatments on her own and wants to be able to discuss these thoroughly with knowledgeable experts in a private and stress-free setting. 

Samuel

Samuel represents clients who have a keen interest in Anti-Aging Treatments.

Hesitations & Pain Points

1. Not finding enough educational material on the website

2. Not being able to examine the successes of the various practitioners

3. Not being able to order recommended supplements easily

 

Samuel, Age 53, Client Interested in Anti-Aging Treatments

Needs

1. Samuel needs to interface with practitioners who can answer his many questions with expertise

2. He needs to be able to schedule his  appointments easily and around the many demands of his start-up ventures

Motivations

1. Samuel’s co-workers are half his age and youth is looked upon highly in his field

2. He enjoys life, revels in the latest technology, and wants to live a quality life for as long as possible

3. He follows leading researchers on anti-aging and is enthralled with their work3

Wireframes

Quick wireframes were created in Miro to devise a  general sitemap

Hi-Fi Prototyping

Using Figma's Interactive Components, the sliding image was created for the prototype to show the stakeholders.

I had several meetings with the project manager to review my work.  We went back and forth on several ideas.  I turned designs over quickly in order to get immediate feedback to avoid going too far down a wrong path. This is one of the final prototypes for the Healing Center.  It contains hover interactions on the buttons and an animation for the Before and After slider for the facial treatment. This was one of the prototypes shown to the Stakeholders for feedback and became the ultimate design. 

Another version of the design was also presented, but it was found to be too much like a generic day spa. 

Logo Design

Several logo variations were tested with the clients.  A simple logo showing transformation with butterfly and caterpillar images was iterated upon. The idea to just go with a monogram was also explored. The final choice is shown in the video above.

These were all drawn up in Figma using the pen tool and by manipulating ellipsoids.

Palette

Analog photo of discontinued paint chips and digital color conversion
Analog photo of discontinued paint chips and digital color conversion

The palette was provided by the stakeholders at the Healing Center.  Color was extremely important to them as several of the stakeholders use color as a modality for healing. I was provided with only a photo of the colors wanted from some old paint chips.  I did my best to color match for web design. The client approved this palette which I used to provide both a light version design and a darker version design as shown above. 

Lesson Learned

  • One can hardly ever iterate designs for review too often. The adage, “Send designs early and often,” is paramount.
  • Figma can be used to create decent logos.
  • Recording client interviews is extremely helpful in being able to actively listen and not miss any detail.
  • Unfortunately the main stakeholder passed away before this project reached fruition. Remember to carpe diem every diem.