Helthe Connect — bringing holistic practitioners and clients together.

Halina Garycka
Jun 11, 2019 · 10 min read

A UI Case Study.

Introduction

I’m going to walk you through my UI journey to create branding and a responsive website for a local community partner aiming to fill the gap in the market and facilitate easier access to holistic practitioners.

We worked with our incredibly visionary client, Tu — Helthe Connect’s CEO and founder to elevate Helthe Connect (originally known as Helthe Crew, I will elaborate on the name change later on) from a brilliant idea into a real product.

Meet the team

As a team, our task was to create branding for the idea known as Helthe Crew and create a responsive website that would also serve as an app to connect holistic health practitioners with clients.

Before I dive into the research section, I wanted to elaborate that we worked collaboratively as a team consisting of both UX and UI students and would like to introduce our team below!

Our team consisted of 5 members, two of whom are UX students and three UI. Paola and Tom were part of the UX team, and Jen, Lia and myself made up the UI part of the team. Although the roles and directions were defined by our team assignments we worked very closely together on all aspects of the project.

Research

Following our initial client kickoff meeting, we combined the information from the meeting as well as online research to create a list of key points to keep in mind throughout the project. We knew that our Client wanted us to focus on aiming at the corporate market and make sure that the website highlights the evidence-based approaches to holistic health while at all times making it easy for the practitioners to promote themselves and for the clients to easily find them.

In the first phase of the research we focused on a comparative analysis into websites offering holistic health services noticing immediately that most of them follow this particular design trend that might be described as a new age look we knew that this style was something that our Client wanted to avoid, so we broadened our search into websites offering similar services but that were not focusing solely on the holistic health. We found some good examples in sites such as Jane.com and Sprout.ca that are designed in a professional yet approachable style.

Through our research, we had compiled a library of screenshots that were presented to our client in the form of a Gut Test. The Gut Test is a technique to specify the aesthetic preference of the client, based on their initial reactions.

The Gut Test involved twenty screenshots representing different styles and approaches were presented to gauge the gut reaction to each example. It confirmed our original thoughts that the dark coloured, or “busy” designs would not represent the values of Helthe Crew correctly.

Lowest scoring screenshots

Instead, we would focus on a clean and uncluttered look, more appealing to the broad audience.

Highest scoring screenshots

Target Audience

Creating a product is much easier once we know who we are creating it for. Adapting an appropriate language, visual tools and deciding on the content suitable for the audience is extremely important.

As a team, we determined the user persona. Persona is an example of an individual who will be using our website, therefore an inspiration behind all of the team’s design decisions. In this case, we knew that our website would be catering to both practitioners and to clients — which is why we created two user personas, one to represent each.

Suzanne and Ellen are both successful professionals. Through their own personal health struggles, each has found a way to discover and appreciate holistic medicine practices. For Suzanne, this discovery meant not only improving her health but also finding a new career path as an Energy Worker.

Both personas have the same primary goal: to comfortably find and connect with each other as client and practitioner. Ellen, our client’s persona, would like to easily find practitioners she can trust with her health. Suzanne, our practitioner’s persona, wants to increase her visibility in the industry in order to connect with potential clients and other practitioners. Moreover, Suzanne wants the public to be more educated about holistic medicine.

It’s all in the name

As stated before, at the beginning of this journey the company was named Helthe Crew. Our Client, Tu, was confident that the name represented the values and ideas of the project but our team was a little skeptical about users having the same initial reaction.

Fortunately, introductory discussions provided a better outcome. When we pointed out that the spelling may get autocorrected, or new uses may not pronounce it properly, Tu was steadfast in keeping that spelling. After listening to our Client’s reasons, we learned that the usage of helthe (pronounced “health” and spelled the Old English way) is about going back to the traditional ways of addressing health. This spelling is bringing old and new together and thus making it accessible for all — and learning that gave us a new understanding and appreciation of Helthe.

However, the major issue was the other part of the name, “Crew”. In our opinion it didn’t represent the purpose of the product fully, it took away from the meaning and could distance clients from the product. We saw the product being about connecting people, and believed stating it first and foremost would help bring people in to do just that.

When that reasoning was presented to her, our Client agreed and was happy to change the name to Helthe Connect. Through our discussions, and working through these issues right at the beginning, we achieved balance not only in the name but also in our relationship with the Client.

The Why of it all

With the fundamental research done and an agreement reached on the Company’s name, it was finally time to put the pen on paper and summarize all our findings into what’s called the design inception.

The Design Inception starts with establishing the “Why” — the core purpose of the project, from which the mood and the visual language of the design originate, for us the “Why” meant:

