Forme Life

Case Study

[ 01 ]

An ongoing study of animation and micro-interactions in user interfaces. How does motion carry meaning and purpose for the story of the experience?

[ 02 ]

An ongoing study of animation and micro-interactions in user interfaces. How does motion carry meaning and purpose for the story of the experience?
‍

01

An ongoing study of animation and micro-interactions in user interfaces. How does motion carry meaning and purpose for the story of the experience?

[ 02 ]

Heading

Forme Life

Case STudy

Heading

Heading

Heading 6
Heading
This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

An ongoing study of animation and micro-interactions in user interfaces. How does motion carry meaning and purpose for the story of the experience?

Twitter

Tweet Tiles

[ 1 ] THE CHALLENGE

Develop a set of surfaces that external developers can utilize to help supercharge Twitter.

[ 2 ] THE BASICS

Product and brand strategy for Tweet Tiles.

[ 3 ] THE DETAILS

Twitter 2021-2022, 12 months

The Future of Twitter Looks Different.
The future looks like a supercharged Twitter through developer innovation -  where our developer community finds use cases and solves them themselves, rather than waiting for Twitter as a company to do it for them. What if developers had the ability to solve problems and directly influencing how our audience used Twitter? What if we gave them a surface area right on the feed to create the future?

They could make Twitter a safer place with Snopes Fact Checking Widgets. Or a more helpful place with customer care right in DMs. Or a more creative place with music and art carousels. Or a more expressive place with Spaces recordings right in the feed. Users would be able to find tools and apps in a marketplace - like an App Store - and add them to their feed to make their Twitter hyper-personalized.

As a business - it would be a hyper efficient way to make Twitter a better place for all. It was a vision of a supercharged Twitter, all powered by developers.
[ 01 ]

Behind the scenes of an open Twitter.

[ 02 ]

What could developer innovation look like on Twitter?

Creating a Plan

Our team created a detailed, clear and codified plan on how we can make this future become a reality. Documenting the potential use cases, spelling out where these use cases would live and what technologies would be used to implement these ideas was a crucial part in pushing this work forward with our leadership.

Showing, for example, how a customer care use case would work in DMs, through an available API (03) helped our leadership see the impact and effort these ideas would have. If a partner like Apple (04) could create custom flows to solve customer care issues, our huge value to their business could easily be imagined.
[ 03 ]

A customer care use case with Apple Support in Twitter DMs.

[ 04 ]

Full flows created by Apple developers.

Using different combinations of Use Cases, Surface Areas and Potential Methods, we were able to give a full vision of what developer innovation could look like. These examples were crucial to get the buy in we needed to fund the first phase of the project.
[ 05 ]

Creating custom link Tiles in the composer for Twitter Blue subscribers.

[ 06 ]

Powerful link carousels with image, video and audio tiles.

[ 07 ]

Storytelling tiles.

Turning Use Cases into Roadmaps
Creating and collecting all these different use cases in actual screens helped us further evaluate where our future was headed. Several main categories of use cases immersed - Storytelling Tiles, Input Tiles and Link Tiles.

Storytelling Tiles helped users express themselves more fully and creatively on the Twitter timeline. They could create a story carousel of their favorite restaurant, including directions from Google Maps, images from their photo reel or a link to Yelp Review. Or they could collect all the Twitter Audio Spaces that they listened to that week, sharing it out in an easy to reference list to their circle of friends. News publishers could even post rich news content, with pull quote cards, full photo cards and immersive audio clips from the article.

Input Tiles would enable users to receive information from their followers. Someone could submit their email to subscribe to a Substack newsletter, or schedule a meeting with Calendly. Link Tiles would be able to display rich previews right on the Twitter feed.
[ 08 ]

Tiles featuring data input.

[ 09 ]

Tiles featuring links.

We saw link enhancement as a practical first step in this mission of developer innovation. Links are unfurled all across the internet today. Most of them use open graph tags, which are tags in a websites URL that contain content that products can visualize for themselves. Figure 10 shows how Twitter uses a regular link today, and how it populates a visual card. Our plan was to expand on this framework and add to it with Twitter tags (11), to populate new designs of our making (12).
[ 10 ]

The current implementation of links on Twitter, using Open Graph Tags.

[ 11 ]

Our new Twitter Tags would be added to our partner's website's HTML.

[ 12 ]

Tile layouts powered by Twitter Tags.

[ 13 ]

The foundational elements of a developer accessible design system.

A Developer-Ready Design System

We created a design system, separate from the internally used Twitter design system, that developers could eventually access and use themselves. This design system (11) and its public access would be the foundation for all the other use cases we envisioned for the future. It was a set of building blocks for developers to build with that would power all of the future work streams.
[ 14 ]

Stress testing the design system.

How do we constrain our design system enough to protect twitter, yet flexible enough to enable developers to build freely. Too many options isn’t a good thing. We had to find out what the least common denominator of components were necessary in order to make the widest of designs (13). Our hypothesis was by starting with text, layout and images, developers can solve for the broadest range of problems in the shortest amount of time. These elements will set the foundation for the addition of other high priority features in the future, like graphs, carousels, and CTAs (14).
[ 15 ]

Public facing design system guidelines to be used referenced by our developer community.

[ 16 ]

Defining guidelines for Tile elements.

[ 17 ]

Our first five Tiles that would be released to our partners.

A First Release

As a first beta, we collaborated with three different news publishing partners (19 - Wall Street Journal, The Guardian and The New York Times) to create custom link tiles (17) that would unfurl anytime any user posted a link from their websites. These link tiles were designed with engagement in mind - giving the user just enough extra information (like author names or read time) to hook their interest. Depending on which Twitter tags our partners published their news stories with, each Tile variation (18) would be uniquely generated for them.
[ 18 ]

Tile variations powered by which Twitter Tags that are implemented.

The first 60 days showed promising results, with over four million impressions on these tiles and significantly increasing link engagement for our partners (12% increased in engagement). A lot of fanfare in the press was shown - after years of links looking the same on twitter, many people were excited to see some innovation in the space (18).
[ 19 ]

Our first Tiles released in 2022.

[ 20 ]

Media and Twitter coverage on our new Tiles.

Not too shabby. Keep exploring below.

GO HOME
NEXT PROJECT
// Page load at the top, https://forum.webflow.com/t/load-page-at-the-top-when-the-user-refreshes/62163/6