December 7, 2010
With most classes taking place in the evening, many Interaction Design students elect to freelance or work part-time while completing the MFA program. Second-year student Gene Lu shares his experience of applying what he learned in school to beyond the classroom walls, and how graduate students can benefit from working for a startup while in school:

In the summer of 2009, I quit my full-time web designer position at a B2B company and began preparing myself for the inaugural class in MFA Interaction Design at the School of Visual Arts. During that time, a friend asked if I would be interested in working part-time as an interaction designer in a startup company, DramaFever.com, which specialized in streaming Asian media online. With only a few freelance gigs paying my bills at the time, I decided to take the offer. The next thing I knew, like all startups, I was working with a handful of people out of an apartment in NYC.

The MFA program kept me busy. We were learning a ton of new material from some of the best talent in the industry. Halfway through the first semester, things started to click. I realized what I was doing at school applied to my work at DramaFever. Take for example, John Zapolski’s infamous question at our second Strategic Innovation class, “What is your competitive advantage?” For DramaFever, it was the only company in the States that had the licenses to stream specific Asian titles, whereas its competitors were doing it illegally. John’s class taught me how to better analyze companies to determine their probability of success. Strategies such as differentiation through design and fulfilling unmet needs (a majority of DramaFever’s viewers are non-Asian) all rang true, which further convinced me that I made the right decision to work in the startup.

DramaFever staff at the New York Comic Con, where they held a discussion panel on “Asian Entertainment Trends in American Pop Culture.”

Throughout the first semester, I began creating more effective storyboards and workflows for new site features (Fundamentals in Interaction Design); improved visual aesthetics for a better user experience (Communicating Design); and even had a hand in coming up with new features based on feedback from viewers. By the end of the first semester, traffic on DramaFever.com leaped from 3,600 to 11,000 unique visitors per day. Of course, it’s important to note that in addition to design, other factors such as content acquisition and marketing pushed the needle on the traffic.

By the time spring semester rolled around, I had incorporated data visualization to help users better understand their viewing habits on the site (Information Visualization); gained an understanding in decreasing bio-cost to create an improved viewing experience (Design of Systems); started to go through emails for qualitative feedback and data-gathering for persona creation (Research Methods); and paper prototyped a set of new features (Prototyping User Experiences).

As of November 2010, DramaFever has acquired on average, 30,000 unique visitors per day, which means almost a million unique visitors per month with an average of a 16% bounce rate (16 of 100 people have only viewed the homepage and left the site).  Pretty darn good with respect to industry standards.

Some of you may be still wondering why you should work at a startup when going to grad school. I’m sure you have heard of the (lack of) success rate that startups tend to have, but who cares. Due to the volatile nature of startups, they are usually open and/or flexible to new ideas. Being students in an innovative program such as the MFA Interaction Design program, startups offer the opportunity to apply and structure what we’ve learned, outside the classroom walls. And who knows, if the startup does well, you’ll at least be set with a job after graduation.

–Gene Lu, Class of 2011

You can read more about Dramafever’s success at Techcrunch (being published on this site was something we joked about while cramped up in Seung’s apartment early on, but has finally come true!) and at Fast Company.

Copilot Deal Performance Dashboard - Final Design

Copilot is a service that provides restaurants with instant reports on the performance of their past deal campaigns. Earlier this year, I had the opportunity to work with them in designing their first ever online analytics tool. The deal performance tool allows restaurant owners to navigate and compare multiple deal campaigns, which help to better inform them on the effectiveness of each deal leading to smarter decisions in the future.

Sketches
In the preliminary sketches below, I experimented with an overall view of all deals accompanied by small multiples. The purpose here was to provide users with a quick glance of the deal campaign landscape via the main view while the small multiples would give more insight into each campaign.

Copilot Sketch 1.1

Copilot Sketch 1.2

After some helpful feedback from the client, I simplified the dashboard by reducing the amount of data being displayed. In the initial sketches, showing small multiples across all deals for each category didn’t provide much value since they were pretty much the same. The real value here was comparing the deals within each category. To resolve this, the small multiples for each category were pushed into a drop down that would pop up on hover (item 1 in the sketch below).

