Twitter
Media Experience
TWITTER MEDIA EXPERIENCE
DESIGN / ART DIRECTION / PRODUCT
The death of Fleets, inspired and informed a new design direction for the media experience on Twitter. But first; remember Twitter's ephemeral Stories format, called 'Fleets'?
The death of Fleets, inspired and informed a new design direction for the media experience on Twitter. But first; remember Twitter's emphemeral Stories format, called 'Fleets'?
Not many do, and there is a reason why. Fleets was initially designed around the hypothesis of people who were afraid to Tweet content that would stay on their profile 'forever'. It was not designed to blend in the Twitter platform, where people express and have conversation. As a result of this hypothesis, Fleets had the following constraints:
Fleets were not visible in the Twitter home timeline
Fleets were only accessible in the top bar, with one single scroll, the top bar moved out of sight. And since the home timeline is the primary form of consumption, scrolling is the primary form of navigation
Replying only possible via DM (private)
Conversations were not held in public, which is a core principle of Twitter. Instead, conversations went to Direct Messages.
Creation tools below the industry standards
In order for creators to consider hiring Twitter, we require sufficient tools to express. With less friction, we can drive more creation. With more creation we create more inspiration for others to follow up.
Fleets were only visible for people in your network
Discoverability of Fleets was non-existent, as Fleets could not be found in other places (by other people) on the platform.
Elements like the above resulted into
60%
60%
Of users with no Fleet content to consume.
(Which is a loud signal to shift gears that resulted in ending Fleets.)
A need for a redesign for better integrated Creation, Consumption & Discovery of media on Twitter
A need for a redesign for better integrated Creation, Consumption & Discovery of media on Twitter
.
.
Creation tools
Creation tools
Creation tools are features that enable people to express themselves. Sometimes this goes beyonds words and even media as it is. We redesigned the Twitter camera to empower people with these tools which are accessible within one single flow, if desired. The creation tools include annotations, text options, editing, stickers, dual camera, gif camera and more in a design system that makes it feel simple and comprehensive. No learning curve needed, just create.
Creation tools are features that enable people to express themselves. Sometimes this goes beyonds words and even media as it is. We redesigned the Twitter camera to empower people with these tools which are accessible within one single flow, if desired. The creation tools include annotations, text options, editing, stickers, dual camera, gif camera and more in a design system that makes it feel simple and comprehensive. No learning curve needed, just create.
Consume and discover
The Twitter home timeline was originally designed to consume Tweet messages in a single view in which media was considered as an attachment to the Tweet message. To allow media to become the protagonist when needed, we designed a media forward version of the Tweets consumption, which allows Tweets to adapt better to the experience as the user wants it at the moment.
Consume and discover
The Twitter home timeline was originally designed to consume Tweet messages in a single view in which media was considered as an attachment to the Tweet message. To allow media to become the protagonist when needed, we designed a media forward version of the Tweets consumption, which allows Tweets to adapt better to the experience as the user wants it at the moment.
The media forward consumption
Media forward consumption allows us to consume and discover media in its full glory. This means that after tapping on a photo or video in a Tweet, the Tweet will present itself in fullscreen in which the media can lead the Tweet. From that point, users can stay retained in this form of consumption if they wished.
Discovery
This consumption experience was designed with an eye on Discovery as well. With a toggle to grid view mode, we can allow users to scan content and discover more. Compact versions of this same grid module, is designed for other parts on the platform as well, to help people discover great content in different places of the experience.
Dual Camera
Post capture tools
Consumption
R.I.P Fleets.
The new creation, consumption and discovery on Twitter is here.
R.I.P Fleets.
The new creation, consumption and discovery on Twitter is here.
Remember those contrains we learned from Twitter's Stories format called 'Fleets'?
What we solved for with the redesign of creation, consumption and discovery on Twitter:
Remember those contrains we learned from Twitter's Stories format called 'Fleets'?
What we solved for with the redesign of creation, consumption and discovery on Twitter:
Fleets were not visible in the Twitter home timeline
Media is now integrated into Twitter's core
Right now, all media is part of a Tweet, making it accessible in the Home timeline.
Replying only possible via DM (private)
Conversations are for everyone to join
Since media will be part of the Tweet, Tweet replies are the way to have public conversations.
Creation tools below the industry standards
Redesign with better tools for expression
Creators are now more equiped to express themselves on the Twitter platform.
Creators are now more equiped to express themselves on the Twitter platform.
Fleets were only visible for in network
Media can be discovered anywhere on Twitter
The media experience has been designed to scale which allows discovery modules anywhere on the platform.
Closing notes
Product design / AD: Vinesh Gayadin
Motion / Proto: Vinesh Gayadin
PM (Product): John Barnett
Engineer: Eric Wang
Engineer: Alex Pretzlav
Product design: Matt Walker
Research: Cody Elam
Company: Twitter
Selected Work
AbridgeArt Direction / Design / Branding / Product
The Next RembrandtDesign / Design Direction
Twitter Analyst DayDesign / Art / Creative direction / Film
skiprArt Direction / Design / Branding / Product
Google Web Stories Design / Art Direction
NASA HorizonsDesign / Art Direction / Film / Motion
RaynsieDesign / Art direction
– Interactive
DisplacementDesign / Art Direction
G-STAR Style MathematicsDesign / Art Direction
United We AreDesign / Film Graphics
Eye Filmmuseum TouchDesign / Art Direction / Product
Scotch & SodaDesign / Art Direction
Rémy MartinDesign / Art Direction
– Interactive
Adidas SambaDesign / Art Direction
– Interactive