Helthe Connect — bringing holistic practitioners and clients together.
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.
Instead, we would focus on a clean and uncluttered look, more appealing to the broad audience.
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.
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.
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.
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.
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.
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.
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!
