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.
From an advertising standpoint, I believe Apple has been on fire recently. (Disclaimer: I have been an Apple fanboy since 1985 and used to work there many years ago.) Beginning with the “What will your verse be?” iPad ad that debuted in mid-January, they’ve continued with the “You’re more powerful than you think” iPhone 5S that began airing recently.
When I first saw “Your Verse” on TV it stopped me in my tracks. Using audio of Robin Williams speaking to his class in Dead Poets Society, it features footage of people using the iPad around the world for making music, photography, tracking tornadoes, playing professional hockey, and more. The haunting melody combined with the breathtaking images and Robin Williams’ voice really struck a chord with me. It evoked a deep sense of wonder and faith in humanity. These were real people doing extraordinary things with this product. In the mere three years that iPad has been available* it has created a whole new category of devices and enabled millions of people to do ordinary and extraordinary things.
Here’s the text from the speech:
We don’t read and write poetry because it’s cute. We read and write poetry because we are members of the human race. And the human race is filled with passion.
Medicine, law, business, engineering. These are noble pursuits and necessary to sustain life.
But poetry, beauty, romance, love. These are what we stay alive for.
To quote from Whitman: “O me, O life of the question of these recurring, of the endless trains of the faithless, of cities filled with the foolish. What good amid these? O me, O life.
“Answer: That you are here. That life exists, and identity. That the powerful play goes on and you may contribute a verse. …That the powerful play goes on and you may contribute a verse.”
What will your verse be?
It ends with a challenge, raising the question for the viewer, “How will you make your dent in the universe?”
And just this week, Apple debuted a similar people-do-awesome-things-with-Apple-products video called “Powerful.” It features people using the iPhone to make music, perform art, video their kids, and more. It’s set against a youthful cover of the Pixies’ “Gigantic.” The film is an anthem much like the iPad ad that preceded it, and about how Apple products have empowered millions of people to do some pretty cool things.
(As an aside, I think “Powerful” is better executed than “Your Verse.” My issue with the first ad is that it had too many cuts in it. And the voiceover did not lend itself to a 30-second or even 60-second ad. Only the 90-second version works. Whereas all the cuts of “Powerful” are just as effective. And additionally interesting, my sources have told me that “Your Verse” was done internally at Apple. I would suspect that “Powerful” was also executed in-house.
So what’s the takeaway?
These ads are not meant to convince the non-believers to buy Apple products. Instead, they’re both calls-to-arms for the Apple faithful. It’s their CRM strategy if you will. These ads are meant to inspire “the rest of us” and reinforce that we made the right choice in terms of the iOS platform and devices. These epic films depict a world made better by Apple products which makes us feel good. With Samsung and other Android devices eroding at Apple’s historic lead, this is exactly what they need.
These ads are reminiscent of the Apple’s classic comeback “Think Different” campaign. Here is the text of the commercial that launched it:
Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. But the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.
As documented in Walter Isaacson’s biography of Steve Jobs, Apple needed to make a statement that they were still a viable company able to make world-changing products. Isaacson writes, “It was designed to celebrate not what the computers could do, but what creative people could do with the computers.” And he goes on to say that this ad wasn’t only directed at the general public, but also to Apple employees who had forgotten what Apple stood for.
And I believe rallying the base is exactly what Apple is doing again.
* iPad was announced January 27, 2010 at MacWorld in San Francisco and began shipping April 3, 2010.
Technology has changed a lot over the last five years. The most pressing of which I had to address was mobile-friendliness. Version 4.0 didn’t look that great on a mobile device. The iPhone was only two years old at that point and the iPad hadn’t even come out yet.
I actually began an attempt at a redesign back in 2010. I made it through a few rounds of sketches. With this first one, I was playing with typography and scale.
Although I liked the scale and contrast, I wanted to play a bit with depth. Which led me to some experiments with Cinema 4D and this…
But alas my poor CSS skills didn’t enable me to pull this off and I shelved the whole project.
Fast-forward a few years and out of necessity I had to put up a new site rather quickly. The need was primarily to show off my work to prospective employers, not to showcase the blog. So first I went to Squarespace and put up a very quick site with my latest work, killing the mostly inactive blog. It worked as a very basic portfolio site, but it was also very frustrating for me as a designer to not be able to customize certain things. For example I really wanted my landing page to present a statement about me, as a typographically composed image (that could swap out at certain breakpoints). That amount of customization just wasn’t possible, or I simply didn’t know how to do it within their interface. (I still like their product and would recommend it to anyone who’s not a designer.)
Next I tried to build something from scratch using Adobe Muse, since I had the Creative Cloud suite, I figured “What the hell.” Unfortunately Muse really is still a 1.0 product. I found that I could only use a few select TypeKit fonts even though the full TypeKit library is included in Creative Cloud. Muse’s recompression of all images was also a problem. Even when I sized images in Photoshop precisely, Muse would still recompress PNGs and JPGs at a much lower quality than I would accept as a designer. At some point I thought that I could just replace all the images after the fact and do a lot of hacking to make it work. But that seemed pointless.
Finally I settled on a self-hosted WordPress solution. I bought a new theme called Agent which has a lot of great bells and whistles. I was able to install WP Retina 2x, a plugin that makes it easy to enable the serving of Retina-quality images. (Although there is a nasty bug of it not working properly with CDNs. Something I had to experiment with.) It’s a self-hosted instance on Amazon Web Services which I was able to do relatively easily via Bitnami.
Is this new redesign cutting edge and 100% reflective of my personal aesthetic? No. But it gets the job done and I’m fairly happy with it. Maybe some day I’ll revisit the layered transparency idea.
The Apple Mac turned 30 years old today. I got my first Mac in 1985 actually after weeks if not months of convincing my father to spend his hard-earned money on it. Every weekend and after many school days, I’d take the bus over to Computerland on Van Ness in San Francisco and just play with the Mac on display for hours at a time.
Embarrassingly this is one of my first MacPaint paintings. Bear in mind that I was 12 years old at the time.
Watching the premiere of Mad Men season six, I loved that Peggy Olson blasted her creative team for bringing her three variations on the same idea. These are words to remember.
Those are three different versions of the same idea.
If you can’t tell the difference between which part’s the idea and which part’s the execution of the idea, you’re of no use to me.
…Well I’m sorry to point it out, but you’re walking over the same ground. When you bring me something like this, it looks like cowardice.
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.
Great advertising is simple.
It is not trendy, manipulative, or gimmicky.
It speaks to a core human truth, touches the heart, and sparks the imagination.
It inspires action.
This is great advertising.
See more here: The Journal of Awesome
When Apple introduced its third generation iPad back in early March, I immediately knew I had to buy it. I remember when I saw an iPhone 4 for the first time and noticed the absence of pixels and could only imagine how gorgeous that might be on a 10-inch screen. When my new iPad arrived three weeks later, that display exceeded my expectations. Apple delivered on the hype of its television commercial.
- 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