Medium. Expanding curation features to better organize saved content.

TLDR

A personal project to allow users to organize the content on Medium they want to save and reference later.

Skills

User Research

Interaction Design

Design Systems

Usability Testing

Timeline

January 2020

Problem

Bookmarking articles is really inefficient.

When I started my journey into design, a lot of my design knowledge was informed through Medium articles. The more articles I tried to save, the more I realized that it’s very inefficient to go back and find specific articles that I had bookmarked—especially if it was from a few weeks back.

Current bookmarking interaction

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.

Current bookmarks page

User Research

Discovering the need for organization.

To scope the problem beyond my own experiences, I went through reviews of Medium on the Google Play Store (Android user at the time), online review sites and asked friends about their experiences with Medium's bookmarking feature.

Google Play Store Reviews in 2020

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.

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

Some takeaways from the analysis:

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

Saving content on different platforms

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.

Saving content on different platforms

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.

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.

Exploration 3 - Popover with checkboxes.

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.

Key Insight

Popover screens over modals.

Through my tests, I discovered users felt popover screens disrupted their flow the least, and promotes a quick action to save and continue. When the user encounters a modal screen, their initial reaction is to close it because they think it's a paywall.

Components

Accounting for the all types of lists.

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

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

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

How the popover screen is displayed on the homepage

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.

Bookmarks page with the user's lists

List settings to share and delete

Reflection

Understanding how other platforms organize content.

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.

Looking back, some things I should have thought about:

- Integrating the bookmark lists with the user's profile page.

- How would you add search and sort capabilities within the bookmarks page?

Feedback on case study