Image for post
Image for post

Everywoman’s Health Centre Website Redesign

Everywoman’s Health Centre is a non-profit women’s abortion clinic that also offers other women’s health services.

Timeline
Three weeks

Project Goal
To redesign the existing website to reflect the company’s newer, more modern values and appeal to the target demographic.

Business Goal
To gather interest and community support, and to have readily accessible information to create an inclusive, professional feeling for donors and clients using the website.

Meet the team

Context
______

Everywoman’s Health Centre has been providing excellent care to women for over 25 years. Abortion has been a tough and touchy topic to society but Everywoman’s Health wants to change this — they want abortion to be seen as something more normal, as 1 in 3 women in their lifetime will have an abortion. Their clinic wants to empower women to allow them to be able to have the freedom of choice, and to allow them to feel at ease with abortion and women’s health in general.

The board of Everywoman’s Health Centre has all agreed that since the website is a first or second touchpoint for their clients, it needs to reflect the clinic’s views and values that also appeal to their target demographic (Women aged 20–40). The current website has an older and out of date feeling to it, which can make the target user to believe the information is outdated or they might not have an open and inviting impression.

The Problem
The website is hard to navigate — the content is overwhelming and users are ignoring the text and calling the clinic right away.

Research
______

Overview

  • Surveys and Interviews
  • Affinity Diagram
  • Persona
  • Content Audit
  • Card Sort

Surveys and Interviews

Our team created surveys for our target users (Women aged 20–40) to complete in order for us to gain valuable insight on their frustrations and to construct a persona for Everywoman’s Health Centre. The target users were women aged 20–40 who have been to or considered going to a women’s health clinic. The goal of the surveys were to find out the below, and results of this were collated and put into an affinity map.

  • To find out our users main frustrations with health clinic’s websites;
  • What features or information they look for or would like to look for;
  • To find out how the users are donating as part of Everywoman’s Health Centre’s donation goal.
Image for post
Image for post
Image for post
Image for post
Examples of questions asked in Survey

Interviews
We conducted interviews with employees of EWHC (Everywoman’s Health Centre) and women between the age of 20–40, and we found useful information for our clinic. Our main findings were:

  • Clients want to be able to find a way to call quickly, as they might not be in a very good emotional state
  • Many people going to EWHC calls instead of looks on the website as there is too much to read, or they couldn’t find what they were looking for
  • You currently can not make appointments online, but you must call. This is due to the unique nature of every woman’s health condition and needs

Affinity Diagram
From the surveys and interviews, we mapped it out to find out more about our user, their frustrations and goals

Our main findings were:

  • Frustrations
    - Hard to contact clinic
    - Hard to find information
    - Too much information at once
  • What makes people donate
    - Related causes to support
    - Aligned values
  • What users like
    - Easy navigation
    - Easy to make appointment
    - Accessibility and safety
  • Persona
    - Majority of women are aged 20–29
    - Not religious
    - Makes around $30,000/year

From this, we created some user goals that will help give them the best possible experience on the website. They should be able to:

  • Easily call to make an appointment
  • Have easy access to general information
  • Find out detailed services
  • Quickly access clinic info

Persona
We created a user persona to redesign the website for. This way, we can fully understand the users need and design with the end user in mind.

Content Audit
We created a content audit in order for us to better understand the existing content that is on the website. With the large amount of information the clinic has, it was quite a challenge to organise and keep track of all the pages. We decided to do this to propose to the client what kind of content we can cut. However, since the website is frequently updated, there is not much to cut, but we instead used this as a tool to keep track of the changes we proposed for the website such as adding imagery, creating columns, charts etc.

The categories we chose to audit were page title, URL, topic, related topics, comments, and solution. We used topic and related topics to understand the way the website has been grouped, and the way that it could potentially be grouped differently if they are related. The comments are general comments we notice about the website, and the solution is proposed ideas for how to improve the navigation better.

Card Sort
We conducted a card sort study with our target demographic to better understand how users organise information that makes sense. Our main finding was that people group things that are related by topic, and then by chronological order if relevant. They created subcategories for topics that didn’t quite belong as it’s own as well. This is an example of one of the card sorts we did.

Planning
______

Overview

  • Storyboard
  • Sitemap
  • Key Features
  • User Flow

From the user persona, we drew out a storyboard to visualise and fully understand what might the user’s frustrations be, and how they would use the website and what might help them with their situation easier.

Karen’s main frustrations are:

  • Feeling uneasy and anxious, due to overwhelming amount of information
  • Not knowing which clinic she can trust
  • Not having an easy way to speak to someone at the clinic
  • Information on the website that is not organised and lack of imagery

Site Map

