Planned Parenthood Toronto

Planned Parenthood Toronto

UX Research & Design  Website Redesign  

UX Design  Website Redesign

highfi mockup

Project Overview

Project Overview

__________

Planned Parenthood Toronto has been a leader in youth sexual health education for over 40 years. Our challenge was to update their website to better reach their youth audience, while also making information more accessable to volunteers and other stakeholders.

Planned Parenthood Toronto has been a leader in youth sexual health education for over 40 years. Our challenge was to update their website to better reach their youth audience, while also making information more accessable to volunteers and other stakeholders.

Client: Planned Parenthood Toronto

Product: Website redesign

Design Sprint: 3 weeks

Tools: Sketch and Invision

Our Team: Me, Graham, & Michael: UX Design & Research, Amanda: UI

Client: Planned Parenthood Toronto

Product: Website redesign

Our Team:

Client: Planned Parenthood Toronto

Product: Website redesign

Our Team:

Design Sprint: 3 weeks

Tools: Sketch and Invision

Design Sprint: 3 weeks

Tools: Sketch and Invision

the team – thea
the team – michael
the team – graham
the team – amanda

Me

UX

UX

UX

UX

Amanda

UI

Research

Research

__________

Getting to know our users

We were fortunate to have access to many stakeholders within the organization. We spent a day on site at the PPT clinic where we interviewed clients, volunteers, the volunteer coordinator, the Receptionist, the Executive Director, and also sat in on a board meeting.

Using our research data we created 4 user personas to help clarify the goals and frustrations of our primary and secondary users.

Our primary user, the youth client, was always our main focus, but we also wanted to take into account the needs of our secondary users, the donor, the volunteer, and the service provider.

Design Solutions

Development

__________

Turning Challenges into Opportunities

The information we learned during the research phase enabled us to get to the root of what the various users need.  With this insight, we were able to define our main challenges, and come up with specific solutions.

Challenge: Navigation and information architecture

Each of our user personas had frustrations related to access to information. Overall the information architecture needed an overhaul.  PPT truly is an amazing resource, but to live up to it’s full potential, people need to be able to easily access the wealth of information they have.

In addition to the 40+ pages of information currently on the website, our client gave us around 20 documents of brand guidelines, organizational messaging matrix, client feedback surveys, privacy requirements, programming calendars, needs assesment reports and more. We had a lot of information to fit on one website.

Solution: Organizing all that info

We brought the client in and did a card sort together, in addition to a few more card sort exercises with the UX team. This helped clarify our site structure.  From the card sorts we were able to come up with a much simpler navigation, making sure that all of the important information was only 1 or 2 clicks away.

PPT-Cardsort
navigation

Challenge: Engaging the youth audience

We referred back to our personas again and analyzed the root of their problems.  When Sara, our youth client, first visits the PPT website, she is scared and embarassed - this is all new to her.  She likes PPT because they understand her needs and they don't talk down to her.  We wanted to ensure that the new website would live up to PPT’s mission to empower their youth audience. The site needed to speak directly to youth in language they can undertand.

This was a complicated challenge that came with several solutions:

Solution 1: Making information accessable 

Our youth client is no expert on sexual health - PPT is her starting point.  We want to provide her with as much information as she wants, without overwhelming her.  By chunking text into bite-sized pieces, users are able to access basic info that they can easily digest, with the ability to dive deeper if they choose.

ppt chunking solution2

Solution 2: Revising copy to speak directly to the youth audience

During the testing phase, we received feedback that the site wasn't fully communicating PPT's values.  We changed some clinical terms into plain language, and created inviting taglines to popular links, to give a friendly and inviting personality to the site. Our team did a group brainstorm to come up with some new taglines. In the end, we decided on “you” statements, to remain focussed on the needs of the youth client.

ppt-slogans

Solution 3: Quick Escape Button

Sexual health education is still heavily stigmatized in many households. The quick escape button would take the user to Youtube with one click if a parent or peer were to walk into the room. Michael illustrated this idea with a storyboard.

ppt-storyboard

Challenge: Inspiring donors

As a non-profit, PPT relies heavily on donotaions, however the current site was not communicating their values and inspiring people to donate.  It wasn't enough to show users how to donate, we wanted to show them why they should donate.

Solution: Revise the donation page

Whereas the old site merely had a form, our new donation page inspires donors by including stats and quotes to let the user know that their donation is making a difference, as well as organizational info to let them know their money is being well spent.

donation solution

The Final Product

The Final Product

__________

high fi screens all2

Future Considerations

We would have liked to achieve a AAA accessibility rating, however this was not possible with the organization's inflexible brand guidelines and colour palette. For future consideration, more flexibility in colours would allow greater accessibility. Failing that, we had discussed adding an “accessibility mode” for users with visual impairment.

Learnings

PPT’s vast amount of information is one of the organization’s strengths, but sorting through and organizing that info was the biggest UX challenge for us. This project really reinforced the importance of creating information architecture that can adapt to each user.  Some users will want to scratch the surface, and some will want to dive deeper.  We were able to design a website that accommodates both.