Truth Be Told

Website Redesign for a Non-Profit

Try Prototype

Overview

Truth be Told is an Austin, TX based nonprofit providing transformational programming to women who are or have been incarcerated. Being a non-profit this organization runs largely on volunteer participation.

Time

2 weeks

Client

Truth Be Told

Team

5 designers

Tools

Figma
Miro
Adobe Photoshop

What I did

  • Redesigned Information Architecture.
  • Redesigned Pages with meaningful and easily digestible content.
  • Added prompts and CTAs to let users know how to get involved.
  • Updated the UI, fix broken links and remove or relocate elements that are distracting and/or add cognitive load for the users.
  • Provided a clear path to learn and apply for volunteering.

Challenge

Truth Be Told is struggling with Outreach and long-term engagement, as they are having trouble attracting volunteers to fulfill all the different roles needed to run the non-profit programs.

This sprint was conducted to understand what motivates volunteers to contribute their time and engage long-term with non-profit organizations and design solutions that would address attracting and retaining volunteers.

Click on image to play Prototype video

Click to play Prototype video

To reach this solution we followed the complete design process, utilizing a variety of research techniques to gain knowledge of user habits and pain points, mapping the trends, ideate, design and test solutions that validate our findings.

Empathize

Heuristic Analysis

A Heuristic Analysis of the features on the current website revealed many opportunities for improvement - update broken links, reorder visual hierarchy, prioritize CTAs.

  1. No clear indication of how to get involved with organization anywhere on homepage and header.
  2. Logo and vision not clearly visible because of the gradient.
  3. Learn More CTA doesn’t work.
  4. Video - Awkward Scale with no clear play button
  5. Read More CTA doesn’t work .
  6. Featured News -Awkward position
  7. Newsletter - Awkward size
  8. Unnoticeable and outdated Social Media links.
  9. Unnoticeable - all important page links are in footer with very small scale.

Truth be Told's Homepage

Understanding User Impression

A Contextual Inquiry with 5 participants revealed that users broadly understand the site's mission but how to get involved and volunteering needs of the programs are unclear.

The Goal : To understand how people use the site as well as what the site content is communicating to them.

Key Findings

What this non-profit does?

  • Used the Homepage - didn't find enough information
  • Learn More button didn’t work- "Never mind, I don't want to Learn More"
  • Navigated to Who We Are page - long scroll, too wordy
  • Program page - "I would like to know MORE about the process and it seems pretty vague"

Where do you go to get involved?

  • Users didn't understand at once that site is looking for volunteers or what exactly opportunities are available
  • Scrolled through Who We Are - found small links 'Connect' and 'Donation' in footer
  • Navigated to About Out Work - broken Program page links, " I'd like to see and more in depth details - what are the actual steps."

Survey

The Goal : To gather quantitative data on demographics and volunteer practices of users.

Key Findings

smd

User Interviews

The Goal : To understand why people volunteer and how their experiences impact there decisions moving forward.

Participants : 5 users with experience in volunteering.

Sample Questions

  • Why do you look for Volunteering?
  • What factors play an important role in deciding the type of opportunity?
  • Where do you look for Volunteer opportunities?
  • How often do you volunteer?

Key Findings : Mapping the insights from the interviews revealed the following trends.

Motivations for Volunteering
People were motivated by personal and professional connections.

Ways they heard of Volunteering
People were inclined towards opportunities from trusted sources.

smd

Define

Persona & The Journey

With these key insights from different research steps , we defined our User Persona, Marcia and her Journey with Truth Be told when she seeks a volunteer opportunity.

Mapping her journey revealed the pain points and opportunities to make the user experience better with the website and increase the engagement for Truth Be told. These insights helped in defining the problem statement.

The Problem

Marcia needs to find a volunteer program that will provide skill-sharing opportunities and information transparency so that she is more inclined to sign-up and continue engagement because she doesn't want to waste her limited time.

How Might We & Answers

The problem was further defined with 4 HMWs that helped reframing our insights into opportunity areas and ideate on key findings during user research.

1.

Help Marcia with alternative volunteer options that are suited to her interests?

  • Add information on volunteer options and skills required
  • Add options to choose between programs
  • Add options to choose between volunteer and donate.

2.

Help users feel secure and safe with her volunteering decision?

  • Add Video/written testimonials from volunteer/donor
  • Easier way to read about staff
  • Add pictures from actual sessions.

3.

Help Marcia to understand the impact she will be having with her volunteer opportunities?

  • Add statistics related to impact of organization and its programs.
  • Add testimonials/stories from participants

4.

