© 2019 Michael Mabee

​While at RED Academy, I was fortunate to be chosen to work with Planned Parenthood Toronto. My team took on their outdated site in order to streamline it and make the content more visible. We had a significant challenge in that they have a gigantic number of services, programs and resources spanning sexual and reproductive health, mental health and primary care.

RESEARCH

We started with a full slate of interviews: everyone from the executive director to teen volunteers, as well as a number of their youth clients. After hearing their needs, absorbing their institutional perspective and reading all of their content, we got to work planning a new site.

PLANNED PARENTHOOD TORONTO

​Team:

Michael Mabee - UX Design

Graham Mcfie - UX Design

Thea Barber - UX Design

Amanda Gangadeen - UI Design

Time Frame:

3 Weeks

Software Used:

Sketch

InVision

Prototype:

InVision

Case Study:

Medium.com

The user personas we arrived at after our 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.

The insights we uncovered included:

  • access to services and resources is paramount, as it could literally mean the difference between life and death

  • prioritize direct navigation and clear language, to enable PPT's youth clientele, and newcomer youth in particular

  • PPT's site audience comes there for many reasons, but reaching out to, educating and serving their clients is the focus

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, sectioned it by the audience that would access it and organized our navigation into logical entry points for each of our personas.

This card sort (above) was what 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.

DESIGN

In the initial sketching stage, the team decided on approaches that made sense for the audience and their needs. We arrived at a mix of traditional top-bar navigation and custom iconography that would highlight high-priority, high-access services and resources.

Additional safety consideration: I created this storyboard 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 might vigorously disapprove. We gave them an ever-present escape route.

We designed wireframes for an incredible number and variety of pages, by presenting PPT's programs and services content in easily-navigable patterns, while answering the visibility challenges posed by their users and staff.

See the mid-fi prototype here.

Above you can see a small sampling of the high-fidelity screens, populated with all of the final custom icons, updated text and photos, and styled following Planned Parenthood Toronto's established brand guidelines.

See the high-fi prototype here.

CONCLUSION

Going forward, we would love to complete the redesign – including the mobile version, as that is a key point of access – to ensure that PPT's youth clientele receive a level of service online that matches their excellent experience in the clinic.

To see my full case study for this project, please visit Medium.com.