American Red Cross

Responsive Prototype

History of Redcross.org

• before 2011
  • Redcross.org was for the national headquarters only
  • Chapters maintained their own websites
• 2011: ARC Redesign work begins
• 2012: ARC Redesign launches
• 2013: ARC Responsive Framework Prototype

Primary Objectives for ARC Redesign

• Consolidate the user experience onto a single, unified ATG platform
• Leverage the personalization/localization capabilities for their regional content
• Leverage ATG’s premier transactional functionality for the donations and courses sections

ARC Redesign Summary

• Digital engagement with ARC took about 18 months
• Involved a large team here at Empathy Lab working on the front end of the site
• Systems integration was handled by McFayden

Our Work Since the Redesign Launch

• Digital strategy on Global Giving platform
• Face to Face
• 1-Click and Tribute
• Real Life Stories
• Build backlog retainer

Reasons for a Responsive Design

• Existing website needed a more contemporary user experience
• Current experience is over 3 years old
• Wanted a more unified approach across connected devices

Vision

• More Engaging
• Hyper-Local
• Personalized
• App-Like
• Focused

More Engaging

• Increase the scale and use of ARC's high-quality, photographic assets

Hyper-local

• Engage the end-user by communicating news and information related to their local community

Personal

• Update the user about their progress towards personal achievement and charitable giving goal completion

App-like

• Make the experience "feel-at-home" on any device

Focused

• Keep the user on-task
• Devote the entire canvas to relevant tasks within each content category

ARC Responsive Prototype Summary

• 2 page fully responsive prototype
• includes complex interactions and overlay states
• Duration: 2.5 weeks
• Team: 3 developers

Technology Used

• ELF
• SASS/Compass
• webkit-overflow-scrolling
• Stellar js
• jQuery Waypoints
• Responsive Fixed Width Column Layout

Thanks