To build an empowering connection between holistic practitioners and clients through a community platform.

The Mood and the Style

Having the “Why” helped us to determine the overall mood of our design bearing in mind our research findings and Gut Test results we came up with keywords that would best describe the feelings we wanted to evoke through our design.

Keywords describing the mood of the design

We based two different mood boards on the above diagram. While both of them were representing all of the keywords the first mood board was leaning toward a more approachable, friendlier visual language, focusing more on mindfulness, togetherness, and growth. The second mood board was more sophisticated conveying the sense of supportiveness, balance, and calm.

After showing them both to our Client we yet again were reminded that balance is the key to achieving success. The Client liked certain elements from each of the mood boards but some of the photos didn’t resonate with her at all. That is why we decided to combine elements from both directions for a fresh, caring, mindful and natural mood board.

The ideas conveyed in this mood were subsequently translated into a Style Tile to describe the Visual Language more precisely.

Visual Language:

Shape — softened

Space — open

Movement — smooth, linear

Colours:

green — empowering, natural and represents the heart chakra

pink — is friendly, caring and supportive

hints of gold — for its warmth, optimism, and elegance

Typeface:

Hiragino Mincho Pro — a serif typeface to bring in the sense of sophistication and elegance in the headlines

Open Sans — to add a humanist and friendly touch to the body text while making sure maximum readability

Buttons :

slightly rounded corners to keep the professional feel, but delicate & smooth; not too square

The Logo

We started the logo design with sketches to visualize different directions we might take. We explored using the heart chakra symbol as a logo, introduced nature elements in a form of leaves or flowers, tried the typography based options, and many more. We showed them all to our Client to see which one would resonate the most, the image of two petals was a clear favourite.

Favourited sketch and first digitization attempt

With a favourite in mind we started digitizing the logos and explored different placement of the petals and typography, we chose Oxygen typeface for its humble, legible yet slightly decorative properties. We wanted the idea of interconnection and community to speak through our logo so we decided to link both petals together to illustrate the connection between people. After consulting with our client we noticed that the community would be better represented if instead of just two petals the symbol had three of them— symbolizing a group of people rather than a couple.

Just a few of many iterations of the logo

The final logo is unpretentious and humble yet sophisticated, the lower case typeface symbolizes equality and makes the symbol shine, the symbol itself is made of three interconnected petals signifying community, it is the center of attention, placing it in the middle means that the community is supported on both sides by the Helthe Connect company.

Helthe Connect logo

Hi-Fidelity Screens/Final Prototype

For the final Hi-Fi screens, our team created an InVision prototype walkthrough which I will link into below.

The image on the left is a screenshot of the homepage we created for Helthe Connect.

We have chosen to use the lower case text for our headers to reinforce the unpretentious and humble style of Helthe Connect’s design.

The hero image is simple as well, a hand holding a bunch of healing herbs, in a gesture of offering drawing the viewer’s eye towards both the CTA and the lower section of the screen.

Uncomplicated illustration and framing of the important text make it easy for the user to focus on the relevant information.

The page is open and airy with a lot of white space making the viewing experience pleasurable and undisturbed.

Through balancing out the muted sage green with deeper shades in the CTA buttons; juxtaposing the sharper shapes of the logo and blockiness of text boxes with gentleness and sophistication of the typeface we made sure that the page is appealing to both male and female audience.

Some of the additional pages of the Hi-fi prototype

Same design principles were applied to the responsive web — mobile format, below is a selection of just a few out of 37 mobile wireframes we designed.

If you are interested to see more the InVision prototypes are available below.

Desktop: click here

Mobile: click here

Conclusion:

We worked tirelessly over three weeks to deliver this working and scaleable prototype that will hopefully serve as a phase one for this truly ambitious project.

This experience was very valuable to myself and I enjoyed working with a fantastic team to create a product for a Community Client. Our team actively learned together and from each other. We were able to effectively adapt to the changes and overcome roadblocks collaboratively. I am extremely thankful for my team members.

The biggest reward for me personally was knowing that we made our Client happy, knowing that we exceeded her expectations for what can be achieved is such a small amount of time.

Another highlight of this project was when we tested the hi-fidelity prototype receiving overwhelmingly positive feedback. Some of the keywords used by the test audience can be seen in this word cloud.

Feedback from the Hi-fi testing

This was everything that we aimed to achieve from the beginning. We did it, we did succeed, we indeed designed a legitimate, friendly and professional community platform.

Thank you for reading!

Team Helthe Connect

The Startup

Get smarter at building your thing. Join The Startup’s +793K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Halina Garycka

Written by

halinagarycka.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Halina Garycka

Written by

halinagarycka.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store