In the main view, the line graphs were overlaid by bubbles (item 2), which represented the magnitude of each point. This allowed for quick comparisons among a set of deals for a specific day. There were also small multiples below the main view, which compared multiple deals by the week (item 3).

Copilot Sketch 2.1

In the next sketch, there was the idea of locking the filtering menus since the report was originally going to be a long scrolling page. Users would be able to quickly hide/display certain campaigns by unchecking/checking them within the locked menus. We decided to nix the long scrolling page later on for the sake of simplicity, which meant no more fixed menus.

Copilot Sketch 2.2

Wireframes
After getting the okay on the second set of sketches, I had a general idea as to how this experience was going to be. To be honest, I felt a bit unsettled because of all the moving parts, which was why I quickly moved into clickable wireframes. As a side note, depending on the project, I sometimes pepper my wireframes with clickable hotspots in parallel with the wireframing process itself.

The following prototype was my first approach on wireframing the dashboard. You’ll notice that the navigation repeats itself halfway down the page. This was a rough replication of what the scrolling experience would be like.

Tip: If you’re creating clickable prototypes, it’s a good idea to highlight the areas that are clickable, in this case, with yellow circles.

Copilot Prototype Version 1

After testing the initial prototype with some users, some things were a bit unclear, e.g. the hover states of the three items under “General Stats”. There was also the concern of the overwhelming amount of data that was presented to the user as they scrolled down the page. With these and other additional problems in mind, the wireframes were updated to the following.

Copilot Prototype Version 2

Final Designs
Once wireframes and flows were approved, I threw on my designer cap. At the time, several months of straight wireframing at my full-time gig had caused some visual design atrophy, but fortunately, I was able to regain my design vision. You’ll sort of notice this as the designs progress in the mockups below.

The following was the first design pass at the main page. This was a direct translation from the wireframes and I was more or less disappointed with how it looked. The variety of navigation at the top was just too confusing.

Copilot Design Version 1

This was a slightly better, but the top navigation was still a bit ambiguous. The navigation didn’t really look like it contained buttons and although the hierarchy was correct, it wasn’t apparent.

Copilot Design Version 2

The design below addressed a lot of the issues from version 2, e.g. navigation buttons looking like links rather than buttons. Another issue that came up was that the checkboxes in the legend didn’t really look like checkboxes. I was probably trying to be a bit too clever here.

Copilot Design Version 3

Alas, final designs!

In the following mockups, you’ll notice that the big number section moved up above the navigation. This decision was made because the client wanted to provide users with a way to quickly get an overview of the general stats across all pages, e.g. redemption, gross revenue, and covers. In doing so, users would be able to view the rest of the data in context with these general stats.

Copilot Final Design

Copilot Final Design

Copilot Final Design

That’s it folks. You can check out this and other Copilot products by signing up over at Copilot.com.

Role
Interaction/Visual Designer: Gene Lu

In recent years, there have been many ways to quickly prototype an iOS app. The best prototyping tool that I’ve seen so far that doesn’t require any programming has been a combination of Adobe Fireworks and a PHP/Javascript library called TAP. Created by the folks at UNITiD, TAP allows you to mimic iOS transitions by simply filling out the “alt” field of hotspots (within your Fireworks file) with the type of transition that you would like to see after tapping on that hotspot. Fortunately, UNITiD has already put together a thorough tutorial on how to use TAP.

So what exactly is this post about then?

As implied by the title, this post is going to explain how we can quickly load our prototypes, which are stored locally on our computers, onto our iPhones.

Before diving into details, here’s a quick overview of what’s ahead:

• Install and launch MAMP onto your computer.
• Download the TAP folder and extract it into your MAMP folder.
• Export your Firework files as .lbi into the TAP folder.
• Compile the prototype.
• Create an ad hoc connection between your computer and iPhone.
• Access the prototype on your iPhone via an ad hoc connection.

Install and Launch MAMP
If you’re unfamiliar with MAMP, it is an application that runs a web server on your computer. And? And with a server on your computer, you can run the PHP and javascript that comes with the TAP files that you’re about to download, but first, install and launch MAMP.

Download TAP (Touch Application Prototypes)
Head over to UNITiD’s site and download the latest version of TAP. Once you’ve successfully downloaded the file, extract it (labeled tapv0.46 by default, but feel free to rename) and place it into your htdocs folder, which can be found in your MAMP directory.