Help Marcia with any barriers to entry in volunteering?

  • Give multiple Volunteering options
  • Give Options of programs on volunteer page to choose from
  • List out steps in volunteer sign-up process to manage expectations

Ideate

Design Studio

Answering the 4 HMWs lead to ideating Information Architecture , Navigation and Content Strategy to make the user journey smooth.

Homepage

Header

  • Logo visibility
  • Links to primary pages

Page Content

  • Mission Statement
  • Impactful hero image
  • Statistics - Informative highlights from the video
  • Impactful resized video
  • Introduction to Programs, with hover over effect to reveal bite size information, which links to respective pages.
  • Testimonials from volunteers, participants and donors

Footer

  • Links to secondary pages
  • Newsletter
  • Contact info
  • Links to social media

Who We Are Page

Page Content

  • Explain mission
  • Talk about vision
  • Information on working of org.
  • Add information on impact
  • Make separate staff page with link on who we are page.

Staff Page

Page Content

  • Create name cards for each staff, board member and past leadership
  • Name Card include photo, name and position in org with hover over effect to reveal bite size information.
  • Pop-up window for more information on each person.
  • CTA to Our Program page

Our Programs Page

Page Content

  • Folder system for all programs to be visible at once
  • Add image and content on folder cover

Program's Page

Page content

  • Added Program details and its working
  • Section for Volunteer skills
  • Impact of the program
  • Testimonials of volunteers with their picture
  • Volunteer and Donate CTA for each available program.

Volunteer Form

Page Content

  • Provide information on next steps
  • Dropdown menu of programs to choose from.
  • Add option of inperson/virtual

Donate Page

Feature

  • Give freedom to choose payment option instead of prompting aspecific one.

Test

Mid-Fid Usability Test

A Usability Testing with 5 participants on Mid-fid Prototype revealed some opportunities for improvement, before diving into the Hi-Fid stage. Each participant was given 4 tasks and was asked to rate the experience.

Results

  • Find about Organization : 60% users expected to find more information on the Impact of organization.
  • Find Ways to Get Involved : 80% users expected to find a volunteer option on homepage.
  • Get Involved with one of the programs : 100% completed the task , however had to select the interested program multiple times in the flow.
  • Look for a Staff member : 100% completed the task with ease.
  • Overall Rating on content and experience : 3/5

Iteration

  • Our Impact section and Volunteer tab were added to the Who We Are page.
  • To make volunteering more accessible : the Volunteer button was added to the navbar.
  • Ability to choose a program based on interest and skills : Each program page was given its own Volunteer button which leads to the Volunteer form with a pre-filled 'Choose the program' field. This would help Truth be Told keep a track of volunteer applications for each program and work in the required direction.

Hi-Fid Usability Test

A Usability Testing with 5 participants on Hi-fid Prototype revealed some opportunities for improvement.

Results

  • 100% of users completed the tasks with ease.
  • Users perceived TBT to be much larger than it was, proving the power of volunteers connected with the organization.
  • Volunteer button and Donate menu item provided a clear call to action for each independently. However, 60% users found the navbar cluttered.
  • Overall Rating on content and experience : 4/5

Iteration

  • Concise navigation - A drop-down Get Involved tab with secondary navigation as Volunteer and Donate.

Prototype

smdTry Prototype

Outcomes

A Usability Test with 5 participants on Hi-fid Prototype revealed more confidence in the website and the working of the non-profit leading to increased willingness to participate with the organization in their good work.

Original Website

outcomes

Hi-Fid Prototype

0% Video Play Rate

Increase Engagement

75% Video Play Rate

3 Broken Links

Eliminate Dead Ends

0 Broken Links

0% Participants

Path to Volunteer

100% Participants

1.5/5

Experience Rating

4/5

Learning

This project was 'The First' of many things, first Non-profit experience, first Hi-Fid prototype, first Team project and I learned so much in each aspect.

Nonprofits and their work and most importantly the kind of impact Truth Be told has on people involved with it. It inspired me to reach out to them for virtual volunteering with my craft skills.

Team work is what made this project successful and I am thankful to all my teammates for working hard to achieve the goal.

There is always a scope for improvement in everything and so in this design.
Next in the redesign, I’d like to:

  • Sign Up - Although Sign up is a barrier of entry for users,  with the nonprofit serving such a critical mission, a strict signup process involving interviews and paper work is necessary but can be streamlined in future with more research and resources.
  • Collecting photographs, videos and more data from Truth Be Told to inform users of the good work in a better way. Adding more content will definitely need Information Architecture and navigation redesign.

I absolutely enjoyed this redesign experience and looking forward to my next opportunity to help an organization.


All projects

Arrow