Designing Twitter Bookmarks, but Better
(UX & UI Case Study)
Introduction
Twitter is a ‘microblogging’ system that allows you to send and receive short posts called tweets (1). It was globally launching its bookmarks feature, giving users a new way of saving tweets they like and might want to revisit (2). As an active twitter user, I used bookmarks to save liked tweets and return to them later, and read properly without actually like/retweet the tweets. Bookmarked tweets are also private, it means no-one could see what I had bookmarked.
And lately, many people on Twitter have started to share more useful stuffs such as tips and tricks, motivating threads, memes, netflix n spotify premium seller, horror stories, embarrassing digital trails, and all kinds of things worth saving and reading later.
The Problem
However, I find out it very difficult to read again my old bookmarked tweet because it’s always stacked by newer ones. Then, I ask my mutual in twitter about their experience in finding theirs. They are 19 to 23 years old, actively using Twitter and Bookmarks. Because of their request, I will disguise their real identity.
“Coba cari (Old bookmarked tweet) pernah, Aga susah soalnya uda lupa lupaa” — Banana Salsa.
“Iya sih (Difficult to find old bookmarked tweet), cuma bisa scrolling doang. ga ada searchnya gitu” — Vio.
“Ummm iyaa i guess (Difficult to find old bookmarked tweet), Kudu scroll sampe bawah” — Sarah.
“Ya scroll (old bookmarked tweet), Tapi jarang sih soalnya males gitu, ketimbun banyak banget, sebelum ketemu tweet yang dibutuhin, udah males duluan” — Nina.
Some ideas come up in my mind and it seems to be better if I can discover a way of saving tweets I like and might want to revisit with minimum effort. At least, experience above can be decreased right?
For the record, the case study will involve subjective assumptions and references to common design practices as user research is conducted online. The final output is visual design of the feature and how it will work. Let’s get started.
My Role
As UX & UI Designer. I am responsible for every contents starting from the research until design. I defined the problems and goals to be achieved, conduct interviews with selected participants, doing competitive analysis, and design its high-fidelity prototype.
The Design Method
I will adopt 5-steps common design(thinking) process. The whole process will talk about how I go out, talk to real user’s facing the problem, and synthesize my understanding to be design or concept. At last, I talk again to the users, shows my works, carefully watch them using the solutions, and hear how they feel while using it.
The Users
Currently, I divided the users into two groups, the current and new one. 4 mutual friends I mentioned above are the current users who already familiar to save tweets by using Bookmarks, while 3 new users I talked to in separate session told me that they currently don’t know Bookrmarks feature to save certain tweets.
New users didn’t even realize that a function like saving tweets was inside the Share button, they assumed Share will contain something like sharing tweets to another platform or copy link to the tweet. For now they’re saving tweets by using Like, Retweet, and send the tweet to themself via dm.
It is important for me to identify the users, because the approaches to solve this problem will be different for each other.
The Goals
Actually the expected goals is really as simple as when I need certain tweets, I can discover it easier in no time even though I bookmarked 5 to 10 text/images/etc tweets in a day. The new Bookmarks has to be simple and easy to use, as we know that Twitter users are unique each other and coming form various background and characteristic (3).
Then I can say, I need to design Bookmarks that:
- Effective, the tweets are saved and organized without getting through unnecessary steps
- Easy and Familiar, to current or new user
- Can organize a lot of saved tweets from any time
- Make every saved tweets can be discovered, even it is a texts or images or videos etc.
As Bang Borrys Hasian told me in one of his books, to open up various possible solutions for problem or challenge, it is necessary to record every insight in a constructive challenge and the best way to do it is frame it in a How Might We format. So :
1. How might we design the new Bookmarks that effective, yet still easy to use?
2. How might we make the new Bookmarks can organize a lot of tweets from different condition?
Competitive Analysis
Analysis will be divided into flow and visual analysis.
A way to discover “saved items” is not a new thing actually. Even before social media was found, we’ve already knew that a place like library has pretty effective way to store the books in shelves by their own characteristic and relocate them by making the index of books location in one big reference book, as follows:
A couple social media we already familiar with, such as instagram, facebook, and even pinterest has also already adopt similar approach in their own social media. To get an overview of how the flow of existing (social media) system organize their “saved posts” below are my recap:
Okay, from above we could see that most social media have one more step to save a post, that is categorization, called Collection(IG & FB) and Board(Pinterest).
Those Collection and Board remind me with shelves from library I talked earlier. We could see that saving a post in particular “shelf” can make finding a post easier because it’s already grouped in the same place.
Beside, I also found that Pinterest implement one more approach to re-locate saved post, that is Search. It’s quite catch my attention because among all discovery processes being compared, only Pinterest has this approach. Unlike the other, every post in Pinterest has title as their identifier, that makes Search possible.
I have to admit that facebook, twitter, and even instagram’s main goal and needs in post saving is different with Pinterest that make this fact understandable. But content quality continues to improve to be worth saving and reading later as I mentioned above.
Now, let’s take a look from visual side of how our posts are stored :
And below is the recap :
The question is, can we use every feature already discovered?
We need to consider which one (or more) is the best, that is meet our goals, answer the problem, and relevant to existing style and standard.
Ideation
From competitive analysis above, I got insights leading to recommendations I should put in design. There’s also design practice I think would be fit:
1. Categorization
The design must display well-organized information, so users can easily understand what is displayed. When you need to sort information by similarity or relevance, using categories is the best way to organize information. As stated in following LATCH principle by Wurman :
“Information may be infinite, however the organization of information is finite as it can only be organized by LATCH: Location, Alphabet, Time, Category, or Hierarchy.” — Wurman, 1996
We could argue that our brains work in similar way, we like grouping similar things together. Grouping things together into categories makes it easier for the users to find the general type of information as long as they know what they are looking for. We can use saved tweets organized by categories to increase discoverability (4).
2. Search
Existing infinite scroll option to find saved tweets is horrible experience. It even doesn’t guarantee users discover saved tweet they want to revisit. This is where Search comes in. It gives users freedom to exactly find the thing they’re looking for.
3. “Like” Redesign
Instead of using Like to show my appreciation, I used to use it to save tweets and return to them later in the day when I have a free moment. I just realized that Twitter already had Bookmarks when one of account I followed shares step-by-step of how to properly saves tweet by using Bookmarks (5).
This is actually also happened before Bookmarks was released mentioned by Mashable in this article (6) (6–1) (6–2). And the unique part is, Twitter CEO himself wants to rethink the “like” button as part of a bigger plan to ensure the platform is “incentivizing healthy conversation” (6–3).
I am curious how big improvement potential of this feature would be and why two related options are found in completely different parts of the app, and also how if it can be adjusted to cater the users natural expectation and behavior.
Design Concept
Still hanging around here? Let’s get the design part started.
Proposed Flow
This is the new user flow I’m going to propose for solving our saving and organizing tweets problem:
- Same trigger for Like and Bookmarks, as I mentioned above and based on my experience, people especially new users, still/used to utilize Like as a way to save interesting tweets. Then, instead of placing Bookmarks trigger inside Share button, I think it would be more relevant to group it with Like, as well as we used to use Like to save tweets back then. The difference is only Bookmarks will privately save the tweets while Like “saves” them in public.
Similar approach actually has already implemented in grouping retweet with quote tweet. - Category, we have seen this approach already implemented by social media mentioned above. It can decrease cognitive load, because a lot of saved tweets collected into smaller groups. Categorizing is not only limited with manually creating group by similar topic, but can be also with similar format, as we have seen in Photos and Videos tab in Twitter’s search result page.
- Search, is a fundamental activity especially for users who need to find tweet they wants in the shortest time. As an avid twitter user, I can bookmark up to 10 tweets a day, and they will be approximately 300 tweets in a month. This is where search will come in handy.
- Filter, too much information often causes problems in an application. One way to help users navigate through many tweets is to allow them to narrow down the list of items to a manageable number that satisfies their specified criteria(7). Our filter will helps user to find specific tweets such as image/video tweets and tweets from a certain range of time.
Prototyping
In this part, I’m going to combine wireflow and prototyping into one section. This decision was taken because I’ll use current Twitter design style, which is not too visually complex, so I can create as many design alternative as possible but still looks polished. Time is money right?
Bookmarks Entry Point
I thought, placing Bookmarks inside Share is already good. But somehow I just find it’s kinda lost its context. And based on research I conducted earlier, I finally moved the Bookmarks inside the Like. As well as I explained in design concept above.
But I also have to empathize current user behavior who is knowing Bookmarks location is inside share button. So, thinking gives a little tips as displayed below it seems will come in handy.
Category Selection
With the addition of a new page for selecting the Bookmarks category, it is possible that users will forget what tweet they will save. Yes, even though it only moves one page, it can be happened right? Therefore, the tweet that will be bookmarked will also be displayed on the Bookmarks category selection page.
The available Bookmarks categories are arranged vertically so that users only need to scroll up and down to choose which category is fit. Actually I didn’t find any necessity, but it seems multiple category selection might also be useful. So a check mark appears next to the category that users select, then tap save to confirm the category that users choose.
Category Creation
From the previous competitive analysis, I actually found that there is some information that needs to be provided when creating a new category. Like Pinterest needs a Board name, the option to add collaborators, and visibility, and Facebook needs a Collection name and visibility. However since our Bookmarks are private, I decided the new Bookmarks would only need names. Maintaining the amount of input and information is essential so that the cognitive load of users can be maintained.
Bookmarks Discovery
- List Layout, actually it’s quite tricky to choose a layout that fits with the content in the new Bookmarks. From the competitive analysis above, I see that Facebook has the most similar layout of content compared to Instagram and Pinterest, which is dominated by text. Therefore, Bookmarks are designed to remain as before, a list. In addition, this approach is also taken so that the current Twitter users will familiar with it.
- Category, the three categories with the most recent saving are displayed at the top, followed by a text button to see the other categories. Then the latest saved tweets are displayed afterwards. When this page is scrolled, the categories will change to vertical center aligned and always pinned at the top so that users can directly access categories anywhere.
Bookmarks Search
Search becomes a highly requested feature in the user research earlier. As stated above that this feature should be fundamental to managing quite a lot of content, such as Bookmarks. Conceptually, I adapted the flow for Search from the current Twitter Global Search, of course, so that the users remain familiar while using this new feature.
The Search icon in Bookmarks is also placed at the top right of the page, as this is the most common location for Search(8). Don’t make users search for the search.
Bookmarks Tab
This approach is actually comes from the need to search for tweets that have no text in them. As explained above, Search on Bookmarks still relies on the text embedded in each tweet, so it will be difficult to find tweets that only contain photos or videos.
I realized that this approach will not be as effective as results obtained from the Text-based Search in order to find desired tweets, but the tab here will be at least eliminate tweets that do contain photos/videos/both.
Final Prototype
Interactive Prototype
Bookmarking
Bookmark Discovery
Testing
After several days conducting unmoderrated testing, I got pretty satisfying result regarding this test. For the first case (Bookmarking), the result showed 100% Indirect Success and the second case (Bookmark Discovery), showed 50% Direct and 50% Indirect Success.
I had a small talk with the tester and here’s what I got:
- Actually, Bookmarks move notification is clear enough for the tester to get the message, but I forgot to add click interaction to the black-transparent overlay as a way for the user to get back to the first screen, so user takes a couple time to realize their next entry point.
- I didn’t tell the tester that back interactions will count as a result, so for some cases, tester got to finish the task with expected path but require more steps
- Overall my proposed solution quite well received, and they hoped it can be realized to be functional Twitter features.
*Note
As this article released, I am also conducting a task success test that will measure how effective my proposed solution will perform. If you are interested in helping me by taking part in this test, please click on the following link, but make sure that at least you ever using Twitter. Thank you.
- Bookmarking Test
https://t.maze.design/20404039 - Bookmark Discovery Test
https://t.maze.design/20404969
Learnings and Overcomes
What did I learn?
- This is my first fake project that I really serious to, there’re ups and downs but I have to be Consistent and Agile to make it till the end
- Researching users is another level of rollercoaster, online in-depth interview can be easily made me lose context and focus, or just want to finish it as fast as possible, so learning more about ideal remote research is a must!
- I assumed a lot before doing these till the end, and it load my mind with limitless possibility, and again loss my focus, so just treat assumption as needed
Things to consider:
- Category Icon
I feel that distinguishing category icons only by color and category name initials might create new problems in the future. It would be nice if the icons are given a little more attention so that they can be different, and helps users with color blinds. - Advanced identification for Photo/Video only Tweet
Tweets that only contain photos and videos, even though they already have their own tabs, are still not as easy to find as search tweets that containing text in them. Need additional identification for such tweets, maybe adding identifier/title when bookmarking could be an alternative. - Testing
I am quite lacking in knowledge and time for this stage, especially for final prototype testing. So it would be better if this case get revisit in the future.
Attribution
- Twitter Like Gif
https://dribbble.com/shots/5841267-Twitter-s-like-button - Every icon I downloaded in Figma Iconify Plugin
- Time and opportunity to interview my mutuals
- For everyone who are screen-captured in this project, Thank You!