Link and Export Your Fireworks File as .lbi
Link your pages together in Fireworks with the hotspot tool along with their corresponding iOS transitions. If you’re unclear with this part, refer to UNITiD’s site as they have provided an in-depth tutorial on how to do this.

Once your file is ready, export your Fireworks file as a .lbi file into the library folder, which can be found in your extracted TAP folder, with the following export settings:

Export settings when exporting as .lbi

Compile the Prototype
Before accessing your prototype, you need to compile the .lbi files that you’ve loaded into your htdocs folder. Also, make sure MAMP is running. Open a new web browser window and navigate to http://localhost:8888/tapv0.46/build/. This page basically lets you configure several settings for the prototype, but for now, let’s click on BUILD in the upper right corner. Once you’ve successfully compiled your prototype, it should look something like this.

Successful builds look something like this. If you have red errors, something's wrong.

Creating a network

Create an Ad Hoc Connection
So now that you have a web server running on your computer, we need to access your prototype via your iPhone. Since there’s currently no connection between the two devices, we need to set up an ad hoc network. Click on the network status symbol in the upper right and click on Create Network. You’ll have the option to edit your computer name and select a channel. Let’s ignore these for now and click on OK.

Now grab your iPhone and go to Settings > Wi-Fi and select the network with your computer name. If all things go well, you will be connected to your computer via your iPhone.

Accessing Your Prototype on Your iPhone
In order to access the prototype on your computer via your iPhone, first find out the IP address of your computer. You can do this by going to Network Preferences > Advanced > TCP/IP. The IP address for your computer can be found next to IPv4 Address.

With your IP address handy, head back over to your iPhone and enter in the following URL (the folder name may vary depending on whether or not you renamed tapv0.46 to something else)  http://ipAddressForYourComputer:8888/tapv0.46. You’ll be prompted to add the prototype to your home screen.

Adding your prototype to your home screen

And voila, you’re done!

Wrapping It Up
One of the great things about having the prototype on your local machine is that it’s a lot quicker to update files, which means more iterations over a given amount of time. Also, it doesn’t require you to gobble up server space elsewhere.

If you would like to share your prototype with others, upload your folder, e.g. tapv0.46, onto the web and send them the link, e.g. http://yourDomain.com/tapv0.46 (or whatever you’ve named your folder). Similar to the step above, they will be prompted to add the prototype to their home screen.

As a parting gift, I’ve created a quick one pager below summarizing the key items above. Happy prototyping!

Summarizing how it all works

Sketches
If you are unfamiliar with the system, it is composed of two different sleeves that go into the shoe. Each sleeve is built for a certain type of gameplay. You can also further customize the sleeves themselves by mixing and matching the components of each sleeve via Nike ID. The following sketches show some of my thinking before diving into wireframes.

Kobe VII System Sketch V1

Kobe VII System Sketch V2

Wireframes
Since this was a very shallow ID project, I went with static wireframes [PDF]. The rest of the content that was placed below the top portion of the site were content modules previously developed for other shoes, which I also worked on, e.g. Lebron 9, KD IV, etc.

Kobe VII Wireframes - PDF

To better demonstrate what happens when a user clicks on either “Attack Strong” or “Attack Fast”, I created a short video demoing the interaction using Keynote.

Kobe VII Demo (.mov)

Final Design

Kobe VII System Final Design

Team
Art Director: Chris Jovanov
Copywriter: Brad Soulas
Interaction Designer: Gene Lu
Producer: John Mullin

Ecosystem Diagram
In order to help our team and client better understand where our opportunities were within the Gear Up experience, I broke the system down based on the following groups, e.g. retail, 3rd party, social, inspiration, mobile, and apps. Our goal was to evolve Gear Up users from being unaware (browsing the site) to being proactive (creating their own collections) using the Gear Up platform.

Gear Up Ecosystem Diagram Sketch

Gear Up Ecosystem Diagram

Interactive Wireframes
As mentioned, I was new at R/GA, this was my first project, and we were working with a new client on Nike’s side. I saw this as an opportunity to improve on R/GA’s traditional process of showing static wireframes via PDF decks. Instead of cranking out wireframes in InDesign, I stuck with Adobe Fireworks, which was specifically made for web prototyping.

