overview

While at Centerline Digital, I volunteered my visual and UX skills to work on Lab 517. Lab 517 was a 48-hour creative challenge partnering with Shelterbox USA to provide promotional assets to their team, meeting several challenge goals established prior to the event kickoff. 

Goal
Concept out a new & improved interactive map that visualizes Shelterbox's worldwide efforts, over time. Due to the timeframe, our deliverable to the Shelterbox team was a high-fidelity wireframe, along with technical recommendations from the developer on the project. 

Audience 

  • External users: current and potential donors, news outlets.
  • Internal users: Shelterbox team members use the current map as a historical reference of where and when Shelterbox provided aid. 

Why 
My team's challenge was Beyond the Box.  Shelterbox asked Centerline to create assets articulating the range of aid they provide, which goes far beyond the box. It my be palettes of supplies, blankets, cooking supplies, etc. depending on the needs of the region. The map becomes a tool for donors to see the level of impact and diversity in aid Shelterbox provides. 

Created while at Centerline Digital. Project team: PM team: Faye Fang, Elizabeth Monnett, Hannah Stephens; Associate Creative Director: Javier Leiva; Developers: Zach Stowell, Bryan Tighe.   

current map

Working with my team and the client, we discussed what needs the current map does not meet. The client wanted it to be more interactive and dynamic, showing more filtering options and the ability to pull in material from volunteers providing aid to these regions. The map needs to bridge the disconnect from what aid donors think Shelterbox provides, to what they actually provide worldwide. 

Initial ideas to include:

  • Timeline: user can scrub through the years Shelterbox has been active, seeing the growth in aid provided
  • Donate CTA: integrated
  • Iconography: use iconography on the map to show types of relief & types of disasters/crises, including a legend for users
  • Individual disaster/crisis page: pulls in dynamic content from volunteers: videos, tweets, blog posts, etc
current_map

process: notes, low-fidelity wireframes

The team had 48 hours to get as much done as possible on multiple assets (not just the map I designed) so I did most iterating on the computer. Below is some of my analog process captured during team meetings.

Wireframe sketches to communicate my thoughts during team meetings.

wireframe_sketch_01
wireframe_sketch_02
 

Taxonomy notes to figure out iconography needs for disaster/crises and aid types. 

disaster_taxonomy
aid_taxonomy

high fidelity wireframes

I moved quickly to wireframing in Sketch, iterating and adding design details as time permitted. I also created a prototype in InVision to show some of the interactive elements, such as selecting a pin on the map, opening the legend, and a video modal on the disaster/crisis page.

Homepage wireframe showing a worldwide map with color-coded pins. Hovering over the pins brings up the region and amount of aid provided by Shelterbox. Clicking on a pin takes the user to a zoomed in view, along with information about that disaster/crisis.

The team decided the map should be a microsite, enabling flexibility to bring in more dynamic content and interactive elements. The design features more calls to action with prominent donate now buttons. The timeline includes question marks that would include messaging saying that with consistent donations, Shelterbox is able to prepare for future disasters, not just those currently taking place.  

shelterbox_home

Clicking on a map pin takes the user to a page for that disaster/crisis event. The top section shows all the crises Shelterbox has provided aid for during the Syrian conflict. Below is the story of Shelterbox's involvement, told through volunteer's photographs, tweets, blog posts, as well as other news and partner outlets. 

disaster_page_ex