Truth Be Told

Truth Be Told Volunteer Redesign

Introducing the Project

Team Members and Responsibilities:
Michelle Kao (User navigation interviews, Storyboard, Hi-Fi Prototype)
Jen Wilkin (UX Research)
Zach Thomas (UX Writing, User Persona, User Focus, Insights, Problem Statement, UX Scenario, UI Style Guide)

Project Duration:
10 days

Tools Used:
Paper sketching, Sketch App, Adobe XD, and Illustrator 


What is Truth Be Told?

This organization values self-renewal among women who have been or are currently incarcerated by utilizing recovery programs that aim to increase their self-worth and result in making these women competent members of society.

Truth Be Told does this through a combination of volunteers and the three programs they have built to empower women.

The three programs are Behind Bars (which facilitates meetings within prison walls), Beyond Bars (which meets women upon release with resources to help them re-acclimate to society), and Bridge Builders (which allows the organization to mobilize to any conference hall that needs to hear their message).

*all of the following work for this organization is purely conceptual but could be made into a reality*

Screen Shot 2018-08-25 at 8.48.52 AM.png


As Bianca was volunteering with children at the Settlement Home of Austin, her friend mentioned that another organization, Truth Be Told, would be another great place for Bianca to volunteer.

However both the women were playing outside with the children, so it got difficult to continue their conversation.

Screen Shot 2018-08-25 at 8.56.24 AM.png

Rising Action

When Bianca got home, all she could remember from that conversation with her friend was the name of the organization she recommended. So she quickly googled it.

When she found the right Truth Be Told website, she was caught off guard by the large YouTube video on the home page. Bianca wanted to easily find out exactly what the organization was about so that she would know if the organization was a good fit for her.

Bianca kept looking around the site and eventually hovered over the Volunteer tab. She noticed that three items came down in the dropdown. When she clicked on each of them, there were just bulleted lists of ways to volunteer. She got really frustrated trying to find the volunteer form for her to fill out to find out more.

Screen Shot 2018-08-25 at 9.03.11 AM.png

Climax (more like Anti-Climax)

She finally located the Volunteer Form on the footer navigation and clicked on it. Bianca quickly scrolled down that landing page to see how long the form would be to fill out.

She eventually got through filling out the form but she felt it took way too long. Because of the outdated information on the site, she ultimately was questioning whether anyone would get in contact with her about volunteering.

The information she provided did not feel very relevant to the type of volunteering she wanted to do for the organization.

Screen Shot 2018-08-25 at 9.08.37 AM.png

Falling Action

After filling out the form, Bianca’s friend reaches out to her on Google Hangouts about grabbing coffee nearby and Bianca can’t help but jump on that idea after feeling unsure of her experience. 

She leaves her desk chair and runs off to drink caffeine despite feeling weary of whether or not she will learn about volunteering at Truth Be Told. 



Bianca is now waiting days after filling out the form to see if an administrator will get in contact with her about volunteering.

She commits herself to volunteer at other organizations that value making it easy for Bianca to find out information as well as provide simple ways to donate and volunteer.



The Problem

A single woman pursuing a graduate degree feels frustrated about figuring out how to sign up to volunteer at Truth Be Told since she needs to find and fill out the volunteer form but faces not knowing where the form is located on the website.


Insights That Surprised Us During The User Interview

Bianca (our gracious user) connects with non-profits mostly by email newsletters. She sees the value in social media keeping her updated, but she is very selective about the organizations she follows (which are larger organizations like the ACLU). 

She wants to fill out the least amount of personal information in a volunteer form. Bianca hates how some organizations paint forms as obligatory and not just as a way to receive more information. 

Screen Shot 2018-08-25 at 6.00.59 PM.png


Our persona really solidified our user’s experience by sharing her pain in venturing out to try and discover new organizations to volunteer for. 

She wants simple and clean forms to fill out, REAL information on the company that reaches her emotions, and more shared experiences from past volunteers that want others to spend their afternoon helping out a great cause. 



Screen Shot 2018-08-25 at 6.06.56 PM.png

The storyboard shifts slightly from the Story Arc I described at the beginning of this case study. 

Bianca tries three routes to get to the volunteer form, grows increasingly frustrated, and ends up abandoning the form. 

More than likely this experience will lead Bianca to decide not to volunteer at Truth Be Told.

Screen Shot 2018-08-25 at 7.58.22 PM.png

Decision Flow Diagram

We wanted to create a volunteer user flow early on so that we could change decisions when needed to move the user along in the process faster but simultaneously allow for the user to truly understand what it is they are volunteering for.


Whiteboard Wireframing

Screen Shot 2018-08-25 at 8.04.59 PM.png

Based off the user navigation tests, we knew we had 3 major tasks:

  • Make it easy to access the volunteer form (Solution: noticeable CTAs to direct a user to the form)

  • Allow users to see all 3 program options on one screen to easily compare and contrast (Solution: a volunteer landing page)

  • Simplify the volunteer form (Solution: asked for most basic contact info. Asked users to select interest in program options also to allow TBT to collect data on potential volunteers)

Validation of basic flow/solutions from testing 5 users:

4 out of 5 users clicked on one of the 3 programs to get more info, so we knew this type of design would work in showing users information about the programs. (This also showed that users did want more info about the programs before hitting the big volunteer CTA).


UI Style Guide

Before we decided to start constructing a digital prototype, I created a simple and bare-bones version of a style guide that I knew we needed to move forward in creating a consistent design for Truth Be Told’s website. 

Screen Shot 2018-08-25 at 8.08.45 PM.png

In order to make it super clear to users, we used clear CTAs, color, and typography that kept the site very consistent across this specific flow.


Usability Testing with Working Prototype

We gathered some more insights from these four users to help us iterate on the prototype in the future:

Most users liked the volunteer accordion we used on the homepage to give them more information on volunteering.

Clear CTAs to the designer mean something altogether different for the user-- these users wanted larger buttons.

The proximity of CTAs was an issue in some tests where universal principles for lower right-hand placement of buttons made sense for these users. 


Prototype Screens


Next Steps

  • Our group was unsuccessful in speaking to a representative from this non-profit due to the nature of their busy season. If we were to rehash this project, we would hope to seek out the business needs more directly from the organization rather than inferring where they could use the most help.

  • I would look to rearrange the information architecture to clean up the amount of tabs on the homepage considering that some topics could be combined.

  • Interview volunteers from the organization to gain more testimonials that can result in adding more volunteers

  • Utilize more interaction from users by creating an Instagram for the organization considering that many people enjoy seeing photos/videos from non-profits that can tell their story in a consistent manner