Interview with Doug Bowman: the design secrets behind 2010’s #NewTwitter
Influential designer and Twitter’s creative director, Doug Bowman talks exclusively to Oliver Lindberg about the design process that led to the new Twitter.com, the value of intensive user testing and his fondness for classic proportions
This article originally appeared in issue 211 of .net magazine in 2011.
The new Twitter.com, unveiled on 14 September, was one of the most talked about redesigns of 2010. It introduced significant changes to the layout to pull in extra context. A new details pane now displays photos and videos as well as related tweets right on the page. However, as Twitter’s creative director Doug Bowman reveals, the team didn’t originally plan such a radical redesign.
“We started out in February with a smaller set of goals, mainly just to improve the user experience and address some of the scaling problems of the old Twitter UI,” Bowman explains. “The right sidebar was growing enormously large. Every new feature of the interface was added in the right column and that just wasn’t scaling at all, so we focused on creating this natural evolution of the previous UI. It was the logical next step for Twitter that turned the UI into more of an airport hub, where we could scale the UI for future releases by adding and removing terminals and key locations.”
After a couple of months, the design team (Bowman, designers Vitor Lourenço and Zhanna Shamis, and two design researchers) believed the new UI to be final and the engineering team started prototyping it. But Evan Williams, Twitter’s co-founder and CEO at the time, had other plans. “He called us into a room and said he wanted us to start thinking about the future and, specifically, delivering it now. He thought we had done a great job of determining what the next step for Twitter should be but he wanted us to jump three or four steps ahead. That was when he introduced the idea of the extra details pane. So we went back to the drawing board and addressed critical issues like scrolling and scaling of the UI.”
“We started out with a smaller set of goals but Evan Williams wanted us to jump four steps ahead”
Eventually the design team moved into a conference room with engineering to work collaboratively. “We commandeered it as a war room,” Bowman remembers. “That was the place where lots of debates were constantly happening. It was fantastic. Even Evan moved in with us to make himself available. We also had these boards where we’d hang up all of our latest designs, so that we could gather around and have discussions about current features or designs.”
Four versions of UI prototypes were being worked on during different phases of the project. For example, there were several iterations of three-column designs. “We had some of the navigation in the left column, the timeline in the main column and then the extra modules on the right. And after we’d introduced the details pane, we started exploring some very desktop-app like designs, where the UI went full-bleed and filled out the browser, eliminating browser backgrounds entirely. We planned on going forward with it but a few of us got together and realised it didn’t really feel like Twitter. It felt much more like a desktop app and there was a lot of familiarity we would’ve lost in going with that direction. We needed to reintroduce user backgrounds, at least in some way, and the customisation that you apply as the user.”
In May Twitter began intensive user testing that lasted up until a month before launch. “We would bring in four or five users every single week and test the current version of the UI,” Bowman says. “We were especially concerned with the new details pane because it was a new interaction for Twitter. In the very beginning we noticed a general confusion — not quite a satisfactory experience. We had to guide users and it wasn’t until we were making some substantial iterations (of the background colour for the hover of each tweet and the button in the top-right corner) that users started discovering the details pane on their own.
One of our researchers assembled a series of screenshots from the testing videos and we noticed that the facial expressions changed over time as we were making changes to the UI. They went from a confused state to a happy smile, when users realised that they could see embedded pictures and videos right there.”
Classic inspiration
A few days after the redesign went live, Bowman posted a picture to Flickr that indicated that Twitter hadn’t left the proportions of the new design to chance. The narrowest version of the UI is in fact based on the golden ratio, an ancient mathematical constant thought to be aesthetically pleasing. “I’ve been a fan of classic proportions for as long as I can remember,” Bowman enthuses. “There’s just something about them that feels right. Sometimes using golden ratio proportions is accidental because our eyes just guide us in creating something that feels balanced and harmonious. At other times it’s just a good starting point to use naturally appearing proportions like these that have been studied and re-used in art and architecture for centuries.
“When we went through a few iterations of the design, each designer was using slightly different column proportions. In attempting to lock those down, we honed in on a set of measurements that use golden ratio proportions. We already felt close to those because we were naturally choosing proportions that gave appropriate weight to different types of content, so it was just a matter of adjusting a few start and stop points for each column.”
The design team wasn’t able to maintain one set of proportions because they realised they needed a larger details pane to highlight the embedded media capabilities. “We still wanted a UI that fitted comfortably within a 1024x768 resolution but we also felt strongly that the timeline width shouldn’t be decreased. We couldn’t dynamically resize it as the browser widths change because that would have affected the vertical position of tweets, so we implemented a model where the right column flexed and grew as the browser window got wider. It means we lost some of the perfect proportions but it was an acceptable compromise.”
“We would bring in four or five users every single week to test the current version of the UI and noticed that the facial expressions changed over time”
The new Twitter is similar to Twitter for iPad — and that’s no coincidence. “When we acquired Tweetie, we wanted to share some elements of the iPhone client and use them across other products to start unifying our visual language,” Bowman says. “Loren Brichter [developer of Tweetie and Twitter for iPad] also knew of our intentions to use a details pane in the new design, so we started working in parallel. Even though the Twitter for iPad version launched a few weeks earlier, the developments on both were happening in tandem and influenced each other.”
More than 70 people directly contributed to the new Twitter and, although it’s company policy not to talk about features, Bowman hints that there’s more to come. “The new Twitter is just scratching the surface of what’s possible in terms of delivering a richer consumption experience for users. Tweets are still limited to 140 characters but there’s more information and detail crammed into those tweets. Helping users discover and get to the content that they care about as fast as possible is always going to be one of the goals we’re striving towards.”
Another one is to create a more consistent visual language, which is becoming a bigger and bigger challenge as Twitter continues to grow: there are over 175million users across multiple platforms already. It’s the aim of Bowman and his designers to make the experience feel native across these, while keeping the ultimate features and core concepts of Twitter interactions the same. The iPad, for instance, offers opportunities to explore and innovate and Bowman suggests it might inform the development of other interfaces in the future.
Talking to Bowman, who famously cited Google’s over-reliance on data as the reason for his departure, it becomes clear that he remains as enthusiastic about his job as he was when he joined almost two years ago. He says Twitter values design and the user experience highly, and that he can impact both much more than at Google, partly because Twitter enables him to monitor feedback within seconds. With the new Twitter.com he really has made his influence felt.
Doug Bowman left Twitter in 2014.
This article originally appeared in issue 211 of .net magazine in 2011. Photography by Bryan Tan.
