Twitter Bookmarks Redesign

UX/UI Case Study

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 project explores a redesign of Twitter’s Bookmarking feature. The intention behind this redesign was to improve bookmarking organization and function to enhance memorability and discoverability.

Client

Student Project

Role

UX Design

User Research

Prototyping

User Testing

Timeframe

2 weeks

Tools

Figma

Whimsical

 

User Research

To identify common pain points and develop user stories, I interviewed 6 Twitter users to gain a better understanding of their experiences and frustrations. From these interviews, I was able to discover particular insight into user frustration around themes of search and discovery.

 

Interview Key Insights

"I either have to 1) scroll very furiously through tweets because I'm absolutely certain I saw it somewhere like searching down my own profile because I retweeted it, or 2) type phrases into the search bar and pray. And then after that, if I still don't find it, it is what it is but I'll still be a little sad."

"There's no way of categorizing search results."

"Sometimes I just forget [the bookmark feature] is there."

 

Problem

Given the huge numbers of tweets being sent on a daily basis, it is easy to miss or forget interesting threads or images within Twitter's infinite scrolling timelines. Tweets can quickly get lost or buried amongst many others, making it difficult to refind a particular post. Even after saving a tweet to their bookmarks, users don’t revisit bookmarked tweets as it can be an endless void of scrolling, leading many to abandon the search or avoid the bookmark function entirely.

As a Twitter user, I want more control over my bookmark organization so I can quickly find saved tweets again and not waste searching.

Main Pain Points

Discoverability

  • Must scroll through all tweets or media to find creator content

  • Time spent scrolling through different sections of a profile page

  • No designated section for highlighted content

Search/Organization

  • Lack of organization and filter options

  • Time spent trying to find a previously bookmarked tweet

  • No recall of what has been previously bookmarked

 

App Analysis

Using screenshots from my own Twitter account, I mapped out how a user currently accesses and interacts with their bookmarks.

To demonstrate the flow, I scrolled down my timeline to find a tweet I was interested in to show the bookmarking process.

Key Takeaways

 

  • Users can only pin one tweet to their profile page. 

  • To bookmark an item, users must tap on 'Share' to find the bookmarking option. 

  •  

  • All bookmarks show up on one page with no options to filter or sort. 

  • Users can only scroll to find what they want in their bookmarks. 

 

User Flow

Current User Flow

The suggested user flow removes or reduces the pain points from the current flow.

Proposed User Flow

Difficult to search

Provide search filters so users can utilize the search function to find what they need.

Wasted time spent scrolling

Offer categorization and improved search functionality for faster access.

Lack of memorability

Make bookmarking feature prominent.

Ideation

Ideation started with sketching using the Crazy 8s method 

 

Wireframes

which were then developed into low-fidelity wireframes.

I created wireframes for different potential layouts of the bookmark feature for better visualization of what this additional feature could look like.

 

I also created multiple wireframe versions of potential search filter options.

 

My intention was to test each version with different users to gauge which layout was the most intuitive and would fit the most seamlessly into Twitter's UI.

 

 

User Testing

I decided to conduct user tests using my wireframes before developing my high-fidelity screens. During the ideation stage, I had multiple mock-ups of different variations for the main features I was redesigning. My goal for user testing was to find out which layouts were preferred and most intuitive. I interviewed 5 individuals, comprised of both Twitter users and non-users.

Bookmarks Placement

Version 1 was the final iteration of the bookmark icon placement used in my redesign. During this testing phase, it was clear that this design was the cleanest and made the most sense to users based on current UI trends. Out of the 3 options, it had the most visually appealing flow due to the proximinity and alignment with Twitter's main tweet interaction buttons. Users also liked that this placement was the easiest to access (for right-handed users).

Final Iteration

Bookmark Filters

After testing, I chose to use Version 2 in my final prototype. Although users did have positive feedback towards the other designs, there is a stronger use case for the UI of Version 2. The swipe gesture tabs are set as a design convention in Twitter, currently implemented on user profile pages as well as the Explore page. For consistency and familiarity, this design made the most sense, as there would be reduced effort and thinking on the user's part during navigation. The user would already know how to use the feature.

Final Iteration

 

High-Fidelity Prototype

Galleries

Users are able to categorize tweets and posts into Galleries, making it easy to find and see others' top posts or work. Users are now able to showcase the posts and threads for better visibility and discoverability. 

Bookmarks Tabs

Bookmarked posts are categorized by media type. This allows for improved organization and easier filtering of a user's bookmark collection.

Bookmarks Filters

Users are also able to directly search their bookmarks to find what they need. They are also given the option to organize tweets by date added, allowing users to see their earliest bookmarks without having to scroll to the end. 

Other Projects
Digital Museum Companion
Product Design
Tattoo Appointment Booking
Product Design