Features

The main conceptual and visual device is a constellation of connected location points that roughly correspond to the geography of the New York State region and New York City.

Users have multiple ways to interact with the constellation points and choose how they progress through each story.

cursor rolls over various Correctional Facility location points on a map of New York state: Coxsackie, Eastern, and Woodbourne, and additional boxes of factual information appears near each facility name. Hovering over a prison location reveals various BPI course and student statistics. Within a graphic of connected nodes representing locations of Woodbourne, Bard College, Elmira, Fishkill, Coxsackie, and Eastern, the cursor hovers over Eastern and then the following story points turn red: 1. Admission, 2. BA Transfer, and 3. BA Coursework Hovering over constellation location points allows for navigation and explore key moments of a students story. cursor hovers over red numbered dots on a gray timeline with years 2004, 2006, and 2008 below it A timeline allows for a more linear, chronological exploration, with numbers corresponding to the list under each location. cursor hovers over student names "Darren M.; Justice Advocate", "Erica M.; Community Advocate", "Richard G.; Public Health Professional". Choosing a different student enables users to explore and interact with the corresponding story points.

The bottom UI features two forms of navigation: on the left, menu buttons allow the user to switch between the three content sections (Campuses, College, and Reentry); on the right, slide show controls enable navigation through the story points within each section. Navigation UI below blurry map shows buttons for Campuses, College, Reentry, Previous, Play Button, Next, and Replay Section, all with corresponding icons

Research

The project involved extensive collaborative research. Over the course of the project, I gathered inspiration, edited content, mapped out user flow diagrams, and created sketches.

large white sheet of paper with post-it notes and image clips of various infographics Starting visual research was an active, physical process. Notes, sketches, and references helped me begin to organize the stories to tell and strategies for telling them.

illustrations of maps and colored information boxes I explored a few ways to show the national reach and influence of BPI’s education model, although this section of content was eventually dropped from the final graphic. Before we had any detailed data on students and their interactions with BPI, I sketched out how timelines, maps, icons, and the movement of fictional students from campuses to various boroughs in New York may work together with user interaction to tell a full story.

Spreadsheet with zooming in on some sections showing character limits and naming system. Once the client had provided several student timelines, I organized and edited the data for each event into distinct content areas that would used to make the overall graphic. I also initiated conversations with both the developers and animators to iron out and narrow down options for the user experience.

User flow diagram showing boxes and arrows flowing from Campus Map to College Student 1 and Reentry Student 1. I translated these conversations and meetings into detailed user flow maps so that all team members understood and could visualize how the graphic would need to work.

Production Process

My main role was to expand wireframes and storyboards into a working prototype and eventually the main artwork files.

using InVision to build the project We used InVision to test out the concept and present it to the client as a proof of concept.

screens in Illustrator Later, I created a detailed style guide as well as artwork for every story point to aid the digital animators and developers in creating the final product to precise specifications.

style guide illustrator sketches

Other Roles

As part of a small team that was juggling multiple clients and projects, I had to step into other roles over the course of the project in order to keep it moving on the right track.

gantt chart of the project. Additional roles included project management (I used a free tool called Gantt Project)

Document showing user testing question script. I also drafted user testing documentation. Although it is not my area of expertise, I consulted Erika Hall’s Just Enough Research as a good starting point.

Applications

The final graphic currently lives on BPI’s website. In the course of developing and conceptualizing the graphic, both our team and the client started to realize just how powerful of a visual aid something like this could be. In the future, we envision the graphic living in multiple places, devices, and contexts. It can be expanded in functionality and depth of content to present a truly dynamic view of the impact of BPI and its alumni.

Landing page describing the infographic, showing it embedded, and providing some contextual statistics. Concept for a landing page.

Alumni presenting in front of an audience with the infographic on the presentation screen behind them Concept: BPI Alumni and staff could use the graphic in presentions. hands hold an iPad with the infographic on it. Concept: Target specific BPI followers, donors, or academics through design and distribution of a mobile or tablet version.

Next Steps

In addition to various presentation formats for the graphic, I have some interesting questions and features I hope to pursue in the future: How can we add more students as needed? What can a content management system look like in order to modify, add, or delete data points? Can we fully integrate other forms of media (audio interviews, video clips, podcasts, etc.) to enhance the experience for viewers?