Alberto Jannarone
UX / UI Designer, Photographer, Director
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.
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.
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.
MOVEMENT
Motion was a key design element to this design. I wanted something that helped create a sense of calmness and elegance.
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
Motivations
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.
Stakeholder
Motivations
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.
Client
Client
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
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
Bellefair
Aa
Josefins Sans
Aa