In late 2012, Twitter sent a warning to its third-party developers — they would soon deny Twitter API access to the majority of the developers’ products, thereby placing the brand’s official mobile and web platforms as the sole destinations of their users. The uproar, particularly from developers who felt they had helped elevate the network, was predictable.
Regardless, when it subsided, the need was clear enough. For a multi-million dollar brand, Twitter’s web and mobile properties lacked design consistency. As a result, the overall experience — tweeting, direct messaging, favoriting, retweeting — was confusing, which ultimately threatened Twitter’s advertising capabilities, and, in turn, its profitability.
By limiting third-party alternatives, it turns out, Twitter was in part preparing the landscape for its Ads API, released through key partners last month. In a flooded market, even top-tier brands need to target, across platforms and devices, a singular approach to design — one that utilizes the strengths of each device and operating system while also maintaining the core experience that brought the product to popularity.
With the number of operating systems and devices multiplying each year — often within a single product cycle — establishing a consistent experience starts early. The intricacies of digital design — navigation, layout, icons, and so on — are the byproduct, but the creative workflow is key, and it begins right at the idea.
The holistic approach
The romance surrounding the technology industry has come coupled with an urgency to rush to the market, and the notion of designing an app or website often supersedes the purpose for doing so. Instead, technology should be seen as a tool that enables an experience that solves a problem in our daily lives, and the first step to approach that technology should be taking a global look at the shape of the intended experience.
The 💜 of EU tech
The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!
“Creating something just because you can is not design. Technology cannot drive design. Technology is simply an enabler,” explains Gavin Lew, managing director at User Centric, a user experience research and design firm. On the product development side, starting with purpose — the more conceptual underbelly to the product — allows the necessary technology to present itself, rather than shape the purpose in the first place.
At Wolff Olins, the leading international creative agency, technology is seen as a gateway for content. “Because we fly high and look at the landscape, the technology can change,” says creative director Mike Abbink. “First, we can have team members look at that landscape and go, ‘This technology would be great for that. This technology could help us tackle this.’” While Wolff Olins is capable of designing for all devices, the strategic kickoff allows the agency to target the most appropriate ones, then carry the message through.
Ultimately, a series of goals — what a product enables; what a client is trying to say; what real-world problem is being solved — can be reviewed in actual use-case scenarios. To this end, at Fry, Inc., a New York-based interactive agency, all platforms are centered around “one common digital strategy,” says executive creative director Kevin Messing. “To be successful, the functionality and user experience of any given interface must be in line with the overall brand and customer experience. So we start at the brand and customer experience level and pull everything in line with that.”
Organize your team
With a holistic view settled, the nuances of designing for multiple devices and systems requires an alignment of designers or design teams across them, which establishes a parallel user experience even for devices and systems at different stages of their development. Alignment allows designers to maintain a common strategy while utilizing the strengths of their individual platforms, whether they are web, iOS, Android, or iPad, each of which varies in capability and purpose.
“Getting the internal side aligned is critical,” says Abbink, whose typical project may include teams of digital strategists, brand specialists, user interface designers, and content strategists. “The bigger thing to us to address is to get strategic about all of these things. It’s also about making sure that everyone on the client side and on our team is aligned across what the messaging and the stories are that need to be told.”
Abbinks’ alignment also requires a look toward the future, a perspective that provides design an understanding of what future platforms, operating systems, and devices might be involved. “The key word for us is landscape — being able to see that, because that lets you be visionary and be prepared and ahead of the game,” Abbink explains. “With foresight, you’re able to be strategic about how you use technology and different platforms to address creative needs.”
“We encourage our clients to design mobile and tablet sites at the same time as their main website. Even if the mobile and tablet versions need to launch later, it’s best to design them at the same time,” says Messing. “We do this by looking at current user data and making predictions about future users and device penetration and adoption.”
Carry the message through
When the intended experience as a whole has been dictated, and devices and operating systems have been selected based on their ability to carry that experience through, user experience and user interface design can begin. This is often through user flow or paths distinct to platforms. “We create filters,” Abbink says. “We start to identify the function of the items: How is the user going to address that item? When and where? What do we want the user to get out of that? What are the functionalities typical of the platform?”
“Features that are critical for a desktop experience may take a backseat to other features in the mobile experience,” says Lew. “When a user visits a site from home, they have a different set of expectations than when they visit from the office, the car, the street, or the airport. These differences are key to making the user experience intuitive.”
For USA Today, for example, the target for Wolff Olins was elevating the publication to compete in a digital market while maintaining its traditional print identity. This required a look at branding, web design, print design, and marketing. Where print required a reconsideration of layout — financial pages, for example, took an infographic form — digital content required a distinct strategy that embraced online opportunities. Sections like Fantasy Football, for example, appeared during the NFL season and allowed a new level of interactivity that was otherwise impossible in print form. All the while, the updated brand identity carried consistently across both.
At Fry, Inc., UX and UI are brought through a series of “intangible and tangible levers,” respectively, Messing explains. While distinct within the workflow, they ensure that a user’s experience aligns with the interface design that follows.
On the UX side, Messing and his team ask:
– Does the interface feel like it’s brought to you by the same brand?
– Does the interface express the same personality?
– Does the user respond, “Yes, this is the same brand”?
In conjunction with the UX, across devices, Messing and his team ask:
– Does the interface use the same terminology, labeling, and taxonomy?
– Does the interface use similar interaction conventions for similar site processes?
– Does the interface use the same visual language or icons, supportive illustrations, and color schemes?
– Does the user respond, “Yes, this feels familiar, and I understand how to use this”?
These questions lead to variation across devices without sacrificing the users’ understanding of the product as a whole. “You have to be ready to go beyond a mere cosmetic remixing of the content and functionality that’s being delivered,” said Messing. “Sometimes the content or functionality itself should change based on device.”
For clothing brand Lilly Pulitzer and watchmaker Tourneau, Messing explains, the end goal was the same: increase sales. But Pulitzer is a clothing brand at a lower price point, which users can comfortably spend online, while Tourneau is a high-end watchmaker, which requires in-person viewing before a purchase is made. In both cases, web, mobile, and tablet functionality was approached simultaneously, requiring a reconsideration of design elements — largely navigation — while remaining consistent about the outcome.
As such, Fry, Inc., created two distinct targets: for Pulitzer, create online sales; for Tourneau, drive in-person meetings with brand representatives. To this end, Pulitzer’s e-commerce platform harnesses the celebrated visual qualities of the brand, like distinct prints, and allows users to sort based upon them, then funnels them to sales. Conversely, for Tourneau, Fry created a “virtual tray” akin to those found in jewelry stores and aligned it with similar content that may be interesting to users, like top shelf liquors and books. Intrigued users were then carried through to the store-like experience by leading them to schedule appointments with brand representatives.
In each case, the design elements — the pattern-based, highly-visual interface and the virtual tray, respectively — empowered the user toward a particular goal. By establishing that goal early, then dictating the devices necessary for it, Fry, Inc., was able to move 50-percent of Pulitzer sales to iPad, where the visual experience was particularly strong, and boost pages per visit by 140 percent for Tourneau, through strong content and ease-of-use.
Twitter’s future
Despite the developer uproar, Twitter has projected $1 billion in sales by 2014, just a year after the release of its Ads API. Beyond the growing user base, the promise of return to advertiser investment is strengthened by a user experience that’s consistent for everyone on the network, not to mention reliable for those paying for it.
The benefits for Twitter and networks facing similar challenges is twofold: the user benefits from the experience, whatever it may be, and the network benefits from their use. The interface through which this message is carried begins almost ideologically, first through establishing the end result, then establishing which technology that can lead the user to that result. Finally, the design nuances of these individual devices or operating systems — namely desktop, mobile, and tablet — require unique plays on that experience.
With this understood, Twitter’s demands come to light. “Think of the limitations of the Facebook API over the free-for-all chaos of the Myspace user experience six to eight years ago. Each had its pros and cons, but ultimately, the locked-down approach won out. Facebook has its issues today, but this was a winning strategy for them and has been for many others with the critical mass to pull it off meaningfully,” explains Lew.
“Some may feel that these limitations and quality hurdles can be heavy-handed, may be prone to anti-competitive abuse or spoil the great equalizer nature of the Web,” he continues. “All of these may be true sometimes. But enough brands feel it is worth the sacrifice because the resulting user experience, whether we like the gated approach in principle, ends up being better in practice.”
Image credit: Thinkstock
Get the TNW newsletter
Get the most important tech news in your inbox each week.