Medium Binders

Organize stories into Binders for future reference.

Making it easy to organize archived stories

A one-week design sprint where I designed, prototyped, and animated a new feature for Medium's mobile app that would allow users to easily organize and find their archived stories for future reference.

Skip to final designs here

At a Glance

Timeline: December 2020 (1 week)
My Role: Sole designer
The Focus: Design, Prototyping, and Animating
Tools Used: Figma, Principle, Protopie

I completed this project to practice the Product Design process in a fast timeline. With a focus on interaction, I prototyped using Principle and animated the onboarding screens using Protopie. Because of the compressed timeline, my designs are based on app reviews and assumptions about users.

It's hard to find Saved and Archived stories

I've been reading on Medium for over a year now, and to date, I have about 400 stories Saved, and even more Archived. Many of these stories fall under the topics of life, productivity, Product Design, and freelance; my reading history is pretty niche.

As a regular reader on Medium, it can be hard to find certain stories again, even if I had Saved or Archived it because of the large number of stories that I have saved for future reference. The Medium mobile app currently displays all of these stories in one never-ending list that can only be sorted by recently added, recently published, and shortest reading time. This causes me to rarely turn to my Saved or Archived stories to find past articles, and instead, turning to Google search.

Medium readers cannot efficiently find articles that archived because these articles are stored in one long list with limited sorting abilities.

Introducing Medium Binders

My solution is to replace the "Archived" with Binders, a new way to organize stories that will make it easy for users to find their archived stories. Users will be able to create their own Binders and add any stories to them, giving them maximal customizability with this new feature.

Medium uses the title "Archived", but this can be changed to a more meaningful word for the Medium platform. When users click into the Reading List tab to reference these Archived stories, the Binders and new search feature will aid them to find their stories fast.

Imagine your own physical folders and binders of information in your cabinets (aka archive). Let's bring that digitally to the Medium platform.

User Research and Assumptions

Because of the compressed timeline of this design project, I decided to focus primarily on the design and interaction of this feature instead of user research. However, I did look through reviews on the App Store and read about how users utilize the Medium Saved/Archived feature on the Help Medium articles and on Quora. This gave me a general overview of how users find Saved/Archived stories.

From my user research online, I found that:

In combination with my research online and my own experience reading on Medium, I'm basing my designs on these assumptions. If time allowed, I would love to validate these.

Medium Binders is for regular readers with niche reading lists

Here's more about who Medium Binders is for:

Their goals:

Their pain points:

A call for a new user flow for Archiving stories

The current user flow of the app only allows users to archive stories after they're saved. However, there is no difference between Archived and Saved stories in functionality. This can make differentiating these features confusing. I took this into account and decided to keep the Saved user flow, but change the user flow of Archived.

My proposed change: 
Allow users to Archive any article to a Binder. It does not have to be Saved first.

Here are the two primary user scenarios I designed for: 

  1. Reader sees an interesting article but they don't have enough time at the moment to read the article fully. They want to quickly save it.
  2. Reader finds an article that they want to save for future reference in their archive.

Why is this feature valuable for Medium's Readers and Writers?

Medium Binders leads to more engagement,
which leads to...

Medium Binders will provide an easier entry point for archived stories that will allow users to go back to these stories more often. In simple terms, more engagement on all of these saved/archived stories will be a win-win for Medium, the writers, and the readers.

For Medium, this means that there will be more engagement on all stories, including the starred Partner stories. If users can find these stories again, it opens up the opportunity for them to share these stories, and get even more people on the Medium platform. This will drive up Member subscriptions for Medium. Users can utilize Medium Binders instead of Google search to find their archived stories.

For those in the Medium Partner Program who write on Medium to earn money, more engagement on all stories will drive up their monthly income from Medium. When readers are able to easily find past saved/archived stories, this will lead to more views, reads, and sharing, driving up the writers' take-home pays from Medium.

For readers on Medium, this feature will help them immensely with finding old stories that they wanted to save for future reference. Now, they can actually reference it in the future! It will add to the enjoyability of the user experience of reading on Medium.

The Final Designs:
Medium Binders

I designed out three flows: adding a story to a Binder, finding and exploring a Binder, and creating a new Binder.

I also wanted to try animating an onboarding flow for this new feature! While I was exploring the current Medium app, I had to deliberately explore the app to figure out the difference between Saved and Archived. It took some trial and error to figure out the difference (there's none, in my understanding) — and a user shouldn't need to use trial and error to discover how a feature works.

Archive a story to a Binder

When a reader finds a story that they want to refer back to later, they can archive it to a Binder! Users can click on the Binder button, choose which Binder to add it to, and it's added. Simple animations for a quick interaction.

Find and explore a Binder

To find a past archived story, users can navigate to the Binders tab in the Reading List and click into the respective Binder. If they can't remember which Binder it's in, they can use the Search bar at the top to search for stories in all of their Binders, or search within a Binder.

Creating a new Binder

Users can create a new Binder in the Binders tab in the Reading List. They'll be prompted to add a title and a short description. Users can also create a new Binder when they're archiving a story to a Binder.

Please ignore the choppiness of the typing; I'm not sure why it's recording like that!

Onboard users to Medium Binders

New features can be confusing. This onboarding animation will help users to learn the difference between Saving and archiving a story to a Binder.

The gif is choppy, so to view a smoother prototype of this, click on the link below!

View the live prototype on Protopie here

Reflection

What's next?

  1. Build out this feature further by allowing Binders to be public. Medium Collections exist, but regular users cannot curate lists within Medium to share with others. As someone who is looking to learn more about Product Design, I've searched all over the internet for resources. Many of these compiled lists (of Medium stories) are on Notion or even in Medium stories. Making Binders public will make it easier to compile Medium stories to share with others.
  2. Conduct user research to learn more about Medium's readers and what they think of the current save/archive system. I want to validate or invalidate my assumptions so that I can make this feature even more comprehensive and better.

Takeaways

This project pushed me to complete the Product Design process in a short amount of time. I completed this project at the peak of the holiday season in December, and while it was challenging to find time to complete this project, I'm really glad that I decided to do this, and am proud of what I was able to accomplish in a week! I learned to keep my focus on primary use cases, be mindful of the user assumptions I made, and challenged myself to think further about how this feature can be beneficial for not only my primary target audience but also for other users of the app and the company.

On a technical level, I finally learned how to use Auto Layout and Components in Figma to maximize my time and make it easier to create more screens. This was also my first time using Principle to prototype and there was a bit of a learning curve, since I had only used Protopie before to animate/prototype, but after creating these prototypes, I'm excited to take what I've learned and practice more!