Designing the new TweetDeck

Monday, 15 October 2012

In the four months since I joined the Twitter team as TweetDeck’s new lead designer, we’ve released dozens of incremental improvements. But our biggest project has been simmering until it seemed just right, and now, TweetDeck 2.0 is available at tweetdeck.com, the Chrome Web Store and in the Mac App store. This new version brings TweetDeck’s visual design up to date, improving legibility, introducing better customisation options, and helping your content to shine through. Allow me to highlight some of the design improvements we’ve made, and give some insight into what drove these decisions.

TweetDeck is a tool designed for people who need to use Twitter, constantly, for long periods of time, so it’s important that the app feels comfortable. We’ve introduced new customisation options, including a new light theme and adjustable font sizes, to help the app mould itself around your needs. However, this flexibility should not come at the expense of consistency and ease of use. We’ve tested each of the dozen new permutations to ensure content is still clear.

Tweetdeck_screenshot_light

The new light theme is a much-requested feature. TweetDeck’s iconic dark theme is certainly recognisable, but it’s not to everyone’s taste. The new theme switcher lets you choose the theme that best suits you. We’ve drawn inspiration from Twitter’s mobile clients, while toning down the colour palette to be kinder to eyes given extended use, and to prevent text appearing bloated in certain browsers. The new light theme works particularly well in browsers that don’t allow designers to style their scrollbars, such as Firefox. Firefox users should now have a comparable experience of web.tweetdeck.com to that of Chrome or Safari users.

Wayfinding is an area we improved, since people using lots of columns have sometimes found it difficult to orient themselves in the old app. TweetDeck’s new typographic grid includes clear gutters that help the eye differentiate between areas of content, and we’ve revised column headers significantly. A subtle numbering system helps you understand your current position, and makes it easier to organise large collections of columns.

To focus on legibility and readability, we spent a lot of time finessing the typography. With CSS improvements, the type is now rendered more consistently across different browsers and operating systems. We’ve bumped up the default font size for better legibility on modern screens (but don’t worry, you can now choose the size you like best), and tuned up the type hierarchy for a clearer distinction between content and interface. Removing visual clutter in the Interactions and Activity columns has also helped make them more scannable.

Tweetdeck_type_comparison_2

We’ve also tried to ensure that TweetDeck 2.0 is consistent with other Twitter apps. Key components now look and behave in a more predictable way, while retaining an identity and power unique to TweetDeck. We’ve tidied up controls, buttons, and the presentation of Tweets themselves (what we call the “Tweet anatomy”) so you can understand what the app is saying and how it will respond to input.

As part of this exercise, we’ve switched most of our graphic assets from a static sprite sheet to an icon font. We’re hoping the icon font will prove more flexible and easier to maintain, so you should benefit from quicker downloads and more icon detail on high-density screens.

Although the core of this update is visual, we’ve also made subtle improvements to TweetDeck’s interaction design. Affordances like grab handles are clearer, new transitions help to smooth away the app’s rough edges, and we’ve made scrolling more reliable for people using gestural input devices like trackpads.

This update is the result of a design journey stretching back over many weeks. After an extensive design review of the app, we sketched dozens of new interface ideas, iterating quickly toward stronger solutions. We then created Photoshop mockups to fill in the detail, before moving into our final design platform, a high-fidelity prototype. This prototype (built from scratch using HTML, Sass, JavaScript, Mustache, JSON, and our internal prototyping tool Protobird) allowed us to tweak the final important details in the browser. With this new prototyping platform in place, we can quickly test out ways to improve the app, and ship future improvements faster.

Of course, an important part of great design is learning from feedback. The changes in TweetDeck 2.0 are just the start: we’ll keep a keen eye on how people are using the app and make further changes as required.

We hope these improvements offer a big step forward for the TweetDeck user experience. They also give us a platform to introduce some exciting features and improvements over the coming months. We can’t wait to share them with you.

 

Posted by Cennydd Bowles (@Cennydd)
Designer, TweetDeck team