Everywoman’s Health Centre
UI Design-Responsive Web
Background
Our client — Everywoman’s health Centre (EWHC), is a Vancouver abortion and sexual health clinic which provides aspirational (surgical) abortions, medical (medication) abortions, IUD insertions/removals, miscarriage management, PAP/STI testing, and other reproductive health care.
Even though being constantly updated, our client’s existing website does not meet the needs of nowadays clients in aspects of aesthetics and functionality, that is why our client approached us for a total website re-design.
The Team
4 students from RED Academy UI/UX courses formed a team for this group project. Throughout the 3-week time span, we brought together our individual ideas, discussed our thinking, and provided feedbacks to each other. The final product showcased our collaborations and has won the approval from both the client and the web developers from our school.
Preparation and Research
Client Kick-off Meeting and Our Why
During the initial kick-off meeting, we asked our client to mind map some key words they would use to describe EWHC.
“Choice”, “Safety”, “Feminism” and “Welcoming” can be found from the key words they wrote down. Our client also talked about how they wanted to create a space where abortion is de-stigmatized where women can safely make a choice and live their lives the way they want.
So for the why of our design, we have decided to go with “Woman can continue on with the life that they choose.” We want to come up with a design that would bring relief to our target audience so that they are able to continue with a life of their choice without worry about the rest.
Gut Test
To start our design process, we conducted a gut test with a wide range of participants onsite the clinic. A gut test is a collection of screenshots from various styles of apps and websites. We took these screen shots and made them into a slideshow presentation. We prepared 20 screens and gave each participants 20 seconds to score each one of them, from 1 — “I absolutely hate it” to 5 — “I definitely love it”.
Results:
On average, our client liked this design the most. They especially favoured its colour palette, big hero banner and boxy selections.
Our client liked this design too. They enjoyed its icons and imagery, as well as the overall simple yet modern style.
For this one our client gave it an absolute no. They could not accept the colour — red, which is often associated with blood and anti-choice groups.
Our client did not like this design either because it looked too minimal and too fashionable.
Another “no” was given to this design as it seemed too dark and our client did not want to portray their services as such.
So in conclusion, our client liked blue, teal, green, purple in the colour palette, they enjoyed big boxy selections , icons and imagery, as well as a simple and modern style. They could not accept red, or anything that is either too dark or too minimal/fashionable.
With the results of our gut test, we were then able to integrate them into our design inceptions.
Design Inceptions
Based on our gut test results, and under the same “why”, two of us UI designers decided to experiment on two different design directions — bright & friendly VS. feminine & calming. I took the bright & friendly direction and Corina took the other one.
To help women make their own choices, I believe my design has to be very approachable and empathetic, and portray a free atmosphere for our users to be focused on decision making and not worry about the rest.
This is my corresponding mood board. Images with blue and teal background showcase a very clean and clinical vibe. And then yellow, pink and floral colours bring a very bright and feminine touch to the design.
For my visual language, I used these 5 colours mentioned above from my mood board. For the shapes, I applied rectangles and round-edge buttons to convey a soft and feminine feeling. For the movement, I expect it to be mild and airy. Last but not least, it has to be very spacious, with boxy selections to produce the clean and modern style.
This is my style tile, I combined elements like the hollyhocks flowers and illustrations which would link back to the culture and history heritage of EWHC. The typeface I chose were Catamaran and Arya, which are very feminine sans serif fonts. I also included a scrolling bar design for the users to navigate services that everywoman’s provides.
Speaking of the hollyhocks mural and its heritage with EWHC, in 1996, artist Cheryl Hamilton donated her time to create a mural for the outside wall of Everywoman’s Health Centre. Cheryl painted hollyhocks for the mural, a flower that originates in China and is a symbol of women’s strength.
In 2002, Everywoman’s Health Centre moved to it’s current location at Broadway and Commercial and the old clinic building was extensively renovated for its new residents. Sadly, the renovations meant the loss of the mural. As a consequence, EWHC would like to keep the mural in various digital forms as a cultural heritage.
Another legendary figure mentioned by our client was Dr. Mollie Rawling. She was the medical director of Everywoman’s Health Centre for many years. She dedicated herself to improving abortion care for women and to researching ways to reduce the discomfort women feel during abortions.
She passed away on April 18, 2004. She is much missed among the employees of EWHC.
For the custom illustration, I included Ms. Cheryl Hamilton together with her hollyhocks mural, as well as EWHC’s much beloved Dr. Mollie Rawling.
This illustration not only represents EWHC’s history heritage, the images of 2 women of different ages also imply to the target audience that EWHC helps women from different ages in a supportive, safe and non-judgmental setting.
Alternatively, Corina’s wanted to make her design very feminine and calming so women can feel at ease and safe while browsing the site. She also wanted women to feel comfortable, and be able to trust the site. That is why she expected the website to be not only clean and peaceful but also a little feminine and soft.
She took inspiration from the pastel colours in the mural (bottom right) that used to be painted outside of EWHC’s original location. The photo of the living room (top right) has a clean & minimal but also feminine and comfortable aesthetics. She was also inspired by minimalist icon design.
This is her style tile. The overall look is very calming, feminine, soft and easy on the eyes.
Challenges from the client — Part 1, and our solutions
We presented the 2 design directions to our client. However, they provided the following feedbacks/concerns:
1. Even though our client mentioned they like the idea of illustrations during gut test, they now felt that it may not represent all of the demographics they wish to target, and our illustration did not convey the athletic/ brave & bold spirits of EWHC. So in the end, no illustrations;
2. Our client did not like pink. They thought pink is very juvenile, which means it is good for girls, but not for women.
3. They were in love with the design of an unpublished website, especially the colour overlay above pictures portraying body parts of women.
Based on client’s feedback, we have decided to revise both of our design directions and came up with the final one.
In the end, we got rid of all illustrations, and replaced them with more realistic photo hero banners. We tried different stock photos and then decided to use this imagery of a woman on top of the mountain. This is because our client demanded a non-specific female image that could be of any race, in a natural environment.
We also got rid of the colour pink and added a lighter blue for a more vivid look.
After some font-paring experiments, we changed the body typeface to Arsenal due to client’s preference on an all sans-serif website. All of the typefaces that we chose for this website — Catamaran, Arsenal & Arya, are not only very legible, but also very soft and feminine that fit our theme.
As a bonus, we designed a set of icons with 3D shadows. These icons are meant for people who just want to glance over the site and don’t necessarily read everything.
We also incorporated 2 elements that our client mentioned a lot — boxy selections and colour overlay above image, into the design of every web page. For pages with ultra long contents, we also applied a column system for easy content browsing.
For mobile page designs, we continued with our desktop style. However, we designed a hamburger menu for the relatively compact screen size, featuring a 3-level dropdown menu.
Logo Design
As UI designers, we would also like to design a logo that would help our client with their branding.
Our client’s current logo is pretty dated. A new logo design would be beneficial for rebranding together with the website redesign. So let’s get started to explore logo design options:
This is my first trial, I worked around keyword “woman”. The main element here is an illustrated woman wearing hollyhocks flower on her head. I then made 4 of them in the shape of a pinwheel, which represents everywoman.
This is Corina’s design, she wanted to take the original mural concept but simplify it so it translates better into a logo.
This is also Corina’s design. For this iteration she made the flower symmetrical with cleaner lines.
Challenges from the client —Part 2, and our solutions
We presented our logo designs to the client as well. They have the following comments:
1. They did not like the idea of a woman wearing flowers, it reminded them of an activist that they despised.
2. The idea of hollyhocks is appealing to them. It resembles a Georgia O’Keefe painting. They love the Asian symmetrical style since a lot of their target audience come from Asia. They also want the logo to be in outlines.
In the end, based on client’s feedbacks, I went with the symmetrical hollyhocks flower design and made it more formal and appealing.
I started with sketch on the paper first. Since our client liked Asian styles, I combined elements of Chinese painting into the shape of flower. Then I created outlines in Adobe Illustrator. In the end, I filled the petals with our theme colours — Dark blue and teal. Each petal is in the shape of an abstract “W”, meaning woman. So in total six petals represent “everywoman”, which is our theme.
To complete the logo, I added text in the Catamaran typeface, with an emphasize on “Everywoman’s” as per the clients request.
I also made a vertical version, with everything centred. This can be used on business cards and etc.
Final Deliverables
Clickable prototypes — Desktop:
Clickable prototypes — Mobile:
Conclusion
Our design helps users continue on with the life that they choose by providing them with a platform to comfortably search for information and clear doubts, as well as to be able to talk directly with people they can trust.
Even though we had a lot of challenges during our design process, I felt very proud to overcome them all and came up with this final product.
