UX Design Case Study for Planned Parenthood Toronto’s website
Brief: Redesign Planned Parenthood Toronto’s website (www.ppt.on.ca) to make it work for its users and the organization.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
