A Medium feature to create readlists just like playlists in Spotify & Youtube — a UX concept

A little Background Story

I just can’t remember a single instance where a websites full of articles and news have not asked me to choose you favorites topics or interested areas.

Of course, it is right to ask that question because you are not on the website to read everything, you are there to read the things that excites you. So it is just right to ask so that they can provide you what you want.

And once you start reading things, and you like being at that site and you start browsing more and suddenly you realise that there is so much to read but the issue is now you don’t have time but you still want to read, now what you do, you start bookmarking articles, news and everything that you want to read…. but later on not now.

Here’s come the Problem

Remember, when you are in the youtube and you come across an amazing video that you just want to watch but you don’t have time so you just save it in the watch later, and there you have created different playlists and you just select the playlist and add it watch later. Too easy to find it later.

The same thing goes on with the music apps. There are playlists you can create as per your taste and the time you want to listen them.

And also the famous creative app, pinterest have the feature of creating boards and sharing them with other members.

But we don’t have such things in the content oriented sites, like in medium, quora. They gives us the opportunity to browse in different topics but doesn’t provide us a way to save them as per the topics rather they provide us the feature of BOOKMARK.

However, I don’t have issues with the bookmark, it is just an amazing feature but it becomes hell when you bookmark 50 posts and at the weekends you feel like reading some design posts and again you have to browse these 50 posts to find the design related posts and read them. Again, this becomes another hectic thing to do. And this happens with me lot of the times at the weekends and I asked my reader friends, and I was amazed by the answer that they feel like the same and their list is just growing and growing.

I just love medium and almosts read at least 5-10 medium articles daily(other than my job hours), So I just wanted to create some solution for my medium app. So that I can also create lists or collections of my fav. stories.

A Different Hero(Feature)

“Medium collections make for an easy way of linking great stories, writers (and publications) worth following, and other ideas from the web.”

Recently medium has added the feature of creating collection of stories, writers and publications worth following. But what if I want to create my own collection?

A secret Hero

To save my favorites stories from different topics in the different folders, I use a solution, Instapaper.

Instapaper provides you to save your articles and read them anywhere. Generally, It is also a bookmark service, but the way it makes you bookmark your articles is very easy. And in the instapaper you can create different folders,and add the folder link on the bookmark bar and on clicking on the folder link will save the opened webpage url in that folder and you can refer it later.

But again this is something that is not easy to use when you are using the smartphone.

So I needed something that I can have in medium app, where I can create a playlists(readlists) and save my favorites stories or some important stories that I want to read later and also share with other millions of people.

Designing a new Hero(Feature)

So like the playlist, I named this feature as readlists. (If you got a better name, you can just share with me 😃)

NOTE: I just followed the design of the medium collection feature to make it look like the part of the medium app.

So in the Readlists concept, anyone can create own, personal readlists and save their favorites stories and also users can opt to share with the other medium users.

So the first basic question is, How to add stories in the different readlist?

Approach 1

Initially, I was just thinking about how easily can user be able to save the different stories in one readlist without doing it manually.

As this feature was something similar to the bookmark feature, I wanted to create a simple interaction on the bookmark icons as I don’t want to give another icon to save the stories in the readlists.

So, I decided to go with the “Double tap on bookmark icon ” interaction to save the stories. And there will the readlists option on the side menu to go in your readlist section.

Readlist option in the side menu

On the technical view to save the stories in the different readlist without doing it manually, I used the concept of the tags used in the stories.

Suppose you have created a design related readlists and you have added 5 tags of which stories you want to have in this readlists and then whenever you double tap on the stories it will automatically match your readlist tags and the tapped stories tags and if there is a match, it will just save the story in that readlists, but there were problem in this solution

  1. was not feasible because tags are limited to only 5 and users browse different stories from different topics and It will be hard to match the tags at the runtime and save them in the correct readlists
  2. Sometimes there are very different tags present in the stories and many times there are only 1 to 2 tags present in the story. So this was not a solution I would go forward with.

I just wanted a simple solution where users can save their stories in a simpler and clearer way and they don’t need to rely on the app to match the tags and save their stories in their readlists.

Approach 2

In this approach, I went with the same way of adding in the readlists i.e double tap on the bookmark icon.

But this time whenever I double tap on the bookmark icon, it will just show me my lists of readlists and from these options I can select the readlist to save my story into.

Yeah, this concept was a bit manual but this function was easy to use and handle on the technical view.

So I went forward with this idea and created a simple interaction to save the story in the selected readlists.

Other than this saving functionality, I worked upon other 4 different function for the readlist feature.

  1. Accessing the readlists.
  2. Creating the readlists.
  3. Following other members readlists.
  4. Sharing readlists to different platforms like facebook, twitter, etc…

NOTE: To match the UI patterns of the medium app design, I just followed their design patterns.

01. Accessing the readlists

To access the readlists section, there will be a options in the side menu bar along with the home, bookmark, audio, and interests.

Tapping on the readlist will open the readlist section.

In the readlists screens, There are readlists created by you and the number of stories present in the readlists and below is the list of the readlists that are followed by you and number of stories in them.

You can create a new readlist from the “+NEW” Button on the right corner.

I made the different UIs of your personal readlists and the followed readlist so that users can see a difference between them.

02. Creating the readlists

As mentioned above, to create a new readlist you can just click on the “+New” button.

To create a new readlist, you would need to give it a name, choose an image and add a small description and decide the access right whether you want to share this readlist with all the medium members or you just want to make it private.

create a new Readlist

03. Following other readlists

By making the access right “Public”, your readlist will appear on the Home feed just like the collections and by tapping on one of the readlist you can view all the stories in that readlist and also can follow that readlist as whenever there will be a new story added in that readlist, you would be notified and you can read that story. And you can unfollow anytime.

04 Sharing the readlists

Sharing and remove options

Tapping on the “three dots” will open a small dialog with share and remove.

Published
Categorized as UX Tagged

Leave a comment

Your email address will not be published.