Mountain Health Case Study

Responsive Website for Naturopathic Practice to help people achieve balance

5 min readJan 5, 2017

Background

The client was a recent graduate of naturopathic medicine. She was in the process of buying a medical practice to start her business. However, she had no online presence. The client needs a responsive website for her practice so that she can make it easier for her patients to find information about naturopathic medicine and services she will provide. In addition, she wanted to use the website as a medium for news, community events, and articles, and gain new leads.

I was the UI Designer on the project and it is completed over a 3 week period.

Research

Before client kickoff meeting, I researched about naturopathy, something completely new to me. It was interesting to learn that naturopathy believed in finding the root cause rather than merely treating the symptoms with drugs. Although a main UI designer for the project, I collaborated with the UXers on my team right away so we can gain insights early on.

Survey & User Interviews

To get some quantitative data, we surveyed the users on demographics and their motivation for using alternative medicine.

We interviewed 6 people who have received naturopathy treatments about why they choose naturopathy and their experiences.

Affinity Diagram

We used affinity diagrams to organize data collected from survey and user interviews. This was a very helpful process for UI when we defined the “why” and the mood.

Design Inception & Inspiration

Based on our research findings, the core idea was to help people achieve balance. Some keywords from our affinity diagramming were connected, nature, harmony, personal, positive, healthy, and active.

Since nature was a big theme related to naturopathy, it is no wonder that many naturopathy clinics’ websites used the same shade of green as the main colour.

I searched on pinterest and dribbble for inspiration and came up with 2 art direction. The former one was earthy toned with muted coloured that focused on balance. The latter was taking another angle at nature, forest, and ocean and it was a more vibrate approach.

After we presented to the client, she chose art direction 2, which was also the one I liked more because the colours looked more positive and the photos showed people connected to the nature.

Design Rational

Grids

This being a responsive website means that we needed to determine which screen size we should use and how to setup the grids.

Based on research, 1366px is the most used width for desktop screens. And 320px is the smallest possible mobile screen. Since we wanted the maximum number of users possible to access the website, these were the setup we used for desktop and mobile respectively.

For desktop screens, we used 1764px as the width. The way it worked was that all the text will be within the grids but those with larger screens will see more width of images and background.

Colour, Texture, and Typography

Imagine you were walking into a forest, standing next to the ocean, or in the woods. These were our colour choices. To make it feel more organic, I gave some noise to the mountain background.

We chose Oswald as the title typeface and in all caps because the shape of it looks strong and we want to make the user feel empowered. Open sans was used for body text. This typeface is rounded but not too much which would have made it too playful. It is a sans serif that looks professional for a business and legible.

Styling

All iconography is custom crafted for this project. I used thin strokes for bigger icons and solid filled in for smaller icons so they are more visible.

We used green and blue gradient for call to action buttons and lines. There are green plants on the background to further convey the feeling of being in nature.

Logo Design

My logo designing process started with sketching on paper. We brainstormed with many ideas, such as mountains, water drops, organic shapes etc.

Logo ideation was a difficult process because the client is just starting her business and she doesn’t know exactly what she is looking for in a logo yet. I was not 100% satisfied with any of the logos. Nevertheless, we picked 3 that we thought would be cohesive with the website.

I digitized these logos on Adobe Illustrator. She chose the one on the bottom left below.

Challenges

This project was a lot harder than previous projects. It was a 3 week project. Although my UX teammates were working hard, we did not receive any wireframes or anything we can work on throughout most of the second week. It was both frustrating and learning experience for me.

We didn’t set clear deadlines for this project because I assumed everyone learned from last project. I assumed paper wireframes would be available as soon as possible, beginning of the second week. However, we did not receive any wireframes till end of the second week. Additionally, the first version we received was already mid-fi.

This significantly shorten the time available for UI to be implemented. Iconography could not have been done beforehand because the process is not transparent.

One of the things that was the key for my last project was because my previous team collaborated. As much as I was pushing for collaboration this time around, it fell apart.