A Closer Look Into the Twitter Web App Redesign

In a week which has being plastered with news in the tech and design world, Twitter managed to grab its own piece of the thunder by announcing the rollout of the twitter.com redesign, affectionately called Rosetta in-house.

In talking to Bryan Innes, one of the designers who has been hard at work over the past three or four months, I managed to gain a bit of insight into the work which went on to get this redesign into place and what this will mean for Twitter as a product, and brand, down the road.

Twitter Redesign

One point I was sure to touch on, is that the update to twitter.com brings over many identical design traits from the service’s iOS 7 update. In regards to the process which lead to their apps getting the update before web, Bryan had this to say:

It started as a full team exploration of visual styles that we thought reflected Twitter well. Then the design team got together and started to make decisions about which styles we thought reflected the company the best, and a few designers refined relentlessly until we had a new visual direction for the product as a whole. After making those choices the only question was where to implement it first, and seeing as we’re a mobile first company, the answer was fairly obvious.

During their endless refining, a varying amount of designers worked day-in and day-out to get the elements to a point ready for public use. We could have guessed that, but what about the tools and the process used? How did they get it done? Being we often don’t get a chance to hear what about what workflows power the efficiency of the largest companies out there, I was sure to ask. Bryan had much to share, both about the tools used and the workflow.

Mostly Photoshop and Sublime Text 2 [were used throughout the process]. For the overarching Twitter styles explorations, designers were encouraged to use any tool that they felt most comfortable with. Once we made the decision to start work on the web specifically, we knew we wanted it done as well as possible and as quickly as possible. We started with a designer creating a single page psd with the general idea of how we wanted the homepage to look. From that point I took it and ran with our engineering team, diving into code and making a lot of decisions on the fly as they came up. The whole team was involved with feedback and design help throughout, and were invaluable to the process.

Twitter Redesign_1

Another aspect I was curious to delve into was how they reached the end aesthetic. The layout seems to be following quite a few trends, but at a company with the scope of Twitter, you don’t exactly expect them to make aesthetic decisions purely based off of trends, which live and die by the month.

Thus, when it came to coming up with the overarching concepts behind Twitter’s overhaul, I was interested to see just how well they stuck to their core vision when thinking about the aesthetic changes needing to be made. And as we would hope from such a ubiquitous platform, they didn’t disappoint.

We knew we wanted to give the product overall a visual update that we would be proud to work with in the future that also aligns with the message that Twitter wants to send as a company. There were quite a few tenets for the new look that surfaced out of numerous brainstorming meetings.

It seemed like it was clear that we wanted to do more to allow the user to focus on the content, be delighted every time they come back, and move in a direction which would allow us to be more flexible in the future. Twitter has been a product with a core idea that is lightweight, simple, and minimalistic. We wanted the web product to reflect those ideas as well.

With ‘lightweight, simple, and minimalistic’ being the goal of Twitter, it was nice to see the redesign finally reflect this. However, it’s worth noting that this update is almost purely aesthetic. There’s no doubt aesthetics greatly increase or decrease the functionality to a site, but when it came to actually implementing features to Twitter, and whether or not this visual change laid the groundwork for that, Innes replied with an effective and succinct reply.

For this release we focused strictly on the visual styles of the website. There are a few new aspects of the site (such as the mini profile card, showing your header photo on your homepage) that have other benefits (like being a visual cue as to whom you’re logged in as), but we tried to focus on solely on the visuals with this project. The web team is working hard on new and exciting features that are focused on user experience and functionality of the site, but we didn’t want perfecting those to hold back the visual design, or vice versa.

The mini profile cards and showing your header on the homepage are definitely appreciated visual tools, compared to what the last design offered, but it’s comforting to know that Twitter is continuously heading in the right direction, making sure to not let either aesthetics or functionality take precedent, and keeping up to date, all while sticking with their core values.

Comparison

Though with a product this large, there are bound to be some problems along the way. Twitter was no exception, and when asked what the largest roadblock the team were faced with, Innes’ spoke to the difficulty of bringing in a completely new visual style without affecting usability.

The biggest roadblocks normally came out of how well tuned and tested the website currently is. The challenge of the re–skin was to bring a visual update to the site to help it feel a bit more in line with the rest of our brand vision, without affecting the way people use the product.

Overall, compared to what Twitter.com has been offering for the past while, this is an extremely welcomed improvement. In fact, even as an avid Tweetbot for Mac user, I’m sincerely considering relying on OSX’s built-in Twitter notification system and Twitter.com now to keep up with my tweets.

I’d like to thank Bryan for taking the time to give some insight into the work which went into the redesign. It seems Twitter is sticking to its core plan and will continue to make incremental improvements overtime. Being a public company, it’s more important than ever to do so carefully, but not be afraid of the bleeding edge.

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions