As someone who uses Medium regularly to read and write stories, this was a personal project to explore ways to help improve the experience users have organizing the content they come across on the platform.
TYPE
Personal Project
ROLE
Sole product designer
TIMELINE
5 days
RESPONSIBILITIES
User research, UI design, prototyping, user testing
🚀 View the final prototype
🎯 It’s very inefficient for readers to go back and find specific articles that they had bookmarked—especially if it was from a few weeks back.
When I started my journey into design, a lot, if not all of my design knowledge was informed through Medium articles. There were articles on typography, grids, colours, anything you can think of but as my library of articles started to grow, I was finding it more and more difficult to manage and sort all those articles.
The current bookmarks section compiles all bookmarked articles based off of recency and users are not able to organize articles based on certain characteristics (e.g. topic, author, etc.). All of the different articles get stacked together, making it difficult to sort through.
To scope the problem beyond my own experiences, I went through reviews of Medium on the Google Play Store (I'm an Android user), online review sites and asked friends about their experiences with Medium's bookmarking feature.
I discovered that as your bookmark catalog grows larger, users were looking for more ways to efficiently manage their bookmarks. This gave me the validation to pursue solving this problem further.
The goal of this project is to make it more efficient for readers to sort through their bookmarked articles.
% of bookmarks that are added to user-created lists.
Medium is already a well-designed product that was just missing that little extra something, so before I started exploring ideas, there were a few considerations I needed to think about in order to create an effective yet practical solution.
I wanted to get some inspiration on how other platforms allow their users to organize saved content. So I looked at a few popular platforms that use different types of content such as YouTube (videos), Spotify (audio) and Pinterest (photos).
My first step was to ensure that the redesign could be as realistic and familiar as possible so I chose to work within the constraints of Medium's existing UI by redesigning the web application in Figma.
The first exploration was to use a modal screen that displays a preview of the article. This provides a lot of context for which article is being added to a list but the use of a modal is big making it very disruptive for a small action.
The second exploration looks to reduce the size of the modal by getting rid of the article preview. This option reduces the important of bookmarking, however, the modal makes bookmarking the primary action when browsing should be.
The last and final exploration didn't disrupt the flow of browsing and puts bookmarking as a secondary action. The use of a popover screen is consistent with the use for selection different options.
Through my tests, I discovered users felt popover screens disrupted their flow the least, and promotes a quick action to save and continue. Medium rarely uses modal screens and when they do, it's used to convert people into users or users into paid members.
💡 When the user encounters a modal screen, their initial reaction is to close it because they think it's a paywall.
The results from the user tests gave me validation to move forward with popover screens for my final designs and to explore the different states (e.g. empty and error).
The final designs comes in two components: the current bookmark interaction and the bookmarks page. Unfortunately, I wasn't able to user test the working prototypes but these were the final designs I decided to move forward with because it was consistent with Medium's current interface and it required the least amount of actions to complete the task.
There needed to be visual feedback to let the user know the action was successful. This is where I believed the use of Medium's accent green colour of a checked checkbox provided an indication of completion as it is consistent with other Medium actions (e.g. a user successfully followed a publication or author).
The bookmark's page is where all of the articles are saved and the redesign of the page took inspiration from the Settings page on Medium—using a two-column layout.
There needed to be visual feedback to let the user know the action was successful. This is where I believed the use of Medium's accent green colour of a checked checkbox provided an indication of completion as it is consistent with other Medium actions (e.g. a user successfully followed a publication or author).
The final designs comes in two components: the current bookmark interaction and the bookmarks page. Unfortunately, I wasn't able to user test the working prototypes but these were the final designs I decided to move forward with because it was consistent with Medium's current interface and it required the least amount of actions to complete the task.
One thing I wanted to validate was the UI of the bookmarks page. Considering Medium doesn't have a page with two columns with respective navigation bars, it would have been helpful to gain perspectives on that design implementation.