After presenting the first set of clickable wireframes to our new client, they were on board with our process. Over the next couple of months, we went through multiple iterations of clickable wireframes. Because of this change in process, our clients had a better understanding of what was being presented, which made the conversations between us and the client a lot more efficient. On the internal side, the prototypes helped to manage expectations between creatives and developers. What would have been a yearlong project turned into a project that launched several months later  in late October.

The following set of wireframes was the last set presented to the client before moving into visual design.

Gear Up Interactive Wireframes

More Prototypes
After we moved into visuals, I helped the creatives better convey their visual story by creating small, simple prototypes using javascript and HTML. Again, these prototypes helped to build up the relationship between us and our client.

The following prototype briefly demonstrates a simple interaction between the item tray to the right and the content in the middle.

Gear Up Mini-Prototype

Wrapping It Up

Nike Gear Up Running

Gear Up went live October 21, 2011 across Nike’s multiple channels. Sites that are currently active are as follows:

• Nike Gear Up Football
• Nike Gear Up Soccer
• Nike Gear Up Running

Team
Copywriter: Devin Heatley
Visual Designers: Rasmus Wangelin, Mariola Bruszewska
Interaction Designers: Ryan Scott Tandy, Gene Lu
Producers: Charles Lano, Jessica Cheung

SKETCHING
As always, I started off with a sketch of what I wanted to build using a few sheets of blank Munny templates.

Harry Potter? Nah. Dumbledore? Yeah!

WIRE AND CODE
Afterwards, I moved onto building the circuit, which consisted of the following:

• 1 Arduino Duemilanove
• 4 green 5mm LEDs (in the photo below, imagine the fourth one being there)
• 1 white 10mm LED
• 1 10KΩ resistor
• 1 momentary switch
• 1 5mm phototransistor

This part of the process required me to move back and forth between wiring up the circuit and coding in Arduino.

Dumbledore's Brain on Arduino

Diagrams of the different sub-circuits within Dumbledore's brain

The link to the code is below. Also, keep in mind I had like a day to do this so be gentle! With that said, I do encourage you to pass along any changes or suggestions in the comments section below.

Dumbleduino V1.0 Code

After running through the code, I switched back to sketching on the Munny doll. This gave me a better idea as to where I’ll be cutting and drilling holes to fit all of the necessary components.

Pencil Tatoos

Making space for the Arduino

TIP: The great thing about slicing the head in half was that I reused the top of the head to shape Dumbledore’s hat later on.

In the next photo, I drilled four holes for the four green LEDs. These LEDs would eventually be used to inform users about the current timer the night light is set to.

Drilling holes for the LEDs

SCULPTING
I was so inspired by Sera’s use of Sculpey that I decided to take a stab at it myself, but before moving ahead, what is Sculpey? Sculpey is a clay that you can mold to your liking. Once you have your form figured out, toss it into the oven and let it cook for 15 minutes for every 1/4 inch of clay (I think that’s what the instructions said) at 275°F.

Being that I was new to sculpting, I started off with the easiest part, Dumbledore’s arm pads.

Arm pads

I realized that I also had to install some of the components, e.g. LEDs and some wiring, into the body before baking. Fortunately, I did some testing and the LEDs can definitely withstand 15 minutes of 275°F.

The LED time preset indicators

Dumbledore's back side with LED indicators and toggle button

Baking Dumbledore's hat

Tanning booth

Done!

The beard that you see above was a part of the accessories that came with the Munny doll. For a moment, I was relieved that I didn’t have to construct a beard from scratch, but after a while, it just didn’t seem quite right. According to a friend of mine, the beard was just a tad wide. I abandoned the premade accessory and decided to roll my own beard, literally.

After an hour or so of playing with clay and making beards, I discovered that the best way to approach this was to roll each section of the beard at a time and then place it onto the face. Once I had set the clay, I flattened it so that the beard started to fill up the surface.

Section 1: Hulk Hogan

Section 2: "HURRRRR"

Flattening out the rolls

I also included some wizard-like eyebrows, wapow!

PAINTING
After I finished up all the necessary sculpting and baking, I let it solidify overnight and started painting the next day. The paints that I used was a combination of Liquitex (Soft Body) and DecoColor Acrylic Paint marker.

