UX UI designer

Dr. Kathleen Mahannah

Dr.Kathleen Mahannah

Naturopathic Physician

Project: Responsive Website Design

Role: UX Designer

Tools: Pen & paper - Sketching Paper Prototype
          Sketch - Wireframes & High-Fidelity Screens
          Invision - Prototype                                         

Read: 3 minutes

Visit the Live Desktop Version here : www.drkathleenmahannah.com

Click here to read full detailed case study on Medium


Allowing voices to be heard, through a one-on-one natural healthcare journey
that aims to get at the root of the problem through integrated medical practices

Approachable. Empowered. Qualified

These are the traits of Dr. Kathleen Mahannah who is a naturopathic physician at Restoration Health Clinic. She focuses on integrated medicine which is a balance between scientific and natural medicine. She provides a holistic approach to treatments i-e. she not only treats people physically but also mentally and emotionally.

PRoblem: 

  • Being new in this field and having difficulty reaching her target audience

Solution:

  • To share her approach and knowledge regarding naturopathy

  • To gain more bookings and email subscribers

  • To reflect her personality through her website


Research methods

The research for the project took place during the first week and the data from the research was then compiled.

The research methods we used were user interviews, surveys, domain research and C/C analysis. We did a total of 12 user interviews and collected 15 surveys which helped with our quantitative data. The interviews and surveys really helped us understand the frustrations and motivations of the users.

 

Domain Research:

We did some domain research to have a better idea of where the website conversion was dropping. Through this we discovered some issues with the current website:

  • Lack of Dr. Kathleen’s services

  • Lack of information about naturopathy

  • The blog on the website was not properly set up

  • There was no fixed header

  • The external booking website, Medeo, was extremely confusing

Journey Map:

 

We asked the people we interviewed to go through Dr. Kathleen’s current website. As they went through the site, we mapped their journey of emotions.

One thing that confused the user was the jumping between her site and an external booking site, Medeo. This was a major frustration because on the Medeo website they would have to once again search for Dr. Kathleen from a large list of doctors. Due to this, Dr. Kathleen would lose a potential patient, as now the patient had the ability to pick a different doctor.


Planning

Once the research was compiled it was followed by the planning phase which included user persona, journey map, storyboard and user scenarios.

Affinity Diagram:

With all the data gathered we created an affinity diagram which is an amalgamation of all the data points we gathered from the interviews and surveys. With this, we were able to identify the pain points, frustrations, values and the concerns the users have. This allowed us to come up with possible solutions for our potential users.

From this method we pulled out some key categories:

  • Different ways of booking an appointment

  • Frustrations when navigating medical websites

  • Pros and cons of a General Physician

  • Pros and cons of a Naturopathic Doctor

We saw that the key points from our affinity diagram were consistent with our findings from surveys and interviews.

User Persona:

From the affinity diagram we created a user persona. Our user persona is the person who has never been to a naturopathic doctor.

Sarah I  28 years I  Single

Goals:

  • To be concerned about her well-being

  • To have trustworthy relationships

  • To have a healthy lifestyle

Frustrations:

  • Coming across mean people

  • Not getting the attention she needs

  • Waiting for something for weeks

  • Frustrated with getting the wrong information

  • Being rushed out of the door


DESIGN AND TESTING 

After the planning phase, ideation and sketching started immediately. We started by creating a paper prototype to test the idea, and then digitized it on Sketch to create medium fidelity screens. After further testing from the medium fidelity screens, we finally created high fidelity screens for our responsive website.

Paper Prototype:

We created the paper prototype for desktop and mobile side-by-side to have a certain consistency in both the platforms.

Testing:

From the initial paper prototype testings, people weren’t able to navigate and find certain pages. We tackled this by incorporating card sorting, a method used to help design or evaluate the information architecture of a site, to help feature prioritize and see what the normal user would be accustomed to.

This image shows how we integrated 3 separate pages into a single, clean, and easy to use page for booking an appointment with Dr. Kathleen

Mid-Fidelity Screens:

After making the iterations, we created the mid-fidelity screens and did some user testing. These tests showed that the website was smooth and easy to navigate.

Final high-fidelity screens:

We created high-fidelity screens for the responsive website of Dr. Kathleen. Using the screens, we created an InVision prototype which helped us navigate through the website using our scenario.

Landing page

About me

Discover Naturopathy

Blog

Services

Contact us

Read full detailed case study on Medium