Children’s Justice Center
Creating a safer future
The Basics:
Client organization: Utah County Children’s Justice Center
Team: myself and another developer
My role: Researcher, Designer
What I did: Distilled user research for four stakeholder groups to define task flows and product touchpoints; created low, mid, and high-fidelity prototypes using defined UI requirements. Coded and built a responsive prototype, and built https://2utahcountycjc.org/ on WordPress.
Software: Sketch, HTML, CSS, WordPress, GitHub
The Opportunity:
Children’s Justice Center is where I spent time volunteering in college, and I was excited for the opportunity to redesign their website. I took their original site, below, and using strategic research created a beautiful and cogent site. My new site helps the Children’s Justice Center and its reporters, volunteers, and donors to each achieve their goals.
The CJC is a Child Advocacy Center, which investigates reports of physical and sexual abuse and protects young children against perpetrators. At their location, they investigate individual reports, offer medical examinations, therapy and family resources. They also offer mentoring to children recovering from abuse.
A primary goal of the website is to serve as a conduit for reporters.
The center needs volunteers for mentoring recovering victims, monitoring the waiting room, setting up for group therapy sessions, and supporting families at the Family Justice Center.
As all non-profits, the center also needs funding and encourages donors to support as much as possible.
I focused on three users and sets of UI requirements:
- What do reporters need, in order to report accurately?
- What do volunteers need to in order to sign up and show up to volunteer?
- What do donors need to be motivated to donate?
Our users
I interviewed reporters of sexual abuse as well as volunteers at the Children’s Justice Center. Through these interviews I was able to understand a) the thought process of reporters and b) what attracts volunteers to giving their time.
Flows and Wireframing
First Iteration
My current iteration is at 2utahcountycjc.org:
Key Variables & Visual Design
A few key variables that I evaluated to re-iterate on this site:
- My video in the real estate area that is traditionally for the hero image
- the tone, images, and copy to influence and encourage potential reporters
- placement of valuable reporting information
The Power of Faces and The Influence of Words
Initially our goal was to make an alarmist landing page, that heightened the senses and added a bit of shock value. What I found however, was that the more the term report was listed on the site in conjunction with shocking features, the less likely undecided reporters were to report. Instead for these reports, I chose language that reminded the potential reporters the difference they can make in deciding to take a risk and report something unusual. I also created the ability to report anonymously.
Individuals like doctors and teachers, who are more aware and informed about their responsibilities as reporters, often do not need to make any decisions in terms of what to report. They simply arrive at the site, gather the phone number and make the phone call. It is the average citizen, who is undecided, that I decided to focus on.
UI Content for Refined Wireframes
Current Wireframes
The Result
The final product offers compelling features that answers to each of the user needs. It drives traction for volunteers and donors and creates a trustworthy, cheerful online presence.