Do not do small details at 3AM and yes, that's a toothbrush in a champagne glass

Face paint

Gold symbols and tassels!

Helping hands help with hands

While painting, I also had to figure out how to set the Arduino properly into the head. Using a container left over from the X-Men costumes constructed from last Halloween, I created a platform that propped the Arduino up at an angle so that the USB cord could plug in from the bottom half of the head.

Plastic container found at the 99cent store

Powered by Arduino

Here’s a list of painting tips that I think might be helpful if you decide to do your own doll.

• Helping hands – I highly recommend the thing in the photograph above that looks like it belongs in a science lab. Instead of your shakey left hand holding something up as you paint with your right hand (or vice versa), helping hands helps to hold things steady.
• Always have a towel handy – When painting, always gently smudge your brush against a piece of towel after dipping it into paint. It prevents  excessive paint from pooling up on the surface.
• Paint in layers – The first layer that you apply will not always come out looking awesome. Let the paint dry a little and then apply additional layers.

WRAPPING IT UP
I left the hardest part last, which was getting the wires from the Arduino board through the body and into the right arm where the wand would be. The wires would then go through the arm and connect to two contact points that were embedded inside the hand. In order to accomplish this, it required additional holes in the arm so that I was able to hook the wires through. It also required a ton of patience.

As for the contact points on the hand, I made two holes on the palm of the hand using an Exacto knife. I then connected the wires to two pieces of tin, which I managed to intricately wrap around the wires. In order to get the contact points (tin) to stay in the holes, I stuffed some leftover Sculpey into the holes and placed the contact points on top. I then used a hair dryer to heat up the contact points (approximately 30 minutes) until the Sculpey hardened.

And lastly, the wand or some of you may call it, the wrench.

In order to connect this to the rest of the doll, I had to have two contact points, which would connect with the corresponding points on the doll’s hand. I carved out the bottom portion of the wand so that I was able to fit two tin brackets, one on each side. I then connected the brackets to the LED via two narrow strips of tin.

LED, tin, wand

Connecting the bracket to the LED

Voila! The Golden Wand of Illumination

DUMBLEDORE AND THE GOLDEN WAND OF ILLUMINATION
And finally, the finished product!

Dumbledore and the Golden Wand of Illumination

Dumbledore's timer preset controls

Illuminate!

After completing the doll, what intrigued me the most was the separation of the wand from the body. By keeping the construction of the wand to something as simple as two contact points and an LED, a whole slew of wands can be created for a single doll to wield. This opens up an opportunity for people, specifically DIYers, to further customize their toys without having to wait on toy manufacturers to create additional accessories. Hopefully we get to see some of this within the coming years as customization takes hold of the toy market.

During my early childhood, I remember him making household repairs using whatever he was able to muster out of the family toolbox. He referred to these pieces as the ‘cuffah.’ I’m not exactly sure if it was a Chinese word or some Chinglish that he managed to hack together, but the cuffah represented the missing piece to the puzzle. These pieces were usually spare parts that he collected over time, ranging from nuts and bolts to bigger pieces like brackets and unused caulking guns.

Halloween 2010 (last year)
I managed to piece together a Mega Man costume, which involved a Japanese lantern (cuffah!), a disassembled LED flashlight, a snowboarding helmet, and of course, blue tights. My two rommates followed suit, Will as Quick Man and Dave as Zero.

Snowboarding helmet converted to a Mega Man helmet

Mega Man helmet finished!

Me as Mega Man

Who would have ever thought it’d be so much fun to relive your childhood? Besides laughing at each other, we were in our own world, jumping around, blasting our plasma cannons and humming the Mega Man theme song.  People that crossed our paths were also reminded of their early favorite early 90s video game.

“OMG, it’s Mega Man!” Moments later, my brother comes around the street corner, “Oh shit! It’s … the Other Man!” The guy was almost in tears even though he didn’t recognize Will’s character.

Will as Quick Man

Epic Battle - Quick Man vs. Mega Man and Zero (Dave)

Halloween 2011
Building off the fun from last year, Derek Chan and I managed to get together a handful of our friends to go as X-Men characters this Halloween. To help carry on the tradition of hacking from last year, we required one constraint, materials spent on an X-Men costume needed to be under $50.

