If you Google the term ‘the DNA of’, you’ll see a lot of interesting things: the DNA of relationships; the DNA of success; the DNA of God. So what is DNA? (Besides deoxyribonucleic acid, I mean.) And why do so many analogies rely on it?
The Oxford English Dictionary’s secondary definition for DNA is “the fundamental and distinctive characteristics or qualities of someone or something, especially when regarded as unchangeable”.
So let’s talk about the DNA of design. This goes further than just branding. Instead, it delves into the user experience itself.
What is design DNA?
Design DNA refers to experiences that reach across platforms – and often multiple codebases – but retain consistent styles, behaviours and attitudes.
Although images, colours and fonts are all part of that DNA, culture also comes in to it – or the ‘personality’ of the experience, if you will. That personality is an amalgam of design, experience and branding.
Take one of my own favourite time-wasters: PopCap’s Plants vs. Zombies. It started out as an online Flash game, and was also available as a download for Windows and Mac.
With the advent of the App Store, PopCap had to change its coding strategy for iOS. But what it didn’t change was the personality of the game. Each version of PvZ – and according to Wikipedia, it now exists on everything from Xbox Live Arcade to BlackBerry Tablet OS – retains consistent colour choices and design elements. Imagine the sheer amount of thought that went into keeping the user experience consistent across 13 separate platforms.
Learning from Facebook
Of course, this concept isn’t just for games. Look at Facebook. The design varies from the desktop to mobile to iPad. But you know exactly what to expect on each platform. The personality is consistent. (Whether you like that personality is another topic entirely.)
We’ve come to expect a certain level of performance from Facebook. We expect a certain user experience. So when the company tried to go down the road of HTML5/CSS3 coding to make the service easier to roll out across more platforms, it tanked.
As Mark Zuckerberg himself said in September: “The biggest mistake we made as a company was betting too much on HTML5 as opposed to native. Because it just wasn’t there.” The “it” he’s referring to is the consistent experience.
So Facebook rebuilt its native iOS apps, and is still working on its Android version.
Managing genetic drift
Facebook reuses iconography and color schemes across its platforms, but it also uses some native quasi-conventions. It uses the Twitter-made ‘pull to refresh’, as well as the left swipe to show the delete function.
If we’re going to call consistency in user experience within a product family design DNA, then I’ll call the rampant mimicking of patterns ‘genetic drift’.
Facebook itself created the new pattern of the slide-out menu. Then the Gmail app implemented it. If you do a Google image search of the term ‘iOS slide out navigation’, you’ll find all the other apps that have inherited this gene.
So why is it important to share design DNA for your product across multiple platforms? Because it’s comfortable. People using your apps or your website know immediately that they’re in the right place. They know what to expect.
Consistent, not identical
Should your look, feel and function be identical across all platforms? No. Your design approach needs to consider the context for each platform. If you’re not already doing this, put yourself in the shoes of your user. The next time you pull out your mobile phone, take note of where you are. Do the same for your other devices or consoles.
Consider how Amazon approaches its iPhone app, whittling it down for an immediate purchase. The first screen shows only the bare minimum of information you need to get you started. Amazon has done its usability tests, and knows that its mobile customers already have a good idea of what they’re looking for. Plus, they’re generally in a hurry.
On their website, however, it’s a different experience. There are scads of suggestions based on your buying behavior, occasional full-page takeovers for new products, a slew of specials, and a link farm with a host of partner sites and subsidiaries.
But it’s still Amazon. The customer still knows where they are. Not just because of the logo, but because the clean, crisp look is the same. So is the insistence on good customer service.
What can we take away from all of this? If you keep in mind both the sharing of design DNA across platforms and the context in which those platforms are used, you'll set yourself on a good path for cross-platform success.
