Card Sorting

User Interview

Usability Testing

Design Iteration

Project Overview

Protect the Children Inc. is a non-profit organization that offers support, aid, and safety for children hurt by all forms of abuse. They also host child abuse awareness workshops, volunteer events and provide therapy sessions for the victims.

The website has not been updated since 2018. For the purpose of this project, I am focusing on improving the information architecture and creating two MVPs for the landing page.

Hypothetical Client
Artboard.png
Year

2021

Before & After

Landing page mock up before.png
Landing page mock up.png

Challenge

Goals

After exploring the website with an eye for business goals, it appears the organization goals are to:

  1. Promote child abuse awareness

  2. Receive donations from potential donors

  3. Get visitors to sign up for newsletters

Problem Statement

  • How might we urge users to learn more about child abuse?

  • How might we motivate users to take action to support abused children?

  • How might we encourage users to sign up for our organization’s news?

Hypothesis & Solution Statement

Current Landing page with Annotations.png

Research

I recruited people who recently donated to non-profit organizations as my research participants. 

The research involved a mix of in-person (pre-covid!) and remote card sorting and usability testing sessions. 

I used card sorting to observe how participants group information to evaluate the navigation and information architecture of the Protect the Children website. Through usability testing, I asked participants to complete specific tasks on the website to verify my hypotheses and identify insights.

Methodologies

Methods.png

Research Insights

Card Sort Sessions

I ran the activity with 3 people: one open card sort and two hybrid card sorts. It was challenging to analyze the data because of the small sample size and the large (!) variability in responses. 

 

All users grouped the cards (global navigation and page names) depending on its part of speech, e.g. ‘donate’ is an action and it was grouped with other actions. In contrast, one participant had a different mental model and separated all items into two big groups: goals and information, and declined to break up the large groups.

 

Without the ability to recruit other suitable research participants, I did secondary research to learn how other charities organize their content. The IA recommendations are a combination of findings from my research and competitive research. 

Usability test

Many of my hypotheses were proven correct by observing participants navigate the site and complete tasks. All of the participants had trouble finding information due to disorganized global navigation and poor readability of the content. The original website failed to establish an intuitive user path due to no content strategy. The dark background and the color palette failed to meet the web content accessibility guideline and didn’t set the right tone for a children’s charity. 

Design Iteration

 Armed with research insights, I could now suggest a new MVP landing page. It improved the experience through:

  • Update information architecture

  • Establish intuitive user flow in content layout

  • Engaging CTAs

  • Email sign up options 

Changes in Global Navigation

AI before after.png

I renamed the navigation and page titles with precise descriptions. Once I have got the labels right, I grouped the contents:

  • Get Involved groups in all the actions: donate, volunteer, become a partner, etc.

  • Our Mission is about internal information: what we believe, about us.

  • Learn More is about external resources: child abuse and online sources. 

These changes provide clarity and an intuitive hierarchy in the information architecture.

Wireframe Sketches

I created two versions of the landing page design:

1. A more traditional or conservative design

2. An ambitious design that pushed the boundaries 

Wireframe showcase.png

High Fidelity Prototype V.1

Annotated 1.png
  1. CTA moved to higher conversion placement.

  2. Update hero image with a positive message

  3. Chunking information into digestible paragraph pieces.

  4. Highlight hotline number with detailed information

  5. Using the founder’s name to establish a personal level connection.

  6. Additional CTA is placed at the bottom of the page to engage users to take action once they finish exploring the website.

  7. Footer Redesign: Newsletter sign up・organization info・partner’s logo to establish credibility

  8. Updated color palette

High Fidelity Prototype V.2

High Fidelity Prototype V2.png
  1. CTA moved to higher conversion placement. 

  2. Update hero image with a positive message. Using cartoon-style illustrations to establish a friendlier tone and reduce negative emotions.

  3. Set up an intuitive reading flow; the content is easy to scan through.

  4. Use the right information to urge users to tap on CTAs

  5. Additional CTA is placed at the bottom of the page to engage users before exiting the site.

  6. Footer redesign: Newsletter sign-up option & essential organization information. 

  7. Updated color palette to align with brand image.

Final Design

Final Product.png

What I Learned

As a student, during this project I have faced the following challenges:

Card sort results analyses

One of the participants had a very different way of sorting information than the other 2 participants, I was struggling to come up with a navigation system that helps achieve the organization’s goal. Fortunately, I was able to arrange the cards that fit in their category. And if I run into the same situation next time, I would ask her to try a few more times to break down the large group of items.

Content strategy

Protect children’s inc. have so much information they would like to share with their users, it was challenging to make it scannable and only showing relevant information when users need it. Thus, I added questions to make the landing page more engaging rather than just showing lots of text.

UX designer

Phoebe Huang

social