Type

Role

Tools

DEFINE

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

RESEARCH

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

Inspiration

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. 

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.

Personas

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.

Stakeholder

view info

Client

view info

Motivations

Pain Points

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

Keep my 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?

Client

The Journey

DESIGN

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. 

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 & DELAYED MOTIONS

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.

OVERLAYS & TRANSITIONS

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.

PARALLAX SCROLLING

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.