#PutTheNailInIt

An in-depth retrospective on the microsite redesign

— To prepare for domestic violence awareness month, my team and I at Ironpaper worked on www.PutTheNailInIt.com for Safe Horizon, the nation’s largest provider of domestic violence services. The #PutTheNailinIt campaign challenges supporters to help end domestic violence and the silence around it. 

My role: UX, UI, Branding

 
 
 

The Brief

Through improved UX design, we aimed to advance the campaign goals: donate to Safe Horizon; paint your left ring fingernail purple to signify your vow against domestic violence; and share on social media with the hashtag #PutTheNailinIt.

Our high level goals included:

 Improve navigation, utilities, and content areas

— Educate and engage through a powerful visual narrative

— Highlight CTAs to build engagement

— Maintain UI consistency and functionality with the mainsite, www.SafeHorizon.org

The previous PutTheNailInIt website


Strategy

Personas

The campaign target audience included:

— Middle Aged Females

— Middle Aged Males (who are fathers or brothers)

— Millennials (some of whom can be parents)

For all personas, the microsite serves as an intuitive, engaging experience to educate and empower supporters to take a stand against domestic violence.

 

 

Information Architecture

While the information architecture did not require dramatic restructuring, the revised navigation now had to account for press mentions and the blog. To keep Donate, Paint, and Share as prominent menu items, it seemed logical to organize Stories, Blog, and Press Mentions under a single menu item, Media.

 
 
 
Caption
 
 
 

Syncing campaign-specific content from the Safe Horizon blog, the blog and press mentions pages allow users to easily explore content published by a vast array of media sources including Today Show, The Huffington Post, and Refinery 29. On these pages, a filter on the blog and a grid of media logos lend toward the credibility of the campaign and encourage social sharing. 

 

Wireframes and Content Design

Besides streamlining the navigation, another key goal was to improve utility and content throughout the site. To ensure social sharing is readily accessible, the “Add This” widget is available on every page.

On the homepage, I ensured the area above the fold communicated the value proposition, showcased celebrity endorsements, highlighted local campaigns, and promoted action with app-like CTAs. Carefully arranging the layout with meaningful content, I aimed to balance the utility and visuals without overwhelming users.

Consistent with the mainsite, I included a form on the homepage, allowing users to easily start the donation process. Infographics, a celebrity spotlight, and a social media stream serve to demonstrate the depth of the issue and the support surrounding the campaign. Additionally, client stories and CTAs to donate, paint, and share are weaved throughout the site, painting the reality of domestic violence and empowering users to take the vow to end it.

 

Homepage

Share Page

Stories Page

Blog Detail Page


 

As always, having a grasp of the content during the wireframing phase was crucial. For instance, unlike the mainsite (to protect client anonymity), I knew the microsite would rely heavily on photos of both clients and celebrities. With this understanding, I decided to use thumbnails and media to help drive the visual narrative.

 

Visual Design

 

To maintain consistency, I expanded upon the UI style guide of the mainsite to incorporate the campaign’s specific visual theme. Since purple is the color of the anti-domestic violence movement, it is used in place of the brand oranges.

 
 

The purple paint brush also emerged as a strong visual cue, a representation of the act of painting a nail; it is used as the graphic element in the internal page headers and in the primary CTAs: donate, paint, share.

 

Homepage

 
 
 

A closer look at the hero

Highly interactive and informative, the area above the fold delivers the value proposition, social proof, and engaging CTAs.

 
 
 
 
 

Share Page

PTNITSHARE.png
 
 
PTNITSTORIES.png

Stories Page

 
 

Blog Detail Page

PTNITBLOG-DETAIL.png
 
 

Thanks for reading!