I also had to create an HTML landing page users would be taken to after clicking through the email.

Below is the main graphic I created.  Click on the links above to view copies I’m hosting.

It should be pretty self-explanatory.  I have the four icons/badges at the top with the thought food producers would start making foods that would meet those parameters so they could brand their products with the most badges.  The ingredients list is at the top–organic ingredients are green and italicized, bad ingredients are bolded.  The next section uses a little bit of data visualization and color coding with an easy to read grid below.  The grid places the emphasis on the number/amount.  And at the bottom is a representation of where the food falls on the glycemic index.

I had two options, a skateboarding shoe company and a women’s clothing company.  I was leaning toward the skateboarding shoe company and decided to commit to it.  I figured if I end up working for them, I wouldn’t get to choose the clients I work for.

Below is what I came up with after about a day’s worth of work.  As I designed it, I kept the word ‘mobile’ in mind.  I feel like this design could look good on a computer screen or a mobile phone screen.  I pulled the images from Google as placeholder images.  Otherwise, everything is my work.

This post is to show the work that went into my capstone.  A lot of screenshots.

Sources:

The above screenshots are of highway statistics.

I compiled data from the Federal Highway Statistics reports

http://www.fhwa.dot.gov/policyinformation/statistics.cfm

The above screenshots of data I collected on warehouse style retail stores.

I was able to find out square footage of the biggest and most common warehouse style retail stores in North Carolina.  Then taking that square footage and multiplying it by the number of stores in North Carolina, I was able to find the total square footage for each retail chain.

Parking lot sizes were an important component of determining the total footprint, statewide, for the retail chains.  With a distance measuring wheel, I measured parking lots of area warehouse style retail stores.  I would walk the length and width of parking lots in front of the retail stores.  I measured three parking lots for each type of store and then averaged those three measurements to get a general idea of parking lot sizes.

I conducted a usability test of my infographics.  I created static and interactive infographics and put them into basic websites.  I then had a class of 32 undergrads go to the websites and fill out a paper questionnaire in response to each infographic.

Here are the websites:

http://student.elon.edu/bmu/versionone/

http://student.elon.edu/bmu/versiontwo/

With any sort of information design, logical, hierarchical, easy to understand information presentation is a must.  Print designers have been doing this for years: tables, ledgers, bar charts, pie charts and, the beloved, venn diagram–just to hit the highlights.  Any sort of non-prose information can fall into this category of ‘designed’ information.  We think of information design and infographics as a recent phenomena, but it goes way back; as long as we’ve been assembling information without the traditional subject, verb, object model.  Merchants needing to keep inventory, cartographers making a map, stone cutters telling a story on a monument.  They all had to rely on something more intuitive.

Information design is all about guiding the viewer’s eye around that piece of media.  Different fonts, different sized fonts, the placement of text and non-text elements, something as simple as a thin line, these are all tools an information designer uses to logically tell the story of the data they’re working with.  We all understand this–top to bottom, left to right, bigger fonts to smaller fonts, lines separate or guide, color to emphasize, &c.

This all still applies to interactive infographics.  So if an interactive infographic doesn’t adhere to the these conventions, forget it, it’s useless.  Interactive infographics, sitting on a screen, without any input from the user, should be up to par with a static infographic.  They should tell a story, convey information, be intuitive, all without any input from the user.  The value of interactivity are the additional layers of information that a static infographic could never achieve.  A user can click or hover over an element that’s already presenting information to get even more information.  Visual elements can be animated presenting a visually rich experience.  And like all interactive media, the user is put in the driver’s seat.

Interactive infographics require an even greater sense of hierarchy, intuition and clarity than static.  Elements will move and shift and animate.  The user must always know where he/she is in the infographic.  The minute they get even a little confused, they move on.

It’s a trade off, users can potentially be exponentially more engaged with an interactive infographic than a traditional, static infographic.  But interactive infographics must be flawless in their execution of information design.

And on that note, a parting thought.  Given that interactive infographics must be even more organized and intuitive than static, how do we balance simplicity of design and presentation with complexity and depth of data?

I’d been thinking about incorporating a sprawling urban landscape silhouette somewhere.  Originally I thought it’d go at the bottom of the div that drops down when you click on the About This Project button.  But given how the site will be presented to the user once I add a video clip I’m making in After Effects, I didn’t think many users would see this little bit of artwork I’ve created.

So it’s sitting in the header now.  That might change too.

It’s relatively interesting.  At least for myself.

I think it turned out well.  Wanted to play with whitespace and a little bit of grid design.

*The logos aren’t pixelated on the print version, just this screenshot.

I’m pretty happy with the simplicity.  I just spent an hour debating whether to use League Gothic or Bebas for my font.  Turns out League Gothic is a better display type and Bebas is slightly better for text–slightly larger counters, so easier to read.  I compromised.  I’m going to title all my infographs with League Gothic and use Bebas for everything else.

Just a quick post, have to get back to work.  I’m testing a class of about 30 undergrads to see what their reactions are to static infographics versus interactive infographics.  I’m about done with all the static versions, now I have to make them interactive.  I’ll be neck deep in Flash momentarily.

Thank god for March Madness On Demand!

I can’t say I’ve really stuck to the plan.

So far I’ve caught up on missed episodes of the BBC’s Top Gear, gone to the beach with a buddy and managed a couple trips to the gym.  Not quite as productive as I imagined it.

Today I decided to not be worried about it.  In fact, I got some work done today.  My sleeping schedule is now bang on (pardon the English slang–it’s a result of all the Top Gear).  But most importantly, I’m taking a quick second to chill out before the home stretch of grad school and what will likely be spent as the most stressful, hardest working, most late night filled month and a half of my life.

When I realized this about an hour ago, I got a little scared.

But I’m glad I realized this.  I can be hard on myself.  I sometimes take life a little too seriously.  I can get caught up in my work.  So for me to know and think about how intense the next month and a half will be should help me out immensely.  Amidst job searching, the push to complete my capstone, keeping up with classwork and all the little things that are going to pop up, if I don’t let myself get too caught up in it all, I think I’ll do really well.

So I’ve set a daily mission for myself.  Find and reflect on three things.  1.  Something I can be proud of.  2.  Something I can be thankful for.  3.  Something to laugh at.

If I can find those three things every day, I should be able to keep my head on straight and keep my sanity.

Home stretch of grad school, here we come!