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