#PutTheNailInIt

An in-depth retrospective on the microsite redesign

— To prepare for domestic violence awareness month, my team and I at Ironpaper redesigned 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

 
 
 

Design Challenge

Through an improved web and mobile experience, we aimed to support the campaign challenge to Donate, Paint, and Share as a stand against domestic violence. Our objectives were to:

 Drive donations to Safe Horizon (donate)

— Build awareness of domestic violence and the silence around it (paint)

— Increase social media engagement with the hashtag #PutTheNailinIt (share)

The previous PutTheNailInIt website


Inspiration

Interviews, Data Analysis, and Personas

Although I had redesigned Safe Horizon's mainsite, it was crucial to gain a deep understanding of the org and user goals specific to this microsite in order to ensure the best experience possible.

As with any design challenge, I explored the challenge starting with stakeholder interviews and data analysis of the current microsite. I learned the target users were:

— Middle aged women

— Middle aged men (who are fathers or brothers)

— Millennials (some of whom can be parents)

Through a mix of qualitative and quantitive research, I developed rounded personas and user stories that would serve as the basis for creating an intuitive, engaging experience for all site visitors.

 

Ideation

 

Information Architecture

While the information architecture did not require dramatic restructuring, I had to seamlessly integrate new pages for press mentions and a blog. Organized under a single menu item, these pages invite users to explore content published by news outlets like Today Show, The Huffington Post, and Refinery 29. Here, content and media logos are displayed in a grid, lending toward the credibility of the campaign and encouraging easy social sharing.

 
 
 
Caption
 
 
 

One infrastructural undertaking was to pull campaign-specific content from the Safe Horizon mainsite into the microsite blog, requiring me to work closely with the development team. As this scenario exemplifies, cross-collaboration  is invaluable as it fosters shared understanding and accountability throughout the entire design process.

 

 

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 to drive visual appeal.

 

 

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's primary color, orange.

 
 

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, and 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!


 

Previous: Safe Horizon / Next: CrossFit