ui & ux

Twitter Filter Feature

Roles

Designer

Tools

Figma

Outcome

Our project won the Code Not Required
section of the hackathon.

View final design
Mockup of Twitter filter feature displayed on a phone

The situation

For a 24-hour hackathon, I and two other people wanted to redesign Twitter's filtering system because we realized that even if a user filtered a certain word, they could still be exposed to related words. My part in the project was to design the "related words" feature.

Brainstorming

Before we started on the design, we first thought about what problems users might have while using the filtering system on Twitter. Our main use case of the filtering feature was someone who wants to avoid spoilers. We created user journeys to show the process of using the filtering system to avoid spoilers and developed multiple insights, one of which was how words related to the filtered word could easily slip through if the user didn't think to put it in their filtered words list.

The design process

Talking to a Twitter engineer

We talked to a Twitter engineer who was representing Twitter at the hackathon to gain insight into developing features for Twitter. She also helped us find Twitter's design system resources so we could make the interface more accurate.

Designing the interface

I designed three screens for the "related words" feature. The user would type in a word they want to filter and then they would be given suggestions of related words to filter. They could then view a list of each word and related word that they are currently filtering. Additionally, for the first screen where the user can add a muted word, I had to recreate that screen's existing UI and add in the new "related words" section.

Challenges

Outcome

Our project won the Code Not Required section of the hackathon.

Final Design

Screen where you can enter a muted word Screen where you can browse related words Screen where you can view your muted words

View other projects