HOME 9.png

A creative project with the challenge of creating a website geared towards the mental and physical wellness industries.


Product Design - Website


UX / UI Design

UX Writing

Creative & Art Direction





The Problem

Most Spa's and Clinics have websites that lack in character and feel.   They might be informative, but do not properly engage the customer with a proper branding experience.

The Objective

The objective was to create the website for a fictional Spa/Clinic that would be a doorway into the world of physical and mental wellbeing.  It would be inviting, soothing and on point with the experience of the brand.

"How might we help a Wellness clinic introduce new clientele to its brand and services?" 

Design an experience that is both emotional and informational.

Ensure information is easy and clear to understand.


Establish a mood and feel that will encourage client curiosity and awareness.


It is very important to understand the needs and wants of our stakeholders and target demographic.  This being a creative project had no real stakeholders or clientele.  Comparative and Competitive analysis was the main method of discovery.


Photo by Sacha Styles on Unsplash

Keeping the "how might we" questions in mind I looked for design inspiration that would help properly express what the client wanted.


When looking for inspiration I was looking for ideas that would assist me in creating a unique and different design that would differentiate the website from other similar business. 

https://www.behance.net/dbgoa3413629-10-24 at 3.18.32 PM.png


Clean simple and elegant I found inspiration in this image style for a Services Page hero banner.

Screen Shot 2019-12-17 at 12.51.10 PM.pn


The split Homepage Hero banner style would be a great way to showcase the two main services of the clinic.

The clean clutter free body and elegant focused paragraphs would aid in showcasing specific features and information to the clients.



I looked for Imagery that would create an emotional expression of how you feel when using the service vs a direct representation of the services offered.


Motion was a key design element to this design.  I wanted something that helped create a sense of calmness and elegance.


The design was created with two principle Proto-Personas in mind.  The Stakeholder and the Client.  I researched and gathered the following insights for both.


view info


Pain Points

What type of online experience do you want your clients to have?

Sense of peace and tranquility

Understand the services clearly

Do you have difficulty expressing your brands character digitally?

Find it difficult to properly convey my brands essence.

Market is flooded with basic looking websites.



Pain Points

Is there anything that motivates you to visit a Wellness Spa & Clinic?

Keep me body looking and feeling great

Train my mind to relax and be at peace

Is there anything holding you back from achieving your mind/body goals?

Find it difficult to find a spa that appeals to my sense of style.

Too many similar websites.  It's hard to know what's what.



view info

The Journey


The journey is based on the Client Persona and is focused on the information gathering portion of the journey.  When going through the journey it's important to constantly keep in mind the users motivations, pain points and actions.  Below are three main steps the clients will experience.

Review spa info & overview of services

Select and review service

contact / book appointment


One of the main design challenges was maintaining the brands mood and feel throughout the experience.  Use of imagery and motion was key to expressing the unique world of enlightenment one would be travelling through.

Mid-Fidelity Wireframes

After sketching my ideas on paper, I moved on to the digital wireframes.  Organization of content, UX Writing and future use of motion were all key elements of my design thinking.  Several iterations were made and refined before moving on to the Hi-Fidelity design stage. 

Home - Mid_Fi.png

Combine the two main services into the Hero banner as to immediately identify the main services to the user.

MIND Mid-Fi.png

Each main service contains sub-services that need to be easy to identify and understand.

Hi-Fidelity Wireframes & Prototyping

When creating the Hi-Fidelity Prototypes the use of motion plays a key role in the design.  Implementing motion has to be planned out from early on in the design process.  Specific forms of motion were used:  EASING - OVERLAYS - OFFSET & DELAY   

Both realtime and Non-realtime interactions were used to address three main design aspects: Continuity, Narrative and Relationship.


Easing and Offset & Delay motions were used to create a continuous emotional connection and information flow.  Timing was key to properly convey these qualities that are essential to maintaining a constant brand image and experience.


Motion is also used between interface objects that guide user understanding and decision making.  In this case the use of overlays and hover states to guide the user.


Horizontal parallax was used for scrolling of the images in the gallery.  Instead of a harsh transition between images the parallax scrolling created a level of connection between the images. 

Mood & Colours

A strong visual identity was key in establishing the branding and creating the right environment for the user.  Awake Spa defines itself as awareness, peace and motion.  The mood and branding needed to reflect this spirit. Inspiring Imagery, a simple colour palette and a clean minimalist design combined to create a complete user experience.


Photo by Joel Vodell on Unsplash

Photo of woman in infinity pool by Alex Bertha on UnsplashxHRmXiU-unsplash.jpg



Josefins Sans