From the card sort, we analysed patterns and groups that users chose and created a sitemap to present to the client. The cards highlighted in red were major changes that we made. The red cards to the side are things that were removed but implemented to a different part of the website.

EWHC has a membership page on their website that falls under ‘support us,’ however, this membership is exclusive and people can only become one if they have been referred. They aren’t always looking for more members, so it has been highlighted in red to be removed from the website. We also incorporated the fees into individual services page to remove the need for extra pages. Also, from the research, we found that people liked to see reviews and wanted to feel that they can trust the clinic, so we decided to emphasise the client comments that are on the website. The wording seemed too business, so we wanted to change it later.

We decided on a drop down top navigation that is easy to access, as well as a footer so that the hours and privacy can stay there on the page at all times.

Key Features

From finding out the user’s frustrations and needs, we determined the key features that the website must have:

  • Easy navigation
  • A call feature
  • Donations page
  • Making appointments easily, and differentiating between online and calling for an appointment
  • Reorganised contents
  • Easy access to contact the clinic

User Flow

We mapped out a user flow to incorporate the key features and the user personas needs to find out how our website navigation would work. The blue boxes highlighted are where the key features are on the user flow. The flow of the whole website would be much larger, but we decided to narrow it down for the user’s immediate needs and what our research told us users are looking for on the website. While doing this user flow, we realised there are quite a few exit points so we tried to look for ways into keeping the user on the website. We want to minimise the exit points, but sometimes those exit points have to be there so that they can call the clinic.

Prototyping

We started off our prototyping journey by sketching out ideas on how we visualised the individual pages would look like. We drew out our main screens and tested with users to find out how to make the prototype best for them.

We created some tasks for users to do in order for us to find out if our prototype is successful:

Task 1 — Please read about the clinic and find out what services they offer

Task 2 — Please read about the different abortion methods offered

Task 3 — Please read about birth control and look at the IUD options

Task 4 — Please make an appointment

Task 5 — Please read testimonials

Task 6 — Please look for resources and then find a different abortion clinic

Task 7 — Please donate to the organisation

Main findings from testing:

Homepage — Initially, we had a button that was static with two different options (call vs. email). This made the user feel that there were too many CTA’s which is overwhelming for users. We decided to change this to a small floating call button, which still keeps it convenient for the users to get to and take up less space on the page.

Contact page— After discussing with our client, we decided to add parking info to make users trip less stressful. They said that they get many calls from their clients asking about parking and getting confused/lost.

Services page — We initially had a services page to show every service and had a sideways expandable list but it was too much information and was confusing to our users, so we got rid of this page.

We also changed the navigation after testing — we found that some things didn’t make sense so we decided to update our sitemap to be able to visualise the navigation better.

We removed from the sitemap the features that were taken out, and we also added ‘making an appointment’ to be under ‘services’, as users were trying to make an appointment from that drop down menu. We also updated the ‘about us’ drop down as there was a lot of information that we wanted to group better.

Mid-Fidelity Prototype

After testing our paper prototypes, we digitised it on Sketch to visualise the flow better and then tested it some more.

We created a ‘useful links and resources’ page to make it a glossary bank of resources for the user. We grouped them by topic and created a drop down menu so that it isn’t a long static list for the user. After testing, we found that we created the drop downs too large so we shrunk it down.

We also tried to differentiate the fact that you can not book things online and only by phone on the contact us page. We tested that the users still thought they would book online. On the original website there were instructions about this but it comes after all the important information so it gets ignored. We put this to the top and make it a call out with a CTA so that the users will read it.

For the top navigation bar, users tested this and said that the drop down menu wasn’t clear and that they were expecting a services page. We added a drop down arrow to indicate that it is a drop down menu. The users also wanted to make an appointment under services but could not find it there, so we put it there for easy access.

We wanted to change the wording from ‘client comments’ to ‘testimonials’ and ‘what people love about us’ in order to make the website more personable and less business/professional to really build trust and reliability.

We wanted to emphasise the compare medical and surgical abortion chart that we created, and users tested that they couldn’t find it easily. We decided to put a CTA button to bring more attention to it.

Final Screens

The UI team then went ahead and created beautiful branding and design to the prototype. Click here and here to view their research and ideation.

View our final prototype here and here

Future Considerations

  • Online bookings for appointments. Currently, EWHC is incorporating a third party booking system to better improve the experience of the user so they do not need to call in
  • Search Function — Since there is so much content on the website, it might be helpful to have a search function to quickly access something specific the user is looking for
  • Bread crumbs and links for the screens that can only be accessed to multiple clicks for easy navigation

Hi there! I am a Designer and Photographer based in Vancouver, BC. My skills are but not limited to social media, branding, marketing, typography and print.

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