Medium Binders

I designed a Medium mobile app feature for readers to enhance their organization of archived stories for future reference.

As an avid Medium reader, I saved hundreds of Medium stories to my archives but found it difficult to find specific stories again because the app displayed all stories in one list with limited sorting functionality.

Timeline: December 2020 (1 week)
Role: Product Designer
Tools: Figma, Principle, Protopie

Intro to the problem

Readers have to scroll down one list to find saved stories

Readers save Medium stories because they’re noteworthy but how can they find specific stories in the future? They currently have to scroll down one list to explore their saved stories.

We naturally categorize items and we can see this mental model presented in technology through the use of folders on our computer drive or for bookmarks. By bringing this model into Medium, readers can organize their saved stories into Binders, a fresh take on folders.

Medium readers can organize their saved stories into Binders.

user research and assumptions

What do readers think of the current user flow?

Because of the compressed timeline of this project, I turned to app reviews and Medium Help articles to learn what users think of saving and archiving stories on Medium. I found that:

• Readers have a few workarounds to find stories they saved: Bookmark it, clap for the story, or search their browser history.
• Readers have difficulty finding specific saved and archived stories in the Reading List tab because they’re displayed in one list. However, they can use the sort feature.

Designing based on assumptions

Based on my research and own experience as a reader on Medium, my design solution is based on the following assumption:

Readers on Medium consume various niche topics and
want to categorize their stories accordingly.

defining the users

Designing for readers with niche reading lists

The target users are readers who frequently save or archive stories. Many of their archived stories fall under the same few topics.

‍Their goals:
• Use Medium as a source of knowledge and inspiration.
• Rediscover their archived stories later on and share them with others
• Compile these resources (Medium Stories) for easy future reference
‍
‍Their pain points:
• It's hard to find stories that they had archived more than a week ago.
• They have to use the browser history to find specific archived stories because they can't search within their list of archived stories.

user Journey + opportunities

Mapping out how users currently save stories

In this user journey map, we follow Mary, an avid Medium reader who has various interests.

starting to design the solution

How might we categorize saved stories?

There are several solutions to this. Here were two ideas I brainstormed.

After reviewing this pro/con list, I decided that Idea #2, giving readers the autonomy to create their categories would make the experience of grouping stories into Binders more clearly defined and would make finding stories in the future easier.

building out the designs through iterations

How might users explore saved stories?

I initially designed the navigation of Binders by using tabs but realized that having nested tabs could be confusing to use. I continued to explore options, such as using a landing page for Binders so that users can view their Binders at a glance before jumping into one.

Horizontal tabs

Each tab has all the stories in one Binder.

Pros:
• User can swipe anywhere on the screen to navigate between Binders

Cons:
• Users may have to swipe multiple times to navigate to a specific Binder.
• Not ideal for users who have more than 4 Binders.
• Nested tab system might be confusing.

Landing page with cards

Pros:
• Users can view all their binders at a glance, which makes the process of opening any Binder fast.

Cons:
• Landing page could look cluttered with the number of stories

Final designs

Archive a story to a Binder

When a reader finds a story that they want to refer back to later, they can archive it in a Binder.

Users can click on the Binder button, choose which Binder to add it to, and it's added.

A quick notification pops up for the user to confirm that the story has been saved to a Binder. They can undo it if they wish.

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.

Create a new Binder

Users can create a new Binder in the Binders tab on the Reading List page.

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.

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.

impact of medium binders

Medium Binders will increase the engagement on Medium

conclusion

Next steps

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. Making Binders public will make it easier to compile Medium stories to share with others.

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

Be mindful of user assumptions. On short a timeline, I relied on online reviews to guide the design process but nothing beats getting feedback from users before and during the design cycle.

I loved that the fast pace of this project pushed me to design more efficiently using Auto Layout and Components on Figma!