Redesign of Twitter Bookmarks

Project Overview

Twitter is a microblog social media platform that focuses on live and current happenings. It is a source for news, entertainment, networking, social connection and more. Users communicate through quick messages known as tweets.

This redesign explores expanding upon Twitter’s existing Bookmarks system to enhance discovery and memory. My redesign implements search functionality and filter organization to decrease scroll time and make navigation easy amidst billions of tweets and a continuous feed.

Role
team
client
time
tools
User Research UX Design Wireframing Prototyping
Solo Project
Twitter (potential)
2 weeks
Figma Whimsical

Problem

Finding a bookmarked tweet can be a test of willpower and endurance as a Twitter user without a paid subscription. If a user has many bookmarked tweets or saved it some time ago, users have to spend time (endlessly) back scrolling. This makes the Bookmarks feature a pain to use or navigate.

Context

As an avid Twitter user, I often use the platform to find resources spanning multiple topics and communities. I use the ‘Save’ feature on all social media sites so I can re-find a specific source or post when I need it.

However, finding a saved item as a free Twitter user is time-consuming and frustrating. A lack of content organization leaves users with no choice but to back scroll through all their bookmarked posts until they find the tweet they want.

Outcome

To make finding specific content easier, I added a search function and filters to Bookmarks. Users are able to directly search their bookmarks or use filters such as post type to locate what they need or easily see what they’ve saved with a glance.

By staying consistent with Twitter’s UI, feature integration is seamless and navigation is intuitive for both new and current Twitter users.

User Research

To better understand how others use Twitter, I interviewed 6 Twitter users to learn about their habits and experience.

Select Questions

Can you walk me through how you typically use Twitter?

How often do you revisit your bookmarked or liked tweets?

How do you search for a specific post or tweet?

Key Insights

  • Only one of six interviewees used Twitter Bookmarks on a regular basis. The Bookmarks feature was not memorable for most users.
  • Users will employ outside methods to revisit or keep track of content they want to remember or look back on later. This includes taking screenshots or sending a tweet link to another site.

App Analysis

Using screenshots from my Twitter account, I mapped out the current flow a user takes to access and interact with their bookmarks. I noted several areas of user frustration contributing to a decrease in enjoyment and ease of use.

As a test, I also scrolled through my own bookmarks to find another tweet made by the same artist. I timed this interaction, and found it took me 2 minutes and 39 seconds of non-stop scrolling to come across the last post I saved by this user.

Pain Points & Opportunities

Revising the User Flow

The proposed user flow relieves pain points from the current flow:

  1. Bookmark interaction directly on the timeline
  2. Enables filter and sort options in the Bookmarks tab
  3. Adds a gallery functionality on user profile pages for efficient discovery

Wireframes

I developed low-fidelity wireframes to ideate different modalities of both the bookmark feature and a new filter system. These were later used to test each version with real users to determine which was the most intuitive to use and would integrated most seamlessly into Twitter’s UI.

User Testing

I interviewed 5 participants, including both Twitter users and non-users.

Design Decisions

1. Bookmarking a Tweet

The bookmarks feature lacked visibility when users are scrolling their timeline. To reduce the number of steps it takes to bookmark a tweet, I explored placing the bookmark icon directly on each tweet card.

Option A didn’t feel natural enough and the placement diverted too much from current UI conventions. Option C’s placement at the top of the tweet card was more difficult to reach when scrolling with one hand. One user also noted that C made tweets look too visually busy.

I chose to use option B in my redesign as it was the cleanest and most intuitive based on current UI trends. It had the most instinctive flow due to the proximity and alignment with Twitter’s main interaction buttons. This placement was also the easiest to access (for right-handed users).

2. Bookmark Filters

Users are unable to search their bookmarks or filter results. This lack of categorization makes it difficult and time-consuming to find saved posts.

To reduce these pain points and make bookmarking an efficient process, I developed an organization system that utilizes a search function and filter options to improve findability.

Option A & B included a filter bar under the main page header with access to the different categorization options and the search button.

A: Users found it visually appealing but the number of menus and icons on the page was too overwhelming. The flow and design felt too different from Twitter’s UI.

B: Utilized Twitter’s current 3 dot menu to reduce clutter but still has the same tradeoff as A.

I chose option C as my final design. Twitter already implements a ribbon menu on its user profile and Explore pages. Therefore this design had a stronger use case for its consistency. Using a familiar design convention is helpful for the user’s mental model and reduces effort and thinking during navigation. This version also allowed for both swipe and tap gestures.

Core Features

High-Fidelity Screens

Other Projects