Everywoman’s Health Centre
Responsive website re-design for a women’s reproductive health clinic.

Everywoman’s Health Centre’s website provides information regarding services they provide and resources for women’s reproductive health.
Timeline: 3 weeks.
Demographic: Women ages 19–40 in B.C.
Project Scope: UI for desktop and mobile.

Everywoman’s Health Centre is one of 4 abortion centres in the lower mainland. EWHC has been helping women since 1988 and provides a number of services to do with women’s reproductive health. These services include abortion, IUD insertion, miscarriage management, and birth control resources and prescriptions.
Learn more about Everywoman’s Health Centre here.



The problem with the existing design

From testing with women within EWHC’s demographic we found that most women didn’t think the design looked medical or health related.
The website has a lot of text and little imagery. There’s no iconography or graphical elements that could help the user digest the information from the site.
We talked to staff and found that they think the website looks dated. The content on the website is updated regularly but because the website’s visuals have not been updated, the staff is afraid that clients might not perceive the content as up to date.
Brainstorming and the “Why”
During our first client meeting with Brenda, Ashleigh, and Marg, we did a brainstorm where they wrote down words that they associate with EWHC. Some keywords that came up were choice, trust, safety, and feminism.

We talked about how they want to create a space where abortion is de-stigmatized where women can safely make a choice and live their lives the way they want.
Based on this we came up with our why:

Gut Test
We did a 20 second gut test with staff at Everywoman’s Health Centre. We showed them 20 screenshots of either mobile or desktop screens and got them to rate the screens on a scale of 1–5 (1 being “I hate it” 5 being “I love it”). We used the gut test to gage what the centre’s staff gravitates toward in terms of aesthetic and why.
Results:

Most of the staff gave the above design either a 4 or a 5/5. They liked the colour scheme (greens and at blues). They liked that this website looked clinicaland at the same time friendly and vibrant. They also liked the 3 boxes with the main services, so people can glance it over.

The staff liked design number 2 for the realistic and friendly imagery and the iconography. They also liked the professional/medical feel combined with more warm, vibrant colours.

The staff disliked this one because of the red in the colour palette. Because some of the clients might be anxious about getting medical procedures done the staff doesn’t want the client to be looking at a colour associated with blood.

The staff disliked this design because it was too minimal and simple. It also lacked the medical/clinical look.
In conclusion to the research we came up with the following must haves for the website re-design:
- A more obvious medical/clinical feel so
- A warm colour palette
- Icons — so the user’s attention could quickly be drawn to the main services without having to read too much of the content.
And some don’t do’s:
- Red in the colour palette
- Minimalsim

1. Bright & Friendly


This design direction is approachable, vibrant and friendly. It was inspired by the mural painted on the wall outside of EWHC’s original location. It is warm and bright with a feminine touch.
2. Feminine and Soft


Minimal simplicity inspired this art direction (as represented by the image of the living room). It is clean and simple yet feminine and comfortable. The pastel colours are non-threatening and soothing and the digital representation of the mural on the wall of the original clinic’s location to reference the clinic’s history.
Both art directions have colour palettes that include blues and greens for the medical feel combined with a warm colour for a feminine and friendly touch.
There are illustrations in both as a result of a discussion we had with staff about the problem with using images of women. They said the images have to be representative of all women, and all women coming to the site have to be able to identify with them. The staff and board members of EWHC suggested we try using illustrations of women rather than images so we created 2 styles of illustration to match each art direction.
After proposing these 2 directions to EWHC, we all decided that neither look was representative enough of the clinic and they did not like how the illustrations gave the website less of a clinical feel. They also felt they should go with a more modern looking website and wanted to test out having large images in the hero banner.
3. Bright & Clean
The third art direction is bright and clean and uses photographs rather than illustration.

Imagery
To make the imagery more relate-able we avoided using faces combined people with nature for a calming scenario that users could put themselves in.

The first image we chose for the hero banner was problematic because it does not represent a diversity of women.

We chose this image instead because it is a silhouette profile and is more representative, rather than having distinguishable characteristic.
Typography

We used Catamaran Bold for our header font and Arsenal Regular for our body font. Catamaran is clean, bold and feminine while arsenal is a more delicate, yet still legible font that is easy on the eye while reading large amounts of text.
Colours

The colour palette is predominantly green and blue with some orange and yellow accents for warmth. We wanted the design to be medical but not cold or hospital-like, as the atmosphere at EWHC is very community-like. We chose a charcoal rather than black for body type so there is less contrast between the white background and text, making it easier to read.
Icons


Creating icons that represent such sensitive topics was challenging. We found IUD insertion and Birth Control was a less sensitive topic than that of abortion. Therefore we were able to use realistic representations of those items. We changed the IUD icon to look more like the Mirena brand IUD because its more commonly used and recognized. We also changed the medical clinic icon because the staff at EWHC was worried that it would make users think that abortion is a surgical procedure when in reality it isn’t.
We chose the female symbol to represent abortion after having a discussion with staff at EWHC. We discussed how, in order to have an abortion you must have the female reproductive parts. We also discussed how ultimately the female who must make the choice, as she is the one who’s womb the pregnancy is in. We found the female symbol fitting as it represents females, empowerment, and a woman’s choice.
We chose the 3d card style of illustration because the staff at EWHC really wanted a modern look and this style of illustration is very trendy in web design at the moment.
This 3rd art direction was the final art direction that EWHC chose for their re-design.

Many of the staff have been with EWHC since the late 80’s and are very attached to the history and culture of the centre. We wanted the logo to represent some of that history and culture. This is why the logo was inspired by hollyhock flowers.

An artist donated her services to paint a mural of hollyhock flowers outside of EWHC’s location. The centre moved locations in 2002 leaving behind the mural. EWHC’s new location has many paintings of flowers framed around the centre; they like that flowers are representative of women and female strength.

Above is the first iteration of the hollyhock flower logo going from very simplistic to more realistic. The staff at EWHC chose flower #3 because it reminded them of a Georgia O’keeffe painting (her paintings were suspected by critics to represent female genitalia). However, the flower was not symmetrical and did not look logo like, and looked too delicate to be representative of the clinic and their branding.
Richard took the concept and created a much more logo-like version of the Georgia O’Keeffe-esque hollyhock:

He also gave the logo a wordmark:


Once we got the wireframes from UX we created the hi-fidelity wireframes in sketch.

