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.
Design Sprint: 3 weeks
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.
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.
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.”
Secondary users who access the website were also taken into consideration: The Youth Volunteer, the Donor, and the Comunity Healthcare Provider.
Turning Challenges into Opportunities
Now that we had a clearer picture of our users, we were able to define our main challenges:
- 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.
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.
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.
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.
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.
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.
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.
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.
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.