Project Details
Timeframe: Sept – Nov 2015
Skills: UX design, visual design, front-end web development, content strategy
Tools:Illustrator, HTML/CSS, Twitter Bootstrap
Prototype Website
The Problem
Work being done as part of the Magnum Foundation’s Photography Expanded initiative included documenting the creative process of documentary photographers through a series of workshops led by artist Mark Strandquist.
The Magnum Foundation quickly realized that the documentation of a project’s evolution could be useful to artists and educators as a teaching tool. I worked with Magnum Foundation Assistant Kate Fowler and artist Mark Strandquist to turn the documentation of Pete Pin’s work, “I am Khmer” into an online educational platform and visualization called the Participatory Playbook. Pete Pin’s “I Am Khmer” started as a traditional documentary photography project before eventually evolving into workshops to share the family stories of Cambodian refugees affected by the Killing Fields:
The Process
For the Participatory Playbook, I led design, development and content strategy working collaboratively with Kate and Mark over a period of three months. The Magnum Foundation had a hard deadline of November for the project completion as the Participatory Playbook would be presented to attendees at the Magnum Foundation’s annual symposium.
Initial meetings were focused on gathering information on the intended outcomes, goals and content for the site. I developed a Creative Brief to guide the project development over the three months.
At the beginning of the project, Kate and Mark shared with me a rough paper visualization of Pete’s work created during a Magnum Foundation workshop:
Over several meetings, I delved into Pete’s work and the rough paper visualization Kate and Mark had created. It quickly became apparent that one of the main challenges of the project was the overwhelming amount of content available to showcase on the website. Throughout the project process, I worked closely with Kate and Mark to extract what was most important from the content to provide both a holistic overview, but also allow users the opportunity to drill down into the content to learn more.
During the design phase, I presented Bloomberg’s timeline visualization of Hillary Clinton’s career to Kate and Mark as one potential solution on how to visualize the content. Kate and Mark loved this idea as the split two-column design would allow us to showcase to users both Pete’s creative process in one column juxtaposed against the results and learning takeaways in the second column.
With the design inspiration, content strategy and branding outlined, I created initial wireframes of the site using Pete’s content focusing mainly on the visualization of Pete Pin’s work.
Header Slideshow and Introduction
Timeline Visualization
After reviewing the designs with Kate and Mark, and incorporating their feedback, I built a prototype website of the project using HTML/CSS and Twitter Bootstrap. With the demo site came the opportunity to showcase different user interactions.
User Interaction: Locked Menu Bar
To help users understand their position throughout the timeline, a menu with the year is kept locked at the top of the visualization as the user scrolls through the visualization.
User Interaction: Scrolling Content Fade
To encourage the user’s to scroll through the site and present the content in a linear maner, previous content fades out as new content appears.
Magnum Foundation Symposium
Participatory Playbook was presented during the Magnum Foundation’s Annual Symposium in November of 2015 at the New School in New York City to hundreds of attendees, and a print newspaper featuring the timeline visualization was distributed to all attendees.
