The Mission-driven Interface

A redesign of Twitter, inspired by our renewed sense of purpose

The past few months have brought many exciting changes to Twitter. Because of that, we wanted to make sure that what we stand for is clearly reflected in the experience of our product: Twitter is where you go to see what’s happening everywhere in the world, right now.

We’ve also become more nimble as a team; embracing componentization so that we can envision, collaborate, design and ship changes to the product much more quickly.

Our renewed sense of purpose as an organization made a redesign of the user-experience necessary — Twitter has to feel human, bold, and electric.

Let’s talk about what the redesign entailed.

Inspiration

As you can probably imagine, a Tweet is a pretty fundamental design component here at Twitter. The brevity and design constraints of our content were our biggest source of inspiration. We wanted a new design for Twitter that felt as sharp and human as the voices on our platform.

During our hunt for inspiration we also acknowledged something really important: Twitter is a real-time news service, so our new design system had to feel more like an editorial product visually.

Design

All of the changes we made as part of our redesign centered on just one goal: We needed to increase contrast and cohesion in order to guide people to content quickly and to establish a stronger product identity. We had to be less subtle about recommending where to look on the screen, and had to cut things out of our experience if they distracted from what matters.

Typography

Information density is a big part of Twitter — so many people express themselves at the same time on the platform, and stories can develop in seconds.

Our typographic palette was often too neutral, and people had to work too hard to figure out where to look within our experience. This compelled us to make changes to how we use typography to help people navigate more seamlessly. Now, headlines are heavy in appearance, clearly breaking up information, to give Twitter’s voice a confident personality.

Media

Media had to change too. We believe that Twitter is a window into the world, so we wanted to better reflect that idea visually.

To achieve this, we started extracting the most frequent color in each photograph on Twitter and using it as a subtle backdrop. Now the background complements the photograph, helping the interface to recede and focusing the user on the content.

Shapes

Rounded edges were something many people noticed when we updated the product. Twitter is an informal place to communicate; anyone can share what’s on their mind in the moment, and we wanted to make our interface subtly feel casual and friendly.

Buttons and chat bubbles and avatars were softened in appearance to subtly shift the entire interface to a lighter, friendlier appearance.

Iconography

The iconography throughout Twitter also needed to change. Our brand identity is straightforward and bold, so the new glyphs had to communicate their purpose instantly. The set feels light when the icons are inactive, and boldly communicates an active state when you interact with them.

Navigation

We have also embraced personalization with this redesign. Many popular customization features, like Night Mode were hidden in Settings, so we reorganized our navigation to more prominently expose personal preferences and privacy settings.

Just the beginning

This was a huge milestone for us — Twitter is starting to reflect in it’s interface what makes us unique, but we are only just getting started. As we continue to ship features that deliver on Twitter’s promise, we’ll keep sharing stories about how and why we made them, right here on our blog.

Studio images courtesy of Josh Wilburne, who never puts his camera down.