UX Design Case Study for Planned Parenthood Toronto’s website

Michael Mabee
Nov 26, 2018 · 6 min read

Brief: Redesign Planned Parenthood Toronto’s website (www.ppt.on.ca) to make it work for its users and the organization.

A mock-up of the final Planned Parenthood Toronto home page

The Problem

Planned Parenthood Toronto (PPT) has a website that is broken, doesn’t reflect their values and is difficult to navigate, rendering their wealth of content inaccessible.

The User Journey with the current site, starting with the scenario of dealing with a possible STI.

Research

At the outset of the project, we were presented with a gigantic amount of material by PPT’s Communications Coordinator and Research Director. We waded through all of it, taking in the scope of the work they do and absorbing the organization’s philosophy.

We were also given incredible access to their staff. We held in-depth interviews with all of PPT’s key stakeholders — everyone from the board of directors to youth clients — to determine the organization’s viewpoint, their approach to relating to their clients, how they were managing with the site as it is, and their needs moving forward.

Our primary and secondary User Personas

These are the user personas we arrived at after a significant research stage. These would be the people we would be building the site for, basing each decision on how they might navigate and interact with each page.

Clients: For PPT, the client is paramount. They want the website to reflect the excellent level of service and support that youth (aged 13–29) receive in their clinical experience. Clients want easy access to information and services, presented in a tone that is supportive and safe (rather than condescending and prescriptive) as they proceed into adulthood and take agency over their bodies.

Volunteers: Outnumbering PPT’s staff 3 to 1, volunteers are the backbone of the operation, providing outreach and services that wouldn’t otherwise be possible. They need easy access to the site’s resources so they can refer youth to the information they need to make educated decisions about their health.

Community Healthcare Providers: PPT runs a wide gamut of sexual and reproductive health workshops that deliver information to Toronto’s healthcare providers that they won’t get from more ‘traditional’ sources. They need these courses to keep up with the ever-evolving needs of their clients.

Donors: PPT is publicly funded, but donors play a major part in keeping young clients’ costs low — donations are used to defray the cost of prescriptions — so that they can maintain their health. The donors need to see what their money is going to and how they are helping PPT’s clientele.

Our Comparative / Competitive analysis of websites in the Sexual and Reproductive Health space and ones that tackle social issues in other spaces.

We also looked at other players within the social issues space and found that there was an unfortunate line in the sand that few crossed: either they would present a great deal of information in an inaccessible way, or very little information in a very accessible way. The one exception was plannedparenthood.org (unaffiliated with PPT), which does a good job of imparting information in an accessible way and became the gold standard which we would measure our success against.

Our Goal

Give PPT’s users immediate access to the services and resources they want by organizing the content effectively and giving multiple access points and paths to their goals.

Planning

Our room was a visual manifestation of the PPT project, with (from left to right): our content sort by audience (thanks to PPT’s communications coordinator), navigation sort (continuing down behind the couch), user personas, user journeys, calendar and Scrum board. Plus my teammates Graham and Thea.

This project was a major Information Architecture exercise: how to present hundreds of items (there are 55 fact sheets alone) in dozens of categories (with cross-relations) in a simple, digestible way. We started with a content audit, divided it by audience that would access it and organized our navigation into logical entry points for each of our personas.

The site’s navigation at the inception of the project, with annotations about audience.
The site’s content divided by the audiences that would want to access it.
The card sort we arrived at for managing PPT’s navigation, taking all of their users into account and giving them easy access to the content they want to see.

Design & Testing

In the initial design phase, we set out to find ways that we could make all of their content quickly discoverable. We explored and discarded non-traditional pictorial interfaces that might appeal to youth clients, as the information-to-screen-real-estate ratio would be low and we would once again have to submerge the bulk of the content beneath multiple clicks. We also looked at basing our navigation on a natural-language search interface, but decided it might be a barrier for youth with limited English skills.

We arrived at a mix of traditional top-bar navigation and custom iconography that would highlight high-priority, high-access services and resources.

A storyboard I created for a scenario that PPT was very concerned about: access to sexual and reproductive education for their newcomer youth clients, who might be from a culture that would not approve. We gave them an ever-present quick way out.

We also had to take the safety of PPT’s youth clients into consideration. There is still a significant stigma around sexual education, and for newcomer youth from cultures where sexual activity outside of marriage is prohibited, there’s the threat of physical harm should they be discovered accessing information about sexual and reproductive health. We felt we had a duty to address this threat, and did so by adding an Emergency Escape button that would scroll down each page with the user, ever-present in case the need arose. Upon clicking, users would be redirected to YouTube and have their history erased.

Wireframes for the Programs, About and Volunteer pages.

We designed wireframes for an incredible number and variety of pages, showcasing PPT’s services and programs in the most easily-navigable ways possible, while answering the challenges posed by their users and staff.

You can see the wireframe prototype at https://invis.io/SROWAYMJMT2#/329037389_Homepage_Ppt.

User Journey with our prototype, with the scenario of dealing with a possible STI.

In testing, we found that we had significantly improved the users’ experience in what can be a particularly emotionally-fraught moment. We also found a few low points that we could bring up significantly with simple tweaks (ie. informing users they were going to teenhealthsource.com, a site affiliated with PPT, before they click). We addressed these low-hanging fruit as we moved to the high-fidelity mockup.

The final high-fidelity screens.

You can see the prototype screens for the site at: https://projects.invisionapp.com/share/J5P0U539QH4#/screens/330328171.

Conclusion

Within just three short weeks, we addressed a significant number of issues for Planned Parenthood Toronto. Had we more time, we’d have loved to present more accessibility options (colour-inverted night mode, type-size options) and a natural-language search 404 page (to make it more personable).

Thank you for reading! I hope you’ve enjoyed reading this case study. If you have any feedback, I’d like to hear from you. You can say hello at michael@michaelmabee.com or connect on LinkedIn.

Michael Mabee

Written by

Multidisciplinary designer and recent graduate of RED Academy. See more at www.michaelmabee.com.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade