three iphone screens showing the Twitter app for iOS

Make Twitter Easy

by John Wayne Hill

Reduce customer friction by improving the usability of basic tasks

Role Senior Staff Product Designer (lead)

Team 3 Designers, 2 PMs, 1 UX Researcher

Timeline ~12 weeks

Overview

Our goal with Make Twiter Easy was to tackle the known usability problems that were core to the Twitter experience. This included things like where the Reply button on a Tweet would take users; does it allow a user to reply or does it allow users to view the replies to the tweet? We also tackled making it easier to know how to get to Tweet Details and the conversations, as well as allowing users to view more of a conversation (replies) directly on the Home timeline. These usability issues have been surfaced at Twitter from multiple years of user research.

Twitter app showing a new design with context lines at the bottom of the tweet linking to the tweet details

Twitter app showing a new design that allows users to expand the number of replies to a Tweet with a link that reads show more replies

About

Background and Team

When I joined, the Design Foundations team, including about 8 designers, were working on the core usability issues with Twitter. I took this work on within week 2 to wrap my arms around it and lead a new set of thinking and driving forward a new direction. I lead the new direction and execution with collaborations with PM and ENG.

Core Projects

Reply button has unknown interaction
No clear way to get to Tweet Details
Back and Forth from Home to Tweet Details

illustration of three people working together

Make Twitter Easy

Reply Button Fix

The Reply button is a Twitter enigma. Some customers understood it well (mostly heavy Twitter users), and some did not understand it at all. For those who didn’t understand the Reply button, they tended to think it would take one of two actions. Further, Twitter’s Reply button didn’t conform to other social media sites, which caused additional confusion.

Disclosure: The design work was mostly completed by another designer, my work included developer hand-off, and small design updates to the reply pop-over.

twitter app for iOS with showing the twitter home timeline and tweet details — Production version of Twitter showing the Reply button confusion

new designs for twitter showing a reply popover and new icons — New desgigns with a conditional icon that opens a Reply popover or the Reply composer

Reply Button Fix

Solution

Our solution was two fold. When a Tweet had Replies, we show the normal reply icon and count as a button. This button takes users to the tweet details where they are view replies and fits with user’s mental model. When a Tweet didn’t have any Replies, we show a new icon with a plus button to indicate adding a Reply. This differentiation help users understand that this would allow them to reply themselves.

Make Twitter Easy

Make it Easy to Get to Tweet Details

How can we enable and encourage customers to view the conversation around a Tweet to ultimately help them feel comfortable contributing to the conversation. Customers don’t know how to get to Tweet Details for the conversation & replies. There is no visual affordance or interaction, and the Reply button only adds to this confusion.

new designs showing a context line below the tweet with either an icon or a pile of avatars — New designs with updated Context Lines with variations for experimentation

Make it Easy to Get to Tweet Details

Solution

While exploring past research around context lines we came away with new Insights and fresh thinking around context lines. Research showed that user’s only view context lines after the read the Tweet itself and usually only when they don’t like the content and want to see why it was shown to them. Further, these context lines were not mentally or visibly connected to the social actions a user could take on a Tweet.

So, we found a way to better utilize context lines with a new placement, icon, and link, allowing a visible, connected affordance to get to Tweet Details.

Make Twitter Easy

View More Conversations From Home

Customers tended to spend the most amount of their time on the Home timeline surface. When customers did visit the Tweet Details, they wanted to “read the room” first, to see if the conversation was worth following. This caused a lot of back-and-forth navigation which was distracting and could easily cause users to abandon Twitter altogether.

twitter designs showing replies to a tweet with no context of the original tweet — Replies often had no context or took up a large amount of space

new designs for twitter allowing users to expand the number of replies to a tweet on the home timeline — New designs allowed users to expand replies with one touch

View More Conversations From Home

Solution

Our solution was to enable a new interaction on Twitter allow users to see additional replies to a Tweet without having to go back and forth to Tweet Details. In this design we explored allowing users to expand a conversation, showing the top replies, on Home directly, without having to load a new screen or go back and forth. This allows users to more quickly understand if they want to spend time with the conversation or move on to additional content.

Results

Through fresh thinking, novel design approaches, and a deep understanding of customer problems our experimentation showed very positive results across all MTE projects. Along with additional projects my design impact at Twitter had an overall positive affect on our core metrics.

Metrics

Increased Tweets Composed per user by .33%
Increased personalization feedback from Twitter Home by 7.26%
Increased Replies Sent by .42%

Disclaimer: These are results from experimentation. Since EM took over Twitter none of these projects have yet to see the light.

illustration of a person holding a note with a checkmark and an arrow pointing up

Additional Details In Person

Thanks for checking out my work! This is just a high-level overview for this particular case study. During in person interviews and presentations I go over additional details such as strategy, process, my direct contributions, and more. Get in touch if you'd like to learn more!

Contact Me