thea barber
Dec 3, 2018 · 7 min read

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.

The Basics

URL: www.ppt.on.ca

Design Sprint: 3 weeks

Our Team:

The Current Site

The current site was made several years ago and was due for an update. Some functionality, such as the search bar, had stopped working altogether. In addition to functionality, the site was difficult to navigate and the imagery was not in touch with today’s youth. To fully asses the challenges ahead, we began with research.


Research

The Competition

We did a competitive comparitive analysis of other sexual health organizations and found that they all had a similar struggle to Planned Parenthood Toronto: The more information they had, the less accessable that information was.

Planned Parenthood USA had found a good balance, however they don’t service youth in Toronto.

CC analysis: Direct Competitors

Interviews

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.

Interview questions included:

  • Overall values and goals for the organization, clients, and stakeholders
  • Their current use of the website
  • How clients use PPT services
  • How the website ties in with the in-person services offered at PPT

Getting to Know Our Users

Personas and user stories were used to help clarify the motivations and pain points of our users. Our primary user — the youth client — was the main focus.

Client user story: “I am a 17 year-old youth, looking for help accessing birth control so I can have control over my body.”

Our main user: the Youth Client

Secondary users who access the website were also taken into consideration: The Youth Volunteer, the Donor, and the Comunity Healthcare Provider.

Secondary users: the Volunteer, the Donor, and the Community Healthcare Provider

Turning Challenges into Opportunities

Now that we had a clearer picture of our users, we were able to define our main challenges:

  1. Navigation and site structure

2. Engaging the youth audience

3. Inspiring donors

Challenge #1: Information Architecture needed to be restructured

There was a ton of information included in the current website, but it needed better organization. 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.

PPT existing website

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 Information

This website has so many moving parts, it was a challenge to organize it all. We had the client come in and do a card sort with us — putting all of the website’s information onto sticky notes and grouping them into like areas.

The card sort made things much more clear.

Left: Card sort with client. Right: Our UX navigation card sort

From the card sort, we were able to come up with our new navigation. The new navigation is much simpler than the current website, and we made sure that all of the important information was only 1 or 2 clicks away.

Improved Navigation

Challenge #2: Engaging the Youth Audience

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.

We were able to address this challenge during the design phase.

Solutions

We referred back to our research and personas to get to the core of what our youth client would value in a PPT website. We used several solutions to address this challenge:

Making Information Accessable

Our goals was to allow users to easily access the basic information, while having the opportunity to dive deeper if they so choose. While creating wireframes, we chunked information and provided clear headings to make info scanable and easy to read.

Speaking to the Youth Client

Overall, copy needed to be more approachable and speak directly to the youth audience in words they undertand. Our client provided much of the new copy, but there was still room for further improvement. With our client’s permission, we were able to put some clinical terms into plain language. For example, “Case coordination” was changed to “Life Resources”.

To make the site more inviting and user friendly, we added taglines to popular links on the homepage. 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.

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.

Story board of quick escape button.

Challenge #3: 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.

Our new donation page included stats and quotes to let donors know they are making an impact, as well as organizational information to let donors know exactly how their money is being spent.

In addition, a donation link was in the top navigation of every page, and several other pages, including the homepage, also included inspiring statements with a call to donate.


Testing

Mid-fi Prototype

Following a round of low-fi wireframe improve, a mid-fi Invision prototype was tested on PPT clients, volunteers, employees, and a board member.

Feedback and Improvements

Through testing feedback we were able to make several improvements, including the following:

Fitting more above the fold:

We reduced the height of our hero image, and moved page titles and text into the hero image. This helped reduce scrolling and highlight important information.

Reorganizing the Footer:

We looked at the visual hierarchy of important contact information, and added a “Back to Top” button.

Re-organization of information:

On several pages, we further improved upon our 2nd challenge of chunking information. In this example we put more visual emphasis on important elements such as external links and how to make an appointment.


To ensure that we had sufficiently addressed our user’s major pain points, we did user journey maps of our v2 mid-fi prototype and compared it to a journey map of the current PPT website.


The Final Product

Satisfied with our mid-fi improvements, it was time for our UI designer Amanda to apply colours, photos, and her custom made icons. Though PPT had strict brand guidelines to follow, our UI designer was still able to give the site a fresh new look, with imagery that speaks directly to today’s youth.

Future Consideration

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.

Final Thoughts

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. My biggest takeaway was learning to create IA that can adapt to the 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.

Graham and myself, post scrum
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