Cover - Blackout.png

Blackout Poster + Website


Blackout: Lights On, Lights Off


Part 1: The Collaborative Poster

The Project

Visually present the blackout of 2003 through data visualization. The task was to condense a 300 page final report supplemented by articles about the Blackout event, and convey that information through a 20” x 32” poster in a visually coherent way.

My Role

Research, layout, design and illustrations. Designed and created from beginning to end in collaboration with Avvalprit Kaur.


Research and Extrapolation

Reading through official reports and news articles, and aligning information, we sorted out the most significant copy and flow of information needed for the poster. It was clear we needed to include two things: how electricity and transmission lines work and how the blackout event unfolded.


Initial Drafts

Through our initial data collection and organization, we quickly realized that there was too much layering and clutter going on within the visualization. The story is complex and data-heavy.


Final Revisions

Through further revisions and critiques, we decided on a layout that would divide the poster into two essential parts.

There was less overlapping of information to declutter the information.



Part 2: Website Adaptation

The Project

Translate this 20” x 32” print poster into a responsive website. Adapted from the blackout poster, I took on a web development project to translate the collaborative poster into a website.

My Role

Wireframing, UI/UX design, web development (HTML/CSS/Javascript). Using Adobe Dreamweaver and CSS/HTML/Javascript, I developed this site to be responsive in laptop and mobile view.



I first explored different methods of laying out how the information would flow on a web platform. I wanted to explore how I could translate a print product into a different context and what a website platform might make possible for the reading flow of information.


The Blackout Website

The final website features a fixed pull out menu that acts as a “power FAQ” section, explaining how electricity works. This allows viewers to reference this information while reading about the blackout event itself on the homepage.


Mobile View

When accessed through a mobile device, the browser redirects you to the mobile code of the site, reformatted to a single column. The lightbulb pull-out expands across the screen as opposed to partial coverage of the screen.