How we made 280 characters feel like a canvas, boosting mobile engagement by 14.5% 🎨
<Imperfect, by design> - Twitter (now X) had ruffled its own feathers in a rebrand designed to reflect the 'living, breathing' nature of the conversations happening on the platform.
I began working on Twitter’s latest brand refresh late 2019 as Associate Product Management Intern and was part of the team focused on crafting the brand expression on Android Mobile. This was a team effort that involved over 30 folks from teams throughout the company as well as deep external agency partnership.
Twitter's brand refresh was born from the insight that the brand Twitter built 5 years ago didn’t reflect the energy and vibrancy of the platform.
The goal of the work was to create a brand that is of culture, expressive, complex, and perfectly imperfect by design.
#TheBefore
Before launching the re-design of the product, Twitter felt dated and cluttered. It lacked type hierarchy and contrast. The design didn't align with the brand refresh, which was very expressive.
I joined the team about half way through the larger effort and led several launch critical work streams, on both marketing and product surfaces, and drove much of the translation through templatization and tool building efforts necessary to take the work from concept to fully realized. This work set the foundation for all non platform web properties and the hard working tools teams and initiatives need to reach their audiences.
#BrandRe-fresh
Twitter's brand new look and feel reflects the messiness of life online, feeling perfectly imperfect, with textures, halftones, and paper tears at its core. When creating the design system, we had to thoughtfully find ways to incorporate the rebrand into a product space.
The work...
...is ripped. Torn. Bold. Digital. Layered. And courageous. It has energy and motion.
Tears are used to reveal information or to focus on something.
Layers and textures represent the constant stream of overlapping and intersecting conversation.
The use of color that POPS conveys humor, intensity, and authenticity.
And we ground everything in our iconic logo, Twitter blue, AND Tweets.
Because #240CharactersMatter.
Expression and emotion vary depending upon topic, mood, locale, or simply the tilt of the sun; our system allows for that range. We can turn up or down the expressiveness of the brand based upon the situation or conversation.
This was a Herculean effort and produced some of the most unique and compelling work I’ve ever been a part of. One of the many thrills was working with the folks at Grilli on a custom typeface called Chirp.
This was a team effort that involved folks from throughout the company as well as deep external agency partnership from Irradié.
#MobileNotificationsExperience
Alongside, Android 10 was due for release and Twitter's Android Dev team wanted to adhere to new design changes introduced in Android Notifications. I was working along with Notifications experience team to handle the changes to Twitter's just developing design system fits with Android Notification design guidelines.
Most Android apps use right-side drawers or panels to show notifications, so we lose a few points for not keeping track with other Android apps. But for the sake of consistency we experimented a tab here.
We also A/B tested 'Enable Tweet notifications' flow with metrics mostly based on the design guidelines and Android Material 2 Accessiblity guidelines, with colors from Twitter’s official branding spec being used to differentiate between the elements of a tweet from rest.
and yes, I checked — the colors work well for color-blind users.
The icons in the image are just desaturated, but i advise better to check colors by transferring your designs to your device and simulating color space.
#AnalyticsAndTesting
Twitter had thier own analytics tool and metrics to capture the Notification layout design improvements.We modified the Mopub Analytics API to set diversity as a factor to see what's the impact!
We looked at the top 100,000 users on the platform signed up for Private beta testing based on follower account and mapped them together based on followers in common. By grouping folks together in this way we were able to discover pockets of culture you might expect like “Frequent mobile app users” or “Once a while” but also the unexpected like “Tech Journalists” and “Indie Singers”.
At any given moment all over the world, it had 8% decrease in Notifications-to-Click Churn out factor. Over a 3 week period post launch there was a 10% increase in Notifications to App action and a 23% rise in notification task completion (likes, retweets), complemented by an 83% positive feedback rate.
The 14.5% boost in social interaction within the app underscores the users adapting to new notifications layout, marking our work as a success.
8%
↘ dec in Churn out factor
83%
Positive feedback
14.5%
in-app interaction
23%
↗ inc in notification actions
Want a deeper dive?
Get in touch to schedule a presentation.