Re-designing a website for digital defenders of children
CoFounder, Ashton Kutcher testifies on Capitol Hill, about the issue of child sexual exploitation, and why Thorn exists. Video shown on wearethorn.org.
BACKGROUND
Thorn is a nonprofit, cofounded by Demi Moore and Ashton Kutcher to drive innovative tech to fight child sexual exploitation. As a young organization that operates like a scrappy startup, we had led the charge in the anti-human trafficking space by carving out a niche within the tech community. But you wouldn't have known that by looking at our website in the Summer of 2015.
The decision was eventually made by Thorn's CEO, Julie Cordua, to update our branding, marketing, and communications. The official launch of our efforts would take place in November 2015 to coincide with the launch of Thorn's Innovation Lab.
I was tasked with managing and designing this project, along with our corresponding communications strategy. Our team consisted of Julie, myself, and the great team at Media Cause - who physically built the site and implemented the communications strategy.
CONTEXT
Thorn needed to update their branding and communications to target a new user persona - Digital Defenders - to drive engagement and potential employment
Thorn's previous website was built without a clear understanding of who their target audience. Moreover, the design was dark, depressing, and difficult to navigate (with various sub-navigations). It did not tell the vision and impact of the wonderful work the organization was doing, particularly with the tech industry. Thus, we set out to re-tell our story by focusing on a specific user persona, we we called Digital Defenders - or individuals in tech who want to join the fight against child sexual exploitation online.
PROCESS
Finding a way to tell our story, using UX/UI, to build a digital army to fight for the well-being of children online
The first thing I did, conducted a website audit of the assets and taxonomy we currently had on the site. Then, I did a website audit of our competitors and used all this data to run a SWOT analysis. After that, I looked at other websites that inspired me and created an inspiration board that I shared with the team.
Website design inspiration board
After getting a start on secondary research, I began to turn towards addressing the needs of Digital Defenders. I held several user interviews over the phone and in-person to understand their goals, motivations, and frustrations. I created a user persona and used wireframe sketches to map out an ideal journey as they navigated our new site. Throughout this process, I worked with my team to share ideas, and get clarification on project goals, scope, and expectations.
As a team, we wanted to make sure that by the time Digital Defenders reached the bottom of the homepage, they would be compelled to join our digital army. Success could look like signing up for our newsletter; reading our blog posts and engaging with us on social media; donating to our cause; applying for a job at Thorn, and learning about the overall issue.
A rough sketch idea for the flow and storytelling on the homepage.
From there, we created high-fidelity prototypes with Media Cause and continued to validate our assumptions about the design and content through user feedback. Ultimately, we came out with a sleek, simple, and easy to navigate a website for our target audience.
Spotlight marketing collateral, based on what law enforcement needed to know.
Here are a few samples of the four key pages on the redesigned website (from left to right: home page, the issue, our work, get involved). The homepage tells a story about why Thorn was created, who our partners are, and a CTA to join our digital army; the issues provides data that adds to the need for digital defenders; our work is easy to navigate and demonstrates impact; and ways to get involved drives donations and opportunities to join the team.
After redesigning the site, we also wanted to make sure that our marketing and branding was aligned with the new look and feel. We did this by updating our communications calendar and strategy to include the wants and needs of our Digital Defenders.
This is an example of the type of context we wrote on our blog posts.
We created an interactive annual impact report. We wanted to be careful not to put too many words, and only the key information necessary to convey impact. Here are screenshots of five slides from the report. Check out the full experience at impact2015.wearethorn.org.
We restructured our newsletter format to appeal to Digital Defenders. When speaking with current Digital Defenders, I was told that they liked learning what's going on, what books to read to stay relevant, etc. So we made sure to include a statement of impact, a curated list of what Thorn had been up to, what the team is reading, and what events we'd be at so that we could engage with our community.
We created a Typeform survey to identify potential partners and skill sets from Digital Defenders.
OUTCOMES
Building an army of digital defenders by understanding our users, through improved product and UX design
We launched our redesign and improved communications strategy to coincide with the launch of Thorn's Innovation Lab. We did this by having Ashton do an interview with Tech Crunch, posting on Hacker News, CNN and other news sites, and sending out PR to our newsletter and social media. Within the first two months of the launch, our website saw bounce rates decrease from 82% to less than 60%; the length of time spent on a page increased from a little under one minute to two minutes and thirty seconds; and our listserv doubled in size to capture our target audience (which we were able to segment). Finally, we received an increase in traffic from interested and eligible candidates for our Innovation Lab, resulting in a 42% hiring growth, and increased partnership growth with tech companies.