Case Study: HR Mental Wellness Centre | By Michelle Falgate Butorac

Case Study: HR Mental Wellness CentreMichelle Falgate Butorac9 min read·Dec 2, 2019

--

Listen

Share

Project Brief: Modernising the existing website and making it responsive as well as designing an App.

Project Timeframe: 3 weeks.

My Role: UI Designer. Research → Plan →Design →Test

Press enter or click to view image in full size

Target Audience: Individuals in Vancouver and surrounds, suffering with Anxiety and Depression. HR Mental Wellness Centre is usually the last resort — once people have tried all other avenues.

Introduction: H.R. Mental Wellness Centre is part of the El-Rayes Foundation charity and assists individuals suffering with mental illness using a holistic approach that addresses body, mind and spirit.

The problem: The current HR Mental Wellness website is difficult to navigate and old fashioned. Users reported not being able to find key information resulting in little interest in the treatment plans.

The solution: Creating a new, refreshed, modern website that is easier to navigate, more appealing on the eye and would make it easier for individuals looking for help to find the information they are looking for and sign up for group or individual sessions.

The opportunity: It is estimated that 15% of the population suffer from mental illness at some stage of their lives. Dr Reyes, who started the charity and is also responsible for the treatment of these individuals believes that his method is one of the few true cures cure for people suffering with anxiety and depression. The HR Mental wellness website is a great source of valuable information where people can be empowered with knowledge as well as sign up for group or individual sessions with Dr El-Rayes.

Press enter or click to view image in full size

Gut Test

Press enter or click to view image in full size

The 20 Second “Gut” Test is a tool used to help clarify the aesthetic preferences in visual design.We compiled a collection of 20 screen captures and web pages which captured a range of themes, colors, approaches and styles.

Each slide was shown to the client for 20 seconds and he was asked to score each layout and give us insights into his feelings on color, typography, imagery and layout. From this process, we hoped to get a better understanding into how the client would like the website and App to be represented visually.

Results: Layouts that incorporate too many colors, bright colors or dark colors were rated low in his preference. He reacted negatively to illustration and would prefer we use real imagery, although the pictures must not suggest desperation or touching (such as the image holding hands). While he prefers uncluttered, minimalistic design he expressed that it is important that his site remain a source of information. Blue is his most preferred color for creating a feeling of calm.

Design Inception

The design inception process is used to help create a Visual Language starting with the Why and then the Mood. Before making any design decisions, it is important to understand what value the app has for the user and why it was created.

Team Inception Sheets

Each team member created our own design inception sheet as we interpreted our own ‘Why’, mood, colors and shape.

Press enter or click to view image in full size

We had many similarities, such as we all included blues and greens in our color pallet.

We included calm in the brand voice, simple and round in the shape and movement and empowering in the mood.

Our why statements are different though:

- Wellness

- Empowering people to find happiness through healing and support

• Learning to enjoy life to the fullest

Press enter or click to view image in full size

Explaining my inception sheet in more detail

The visual language I chose is calm, gentle, mature and knowledgeable. The mood is relaxed, kind hearted, sincere, peaceful and honest.

The Mood: The mood we want users to feel when interacting with the website is relaxed helpful, honest, kind hearted, thoughtful, sincere and peaceful.

The Why: Together we brainstormed various aspects of our why statement from why the program exists, why people would choose to use the HR Mental Wellness website and why a holistic approach differs from traditional treatment methods.

At this stage we each decided to move forward with our own inception sheet and mood board with the goal of having three different meaningful design directions to share with the client.

The concepts that I chose to move forward with included healing, nurturing and support, creating happiness together, the pursuit of happiness, lifelong wellness through holistic healing and improving lives and supporting a community — and ended with a why statement encompassing both providers and clients:

“Empowering people to find happiness through healing and support”

Moodboard

A moodboard is a visual tool that helps establish a vision or approach prior to designing the finished product and represents the look and feel the app will take.

Some benefits of a moodboard in the design process:

Inspiration: The moodboard also helps to bring things into focus, like attributes, vision, identity, and the emotions we’d to convey.

Affirmation. A mood board will affirm and support your brand identity. It will also helps to translate concepts into design

Guidance. A mood board that accurately reflects can act as a guide to keep you focused during the design process

Communication. A mood board ensures that your designer, company principals and stakeholders understands your brand and your vision right from the start.

Each member of the UI team designed a moodboard based on our own why statement, and each is representing a different theme although there is much overlap.

A — The theme is ‘hope & new beginnings”.

B- The theme is ‘hope and finding inner peace & calm’

C — The theme is ‘stoic, flow & reserved’

Logo

HR Mental Wellness Centre do have this logo, however we wanted to improve it. The H.R. is the initials of the doctors name.

Logo Creation

I researched many different logo styles and decided that a script font would be best to represent and provoke ideas of personal care, attention to detail, sophistication and formality.

I found much inspiration using the initials of the doctors name to look like it could be inspired by a signature.

Press enter or click to view image in full size

From there I decided to see if I could imitate a calligraphy signature with a similar look at feel — and after many attempts, I was satisfied with the result:

Press enter or click to view image in full size

I traced this hand-drawn initial signature logo in illustrator and this is the final result

Each team member created a logo and we shared the various options with the client.

Press enter or click to view image in full size

The logo was fine-tuned further until we reached a logo the client felt represented his name and brand sufficiently.

The Design Process

Style Tile

Press enter or click to view image in full size

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Each member of the UI team used inspiration from our inception sheet to create a style tile with a theme.

Number 1 — is My style tile followed the theme of ‘Hope, nurturing and inner calm’.

Colours

The colors I chose based on their deeper meaning and the combination together promotes a feeling of calm, rejuvenation and peace.

These are the meanings of the colors:

Sky Blue: freedom, self-expression, trustworthiness, wisdom, inspiring trust, communicate consciousness, stimulate productivity

Mint Green: Growth, harmony, kindness, dependability, restore energy, promote growth, nurture, rejuvenate

Aqua: This is the latin word for ‘water’. Calming, wisdom, serenity, wholeness, creativity, emotional balance, spiritual grounding, joy, tranquility, patience, intuition and loyalty

Pistacio Grey: intellect, knowledge, wisdom and elegance

Fonts:

To find the perfect font combination I researched common fonts used in medical websites, holistic centres and websites addressing mental health. I compiled a list of those that were found repeatedly and were visually appealing, legible and expressed traits included in my inception sheet: simple, clean, flat, smooth and round.

My list then narrowed to a short few, and I ensured that they were fonts available in google font library.

From there I searched for visual inspiration utilising the two fonts together, and chose to use Domine & Roboto as my most preferred font family.

Press enter or click to view image in full size

Domine: From the very first steps in the design process ‘Domine’ was designed, tested and optimized for the web. It shines at 14 and 16 px. And can even be used as small as 11, 12 or 13px. Harmless to the eyes when reading long texts.

Domine is a perfect choice for newspapers or magazines websites, where text is the main focus. It’s is friendly in appearance because it combines the classic elements of familiar typefaces that have been in use from more than 100 years like Clarendon, Century, Cheltenham and Clearface.

Roboto: Google itself describes the font as “modern, yet approachable,” and says it is somewhat emotional. It is a rounded, clean typeface with a straightforward, geometric design that offers clean lines.

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Selected Style Tile: Number 2

The left style tile is the style tile we decided to pursue, however it felt rather ‘dark’, and we needed to bring more happiness into the look and feel.

The middle one combined colors from other member style tiles into the color pallet, and the final one, which is the right hand side one, is the final that we chose. It incorporates bright and happy colors with a comfortable mix of neutral colors and highlighting colors

Press enter or click to view image in full size

Press enter or click to view image in full size

Wireframes of landing page

The UX teams research showed that users found the existing site difficult to use as the site is too text heavy, information is repeated and confusing and they found the site outdated.

This created an opportunity to redesign the website to make it more appealing, making information accessible and providing easy access to resources to help. It also provided an opportunity to better align the website with the business goals of attracting new users and keeping them on the site long enough to provide meaningful information, buy their book or donate.

Press enter or click to view image in full size

Once the UX team had completed their user flow, research and testing, we were given the wireframes:

Press enter or click to view image in full size

We explored imagery in different size proportions and different colors until we found the combination that worked best.

We kept the design rather simple and clean, ensuring that the copy was prioritised, clearly legible and concise with meaningful content.

Press enter or click to view image in full size

Once the design layout was approved by everyone in the team and the desktop wireframes were skinned, we then proceeded to roll out the design onto the mobile wireframes:

For a walkthrough of the desktop screens please visit this link:

Prototypes - InVision

Edit description

jakecebryk654825.invisionapp.com

Prototypes - InVision

Edit description

jakecebryk654825.invisionapp.com

We believe that the new website meets the goals of the business, the user and the project by providing easy to understand information in a logical format that makes it easy for users to find, comprehend and know where to go for help.

It also creates the ideal platform for the sale of the book and donation to the charity.

I thoroughly enjoyed working on this project and am grateful for the opportunity it provided.

Thank you for taking the time to read this case study!