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

Type

Product Design - Website

Role

UX / UI Design

UX Writing

Creative & Art Direction

Tools

DEFINE

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.

Photo by Gatis Marcinkevics on Unsplash

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

A.

Design an experience that is both emotional and informational.

Ensure information is easy and clear to understand.

B.

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

C.

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.

RESEARCH

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.

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.

STYLE

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

https://www.behance.net/dbgoa341362

EXPLORATION

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.

https://theynewyork.com/

EMOTION

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.

https://www.behance.net/natalistru5295

MOVEMENT

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

https://dribbble.com/Sochnik

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

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

DESIGN

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.

Photo by Finding Dan | Dan Grinwis on Unsplash

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.

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

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 & 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.

Photo by Joel Vodell on Unsplash

tim-bogdanov-4uojMEdcwI8-unsplash_edited

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

stefan-stefancik-U1bgZ7JKNFw-unsplash.jp

Bellefair

Josefins Sans