Infographics have exploded over the past few years. It’s a great way to visually and simply explain sometimes complex data to a general audience. My own personal brand of infographics is more on the data visualization side, and thankfully coincides with TrueCar, my employer. I believe that data should be presented in a beautiful and sophisticated way. It should be easy to grok and doesn’t have to be cutesy.
When the latest epic infographic™ project landed on my desk, I started where I always start—I looked at the data. What inspired me was seeing this color-scaled chart of the smartest day of the year to buy. Just by looking at the color I quickly understood the patterns: end of the month, December is the best month, and January 1 is the best day.
From there I looked for inspiration on cool calendar designs. The notion of color scaling was present in a few examples, and I also really appreciated the circular format in some. Years are cycles, plus a circle is an inherent shape in cars (tires, steering wheel, speedometer, knobs). My search led me to this lovely piece by Martin Oberhaeuser. With much respect to his design, I used it as a jumping off point to transform the above table from Excel into something hopefully more elegant.
Using TrueCar’s color palette of a couple of blues, I made a color scale—lighter being better, and orange being the best—and inserted the actual percentage value within each cell.
For the chart to show the best month to buy, I combined a calendar and a column graph. And it validates the long-held belief that December is the best month of the year to buy a new car.
The most helpful data I thought we had was the one about the smartest month to buy a particular kind of car. While December remains the best overall month, if you’re looking to buy a subcompact, you should buy in June. Since I had a circular table already I decided to leave this one pretty straightforward.
Last, but not least, is the best day of the week to buy a car. There’s really only seven data points here so presenting the data simply seemed the way to go.
I actually designed the infographic as one long piece first, and then broke it into smaller graphics for social media sharing. As a whole piece I think it works really well. There’s a story that weaves it all together. I hope you enjoy it!
At TrueCar, data is our lifeblood and visualizing that data in a compelling way is important. Finding that compelling way takes time. We’ve produced a number of infographics recently. Some have been more involved than others, but all as a way to find our voice in telling a story through data.
This project was initiated because Fiat is going to spin off Ferrari as a separate company. They’ve owned the brand for over 40 years. So we wondered how long other exotic makes have been owned? The CorpComm team—my internal client—was thinking a simple chart showing the years of ownership. It could have probably been designed easily and in a few hours. But I saw potential in telling a richer story and producing a cooler artifact while still getting the point across. I didn’t quite know what form the final graphic would take. It warranted some research, inspiration, and exploration.
While the team did provide me with some data, I decided to look into the histories of all these makes. Just to get a feel for the material. I ended up spending a full day in the bowels of Wikipedia and other exotic car enthusiast sites tracking down each time a brand changed hands or changed names. What I found was a sometimes—in the case of many of the British brands—fascinating spaghetti of bankruptcies, auctions, nationalizations, and spin-offs. This added much more depth to the pure numbers that I was given, and a timeline form started to wander into my head.
We all know what a great infographic looks like. Stepping back for a moment, I’m using infographic to mean an image that shows a dataset. That data could be numbers, a decision flowchart, or lists, etc. And the visual could be a simple chart, an illustrative poster, or something more complex. Ultimately a great infographic tells the story of the data in a beautiful way.
I recalled seeing an infographic about the history of automobile companies a few years ago. It’s called “The Genealogy of Automobile Companies” and was expertly designed by Larry Gormley. He presents the information about the explosion of auto startups in the early 20th century and how over time it all starts to consolidate. It’s a classic.
My dataset is different because it’s only about foreign exotic makes, but it tells a similar story of consolidation. Additionally the story is also about the changing of owners. I didn’t want to repeat the same form and really needed to show the information in a style consistent with TrueCar’s high-tech brand.
I’ve always admired the infographics from the New York Times. Their graphics team has done a tremendous job of using a variety of techniques to bring life to the data. They have no visual style per se, yet their signature is clarity.
I also flipped through the massive tome called Information Graphics by Sandra Rendgen. While ultimately I didn’t find the perfect form in the book for my data, it certainly opened my eyes to the possibilities.
I began to explore different formats. I knew my dataset and knew that my goal was to show the winding paths that each of these car makes took to get where they are today. Like abandoned orphans bouncing from foster home to foster home, many of these brands’ lineages tell stories of rich men, fast cars, and terribly stupid financial decisions. What form could tell that story?
When I thought more about the data, it occurred to me that this was really about ancestry—about who begot whom. So I looked into examples of family trees and genealogy fans.
The data and the resulting infographic didn’t turn out to be a very screen-friendly. Instead it is a data-intensive multi-layered intricate 24″ x 36″ printed poster meant to be looked at up close.
Time is indicated by the radial lines, from 1906—when Rolls-Royce started—through 2014. Each slice of the semi-circle indicates a brand. The outside starting color is their brand color with a watermark of their original logo. Each change in color within each slice indicates change of ownership or name. As you can see with Maserati and Ferrari, Bentley and Rolls-Royce, and Land Rover and Jaguar, sometimes owners are shared. Ultimately—with the sole exception of Aston Martin—all marques lead to larger corporate parents like Volkswagen AG today who own a multitude of these makes under one entity.
In the end, I don’t think the final solution would have come about had I not gone through the process and spent time getting immersed in the data, looking for design inspiration, and exploring the possibilities. It’s the industry-tested universal design process. But spending a full day getting lost in the history of all these car makes helped me synthesize the data into something bigger. And then spending time to look at hundreds of other infographics helped me break out of any preconceived design notions. The first thought is often wrong and lazy. Finally in sketching, I was able to land on something compelling.
Having spent the last seven years of my career as a creative director, my job is usually more about ensuring my designers are set up to do their best work. Therefore it’s a rare opportunity to design something from start to finish and to obsess over the little details so completely.
I must also mention that having an open-minded client helped a lot too. The CorpComm team at TrueCar gave me a starting point and a long leash.
It was a fun ride and I’m proud of the result.
A Short Note about Craft
The final infographic was worked on over a number of weeks. After finishing the initial design—which was a focused weeklong marathon—I spent a lot of time tweaking the colors for screen and for print. I also had to completely flatten my Adobe Illustrator file to get rid of anti-aliasing artifacts. I originally built the file with a series of masks—one for each slice or marque. But the adjacency of the colors and paths wreaked havoc on the anti-aliasing algorithm and it just looked bad. I knew it would be fine printed, but it also needed to look good on-screen.
Yesterday Lunar/Theory (my partner David and I) launched version 2.0 of our iPad app DesignScene. Take a look at the trailer:
I’ll write more about it in the coming days. Meanwhile, read this post on our blog about it.
I’ve been working behind the scenes on a little thing called the RE:DESIGN Conference. It is a whole series of events around Design and the format really encourages intimate conversations led by session leaders.
The first event is themed around Creative Directors and I’ve had the privilege of trying to get many designers whose work I’ve long admired and many friends, colleagues and mentors to come speak at the conference.
Here is a quick rundown of those I know, and how I know them, arranged in autobiographical order:
- Lawrence Azerrad was in my class at California College of Arts & Crafts (CCAC, now California College of the Arts (CCA)). I am envious that he has the pleasure of working with my favorite contemporary band Wilco.
- Mark Fox was my one of my teachers at CCAC and I interned for him. A lot of what I know about logos and symbols I learned from him.
- Neal Zimmermann was one of my bosses in my first full-time design job. Always funny, he would push us junior designers to kern five-letter words for a week, earning him the nickname of “The Kernel.”
- I worked with both Angie Wang and Eric Heiman at Zimmermann Crowe Design (ZCD) and they have both since become inspirational educators and design practitioners.
- Colleen Stokes was my boss at USWeb/CKS (which became marchFIRST). Her designs were always impeccable and she eventually moved to New York to work for a number of style and fashion brands.
- Adam Connelly and I met at marchFIRST (formerly USWeb/CKS, formerly CKS) while working on the Sega account. We would cross paths again at Apple and Razorfish. His wealth of indie music knowledge is amazing.
- Shawn Hazen and I worked at Apple together. Although we were in different groups within Graphic Design, we were both part of the growing team of highly-skilled designers cranking out layouts with Apple Myriad on white.
- I met both Cinthia Wen and Christopher Simmons while working on a side AIGA/SF project dubbed “The Pub Project.” Both are CCA alumni and both are brilliant.
- Dan Buczaczer is the likely outcast of the bunch. He is not a designer, but he and his company are incredibly creative when it comes to innovative ways to get one’s message out. He is also my neighbor in Oakland.
- Dave McClain and I are counterparts at LEVEL Studios. We also both previously worked for Razorfish (formerly Avenue A | Razorfish, formerly SBI.Razorfish, formerly SBI and Company, formerly marchFIRST). Don’t remind him that the Oakland Raiders beat the Denver Broncos at Denver, in their 2011 season opener.
I cannot wait to see all these people in Palm Springs in November. I think it will prove to be a very fun, interesting and inspiring time. More info at the RE:DESIGN website.
I’m really proud to announce that DesignScene for iPad has shipped today. From idea to release, it’s been about a year in the making. Here’s a little trailer I made in case you missed it:
I’ll be frank and say that this app was really made for me. Like many designers I spend a lot of my time going from website to website looking at stuff and reading up on trends. I eventually started using RSS feeds but even my feeds got unwieldy. I dreaded opening up Google Reader and seeing “1000+” unread items.
When Apple announced the iPad 12 months ago it struck me that this device was the perfect thing to visually browse through all of my design-related feeds. It didn’t take me too long to sketch and comp up something.
Of course I am just a designer and had zero Objective-C skills whatsoever. I can do simple HTML, CSS and even PHP, but real programming languages elude me. I knew I had to find a development partner. Problem is that there are tons of people like me with an idea, while developers are in high demand. I asked my network of friends and contacts, posted on Craigslist and BuildItWithMe but didn’t really find anyone. I had a couple of meetings with friends of friends who were iPhone developers but they had their own objectives. Finally I got in touch with an old friend who was working on his first iPhone app.
I presented my idea to David and he liked it. We decided to go to iPad Dev Camp which took place a week after the iPad shipped and just a couple of weeks after David and I initially talked. We built the prototype for DesignScene at the camp (and received an Honorable Mention). We were off to a great start.
The reality of day jobs and personal lives slowed progress down as we got into the spring and summer of 2010. But in the fall as chatter of curated content emerged we kicked ourselves into high gear. David worked on functionality (there’s a lot of backend processing that actually happens so that the app is as fast as it can be) and I worked on reaching out to sources to get official permission.
Fast-forward to today, and DesignScene is now available for purchase on the App Store. We’ve worked incredibly hard on this, sweated all the details (there’s actually a maintenance upgrade that we released hours after 1.0.0 went on sale), and are really proud of what we’ve accomplished. Of course we could not have done this without the immense and loving support from our families. A million thanks to our wives and kids for putting up with our late night hackathons.
We are going to keep working on to improve DesignScene (we have some neat features we’ve been thinking about) but we’re also going to think about other apps. Stay tuned and wish us luck!
Recently Guillermo Esteves did a fantastic experiment with HTML5 and CSS3 by recreating the opening crawl to Star Wars. Although it only currently works in Safari 4, it’s a good preview of how to create something dynamic using web standards and web fonts once the other browsers come along.
But Guillermo’s experiment also reminded me of how awful the typography was of those opening crawls. The original Star Wars opening crawl uses two different typefaces (three if you count “A long time ago…”), is justified without hyphenation, and thus creates obvious rivers and awkward tracking.
As the subsequent movies came out, the typography was all over the place. The Empire Strikes Back dispenses with letter-spacing altogether. Return of the Jedi overcompensates for the failure of the previous two crawls by using too much letter-spacing.
The absolute worst though was when ILM matched the style for the Star Wars prequels. At least there was more tracking in the original 1977 version. The 1999 version of the crawl that appeared in The Phantom Menace lacked any letter spacing whatsoever and created huge holes between the words that made the crawl barely readable. (No offense to special effects god and Photoshop co-creator John Knoll. He’s great with FX but he’s not necessarily a designer nor typographer.)
I set out to do a quick experiment to see if I could redo the crawl any better. The first thing I did was to standardize on one typeface. The “A long time ago…,” title and body copy are all Franklin Gothic. Then I tried a version where I kept the justified alignment but decreased the type size. The copy becomes much more readable, but feels too small and loses that epic quality George Lucas was probably after.
Then I simply tried centering it and I think it works. I am able to keep the type size large without creating large gaps between words or letters. Although the very straight sides are lost, I think the intended dramatic effect is still there.
And of course I had to whip it up in After Effects to really test the design.
Yeah, file this under geekery.
FEED 2009 has now been released and I feel privileged to have been a part of this one. If you haven’t already checked it out, please do so. The report and findings are very compelling and eye-opening. [Download PDF]
I wanted to share a little bit about the process we went through in designing the new report.
When my friend and colleague Garrick Schmitt first approached me, he already had an editorial direction in mind. He realized the data was so profound that the usual packaging of articles around the report would actually take away from it. So he wanted a smaller format with less content. He referenced books by Marty Neumeier: simple layout, large type, lots of infographics. The theme for the book came down to “customer engagement.” The data shows that when brands engage with customers in an experience of some kind (like an event, contest, etc.), ninety-six percent (96%) of their customers are more likely to consider, buy from or recommend that brand. Ninety-six percent. You never see a number like that in a survey. (To get that number, add up the sometimes/usually/always percentages for the consider, purchase and recommend results.)
So the answer was obvious in my mind. The design had to be simple (and elegant) but it really had to have an organic touch; it’s about the customer after all. I started thinking about Darwin’s journal and his observations and drawings of animals. I toyed with having the whole book typeset in a font I could make from Garrick’s handwriting, accompanied by scientific drawings of consumers. As soon as I thought about looking at illustrators who had a realistic style, someone immediately came to mind. Earlier in the summer I worked with a freelance copywriter named David Fullarton who was also a talented illustrator/artist. His work combines collage with portraiture and witty copy. His style would be the foil to the business-speak and myriad bar graphs and pie charts. He was perfect.
When I briefed David, I gave him a draft of the report and some loose direction. What he came back with was sheer genius. Because of his copy in conjunction with his art, the illustrations became another layer of commentary about the state of our industry and even our hyperconnected society. Yelpers are not only reviewing restaurants, but also doctors and schools. It doesn’t seem far off that they might be reviewing police officers in the future.
Meanwhile, I took another look at the nameplate for FEED. Last year’s design element of the small rectangular bars was inspired by the holes in computer punchcards. This year, I took the idea a little further by incorporating the actual shape of the punchcard and making the name a part of that.
Garrick and I also talked a lot about the format of the physical book. He liked the idea of putting it up on Blurb for anyone to order their own copy. The small 7×7 size felt right for the amount of content we had. In addition to Blurb, we have also offset-printed 2,000 copies of the book. For this I chose a natural white cover stock for the interior pages which alludes to Moleskine sketchbooks and fits well with David’s illustration style. And we even made temporary tattoos of the back cover illustration.
At Razorfish most of my days are filled with high-level, large-scale strategizing or pushing tiny colored squares around on a screen. It’s always nice to work on a small project and make something that can be felt, picked up and even smelled. I hope you enjoy looking at it as much as I have enjoyed making it.
Today my friend Aaron Clinger and I launched a project called TweepRoll. The idea for the site came about when my friend Kate and I were talking about celebrities who use Twitter. She said she could see how reading celebrities’ tweets could totally suck her into the Twitterverse. Later in the day it dawned on me that a lot of other people would feel the same way, so I started sketching out a site for the Twitter-lurker, the curious, the toe-dipper.
In the days and weeks after thinking about this idea I kept reading news items about celebrity twitterers. From The New York Times to Entertainment Weekly, Twitter and the famous people who use them were going mainstream.
I brought my genius developer friend Aaron into the project and we designed, built and launched TweepRoll in three weeks. It’s been a really fun side project for us and I hope you enjoy it!
- April 2017
- August 2016
- December 2015
- January 2015
- May 2014
- January 2014
- April 2013
- January 2013
- August 2012
- May 2012
- March 2012
- November 2011
- October 2011
- September 2011
- August 2011
- April 2011
- February 2011
- January 2011
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009