With a total of eleven X-Men and a Magneto, there was certainly going to be some variation in fidelity of the costumes.  To tie us all together as one cohesive group, I decided to build out the X-Men Communicators for all eleven of us.

The communicator is a simple circuit, which consists of the following:

• 10mm red LED
• 2032 coin battery (battery holder, optional, but helpful)
• a switch
• red cellophane
• foil
• Scotch tape cylindrical plastic container

How to wire the X-Men communicator

To house the entire setup, I used the plastic cartons that came with the electrical tape. I lined the inside with foil and covered the outside with red cellophane, which enhanced the red glow of the communicators.

Tip #1: When making this is to point the LED downwards towards the foil surface for maximum reflection. I heard there are other ways of making the LED shine even brighter, but I’ll leave that up to you guys.

Tip #2: Never buy 2032 batteries from a regular store like CVS, Blockbuster, etc (2 batteries for ~$4). Go to your local 99cent store and get 5 for ~$1.29.

Scotch eletrical tape container makes for great X-Men communicator shells

Not as clean as the diagram above made it out to be. With that said, I highly recommend the battery holder.

Functioning X-Men communicators!

After making several communicators, I got bored and decided to help Derek make his optic blaster. Optic what? It’s the visor that Cyclops wears that prevents him from taking everything down when he opens his eyes.

The parts required for this consisted of the following:

• a pair of Jersey Shore sunglasses that he picked up from St. Mark’s ($7)
• 2 10mm red LEDs
• 2 2032 batteries
• 2 2032 battery holders
• tiny momentary switch
• red cellophane

Disclaimer: I’m not going to go into much detail about this, but if you know basic electrical circuits, this should be cake. Else, if you know a friend that knows basic electrical circuit, you will probably have to get them cake.

Wiring the glasses ala whiteboard

Derek showing off his new specs

Red cellophane curled over the lens area

In order to get the cellophane to curl around the lens, cut a slit in the center of the cellophane. This will allow it to bend. This will create some space on the sides for the LEDs.

Make way for battery holders

Next, melt holes into the side of the glasses so that they match up with the back side of the battery holder. Also make sure to have a hole for the wire coming from the momentary switch, which will be placed against the battery holder.

Tip #3: Create a template of where the pegs on the backside of the battery holder are located. Then map the pegs onto the side of the glasses.

Battery holder mounted onto glasses

Next, do the same thing to the other side minus the hole for the momentary switch since you already did it to one side.

Tip #4: Hot glue gun works best when mounting plastic pieces together.

Battery mounted alongside the momentary switch

Tip #5: Helping hands (the maniacal lab looking object in the photo below) are super helpful. They help (duh) with keeping wires in place as you solder the night away.

Almost done!

Finally, place the red cellophane back over the opening and you have yourself a pair of sweet looking optic blasters.

Here’s a demo of Derek nerding out with his new pair of blasters.

What's a prototype without some... user testing?

The Finale
Halloween 2011 was a success! All the costumes turned out to be frikkn’ amazing. Here are some pics from that night. Before signing off, I’d like to thank the following people for taking part in this: Wally, Jess, Derek, Jane, Sera, Will, Dave, Chris, Ryan, Vicky, and Shelley! What’s on the plate for next year?

Will as Professor X and CereBro (see what I did there?)

Wally as Gambit with cardboard abs! (photo cred: J. Choo)

Vicky as Jubilee and Jane as Storm (photo cred: J. Kwon)

Dave as Nightcrawler with elf ears made out of band-aids (photo cred: J. Kwon)

"We're like the inverse of each other!" (photo cred: J. Kwon)

X-Men: The 2nd Class (photo cred: J. Kwon)

Overall Strategy
By emphasizing on scale and contextualization of the data provided, we can tell an effective story that informs the public and government on why they should invest in education and how this would boost the overall economy.

Process
Sketching
The ties between education and government are pretty complex. As designers not fully involved in this specific sector, we were limited in our understanding of how the different actors within the system work together. This has both its advantages (not getting drowned in minute details, being able to see ‘out-of-the-box’ to some extent) and disadvantages (possibly missing key points, making the wrong assumptions). With that said, to better understand the system, we mapped the education/government relationship to something we’re familiar with… second-order feedback loops.

What the hell is a second-order feedback loop, you ask?
The second-order feedback loop does two things: 1) It’s basically a system with built-in feedback that informs how close the system is to achieving its goal; 2) and if it’s not meeting its goal, it attempts to change it (stick with us here). In our case, we wanted to map out the economic ripple effects of investing in education. Then we wanted to see if there was a step or goal that needed to be changed to make this system more effective. All of this, we hoped, would be conveyed in our final infographic.

The Role of Wolves in Regulating the Yellowstone Ecosystem (Paul Pangaro & DDO)

Based on a real-world example, the model shows the nested relationships and influences on many levels. Even without any quantitative details, the model is instructive in showing the complexity and interdependencies of the nested system. (Pangaro & Dubberly Design Office)

To map out the second-order feedback loop, we had to first establish the actors within the system.

Initially, we were tempted to personify the actors

After a few rounds of Post-It exercises, we realized that in order to tell a strong story, the actors had to be quantifiable. It would require the “quantitative detail” that the second-order feedback system lacked (shown above in the Yellowstone Ecosystem).

Final Set of Actors within the System

Fortunately, the data set (Education and Economy) provided by the Alliance for Excellent Education had already quantified each of the 8 economic indicators, which were used to project the economic effects of higher graduation rates.

1. Combined annual earnings
2. Investment
3. Spending
4. Tax revenue
5. Home sales
6. Vehicle sales
7. Jobs created
8. GDP

These indicators eventually ended up being the actors within our system. After establishing an overview of the relationship between education and government, we then tied it to the provided data.

2nd Order Feedback Loop Mapped Out

How Storytelling Might Tie in with Data

Data Exploration
Now that we had a better understanding of the overall system, we were ready to dive into the dataset. We spent some time in Processing generating the data into standard bar graphs, then further analyzing those through line graphs. Our initial goal was to explore how the GDP growth breaks down in two ways, by state and by race.

States vs. Population
States with the biggest returns also happened to have among the highest state populations, which leads us to our next point.

GDP Growth by States

Population vs. GDP
Looking at the data in groupings only revealed the obvious (i.e. the bigger the population of a state, the greater the GDP – in most cases). From our perspective, this didn’t really argue for the need for more investment in education in a compelling way.

Race vs. GDP
Ethnic groupings was misleading in terms of scale. From our data output, it looked as though the White, Non-Hispanic and Hispanic groups would yield the most GDP growth. But this is misleading. If the racial groups are broken down to the individual level, it actually shows that Hispanics have higher GDP return on an individual basis, followed by White, Non-Hispanic and with Asian/Pacific Islanders very close behind (a difference of approximately $1000). Our initial graph showed otherwise, positioning Asian/Pacific Islanders near the bottom.

GDP Growth by Race

Basically, when visualizing the economic benefits via groups, our initial research revealed very little insight. Patterns were pretty much consistent and similar across all indicators. If anything, the visualizations were misleading. We were looking for something else… an anomaly or some other revelation that would compellingly argue the case for investing in education.

Given that the scale was deceptive, we decided to visualize the data on the level of an individual. We also hoped that doing so would humanize the story, as its more compelling to relate to the potential of one person than to the potential of the masses.

Bringing It Together
After gathering all the necessary data points, the next and final step was to tell a story. Starting off with a system map that shows the overall economic effects of education, then indicating the current state of education (including how many students are dropping out and who these students are), and finally, what investing in education could yield economically for the US as well as the individual student.

How the Story Flows within the Infographic

This visualization explores the systematic impact of investing in education, including the economic results when no child is left behind. It’s clear that economic benefits are evident for both students and their communities at large.

The Economic Ripple Effect of Investing in Education

Data Sets Used

• National Center for Education Statistics: Common Core of Data
• Education and Economy (Alliance for Excellent Education)
• Education Week: Diplomas Count 2011

Thanks To

• Sera Koo for working with me on this and also contributing to this blog post
• Visualizing.org for putting this challenge together (our entry at Visualizing.org)

Interesting Reads

• No Child Left Behind? Why Schools are Giving High Achievers the Shaft