Expanding the bookmarking capabilities of Medium

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

Problem

Bookmarked articles are inefficient

🎯 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.

Problem Validation

Discovering the need for organization

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.

Goal

Measuring list creation

The goal of this project is to make it more efficient for readers to sort through their bookmarked articles.

Primary KPI

% of bookmarks that are added to user-created lists.

Considerations

Medium is already well-designed

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.

  • How would this solution integrate with Medium's current flow? Does it change current functions of bookmarking or add onto it?
  • What would the experience look like if the user did not want to use your solution?
  • What are the social sharing aspects of the solution?

Competitive Analysis

Understanding how other platforms organize content

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).

Takeaways

  • Users are allowed to create lists for different types of content.
  • Pinterest includes a preview and Spotify highlights the song row to highlight what the user is saving.
  • Pinterest and YouTube both use modals to save content while Spotify uses a popover menu.

Explorations

Understanding Medium's design system

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.

Exploration 1 — Modal screen with Article Preview

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.

Pros

  • Allows user to preview article being saved
  • Easy to understand which list the article is being added to

Cons

  • Medium uses modal screens for conversions (inconsistent use)
  • Repetitive to show article content when on article page

Exploration 2 — Modal screen with Word Button

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.

Pros

  • Prioritizes bookmarking as primary action
  • Clear indication of the article being added to lists

Cons

  • Word buttons are used for big actions like following publications
  • Since publications are created by other people, lists seem pre-determined

Exploration 3 — Popover screen with Checkboxes

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.

Pros

  • Popovers are consistent with small actions (e.g. menu bar)
  • Doesn’t disrupt the flow when scrolling

Cons

  • Confusing on how to close the screen once finished
  • Checkboxes aren’t used in Medium’s UI

Key Insight

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).

Final Designs

Designing within user expectations

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.

Redesigned Bookmark Interaction

Redesigned bookmark interaction

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).

Redesigned Bookmark's Page

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.

  • The first column, My Lists, would be used to navigate between the different lists that the user creates.
  • The second column would be used to navigate between the articles stored within each list and the list settings.

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).

Reflection

Making more time for user testing

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.

  • Make the designs responsive for mobile and tablet, and integrate into mobile app.
  • Integrating the bookmark lists with the user's profile page.
  • Explore search and sort capabilities within the bookmarks page.

Have any feedback or questions? Let's connect!

Email · LinkedIn