Medium App Feature Add
Medium is a powerful publishing platform, blog host, learning center, and forum for anyone to write about anything they want. With all those options, your Reading List can become cluttered and overwhelming. We set out to solve this issue.
Our team was tasked with identifying a way to enhance the Medium user’s experience saving articles.
2 Week Sprint
4 Person Team
Figma
Google Docs
Sheets
Drawings
Pen & Paper
My Role
I acted as both Project Manager as well as the lead for the Research team. This role required me to run daily stand-ups, delegate responsibilities, and lead research efforts to learn about current Medium users.
I was also involved in key UI decisions for our new features look, layout, and user flow.
Here are some other roles and tasks I perfomed:
-
I guided discussions, and made sure the team was all on the same page.
-
I conducted three (3) user interviews and two (2) usability tests.
-
Synthesized data
-
Detailed my findings
-
-
I created two (2) user-flows and a site map.
-
I helped create the problem statement.
-
Created sketches, wireframes, and low/high fidelity mockups.
-
Lead the presentation to stakeholders.
Research And Results
Method
Our team interviewed 10 different Medium users of varying experience. Our questions were selected through a rigorous vetting process in which each team member submitted 10 questions. Together we reworded, excluded, or approved the final questions.
-
26 total questions
-
Seven (7) participants were casual users.
-
Three (3) were power-users.
Results Overview
-
Users who saved articles often did not return to them.
-
Users did not like the lack of organization in their Reading List.
-
Users did not like the lack of filtering options in the Reading List.
The majority of the users we interviewed saved articles they wanted to read later.
Of the users that saved articles, the majority were unsuccessful in going back to read them.
What Does This Mean?
The majority of users who saved articles would lose track of them in their Reading List. This lack or organization resulted in the user never returning to read the article.
Let's Meet Our User, Ellen!
Bio
Ellen is an avid Medium reader and loves the app. She logs in daily and is constantly going through and saving stories to read later. Ellen saves a lot of articles at once, but struggles finding the saved articles in her Reading List afterward. Because of this, she can end up missing a great read.
Pain Points
-
Does not have a way to easily organize her saved articles.
-
She loses track of saved articles.
-
She has difficulty sorting her articles through filters.
Wants
-
To save all of her favorite articles in easily identifiable locations.
-
To be able to quickly access her saved articles.
-
To be able to effectively filter articles by popularity and more.
Problem Statement
Ellen needs a way to effectively organize her saved articles so she can quickly access them to read, share, and so she won’t miss a beat from some of her favorite authors.
Design Process
Ellen's Key Needs
-
Keep a lot of the features, iconography, and experience that Ellen loves about Medium.
-
A system to organize the Reading List.
-
A better way for Ellen to filter her articles.
-
A way for Ellen to organize her large Reading List when the app is “updated”.
How We Addressed Ellen's Needs
-
We kept the original bottom navigation and incorporated our designs into it.
-
We concluded that a simple folder system would be easy, effective, and learnable.
-
We decided to build out a more expansive filter option for Ellen to utilize.
-
We thought a “bulk add” option would help organize Ellen’s already large Reading List.
User Flows
We began by defining and building out what success would look like for Ellen. Below are the user flows we created to show how Ellen would move through the app.
User Flow 1: Organizing Your Reading List
.png)
User Flow 2: Saving An Article From The Article Page
User Flow 3: Saving An Article From The Main Page
Sketches
We began by sketching out ideas, focusing on how Ellen would save, organize, and filter articles. For the new feature, we decided redesigning the Reading List page completely for better organization would meet Ellen’s needs best.
We also decided an overlay screen made the most sense when saving an article either from the main page or in-article. An overlay wouldn’t intrude on the current beloved design of Medium and would allow for folder movement.
Reading List 1
The Reading List page would still be split into categories.
There is no longer an “Archive” tab since Ellen never used it. It was replaced with “History” showing the articles Ellen had read before.
Article Page
When in an article, claps will be visible in the header allowing Ellen to quickly identify an articles popularity.
The bottom navigation bar would remain the same with the current icons.
Save Card 1
Our overlay sketch changed a number of times.
From a scrolling overlay…
Library Tab
When the “Library” tab is selected, Ellen would see all her organized articles and folders together.
The “Saved” tab would house all her articles in the order she saved them.
In-Article Save
When Ellen hit the save icon, an overlay window would prompt her to put it in an existing folder.
She could enter that folder and save her article or go to another folder inside that, and so on.
Save Card 2
… To a more dynamic overlay that allowed for one click adds and new folder creation.
Wireframes
With our sketches finished, we upgraded to wireframes. For the most part our new feature wireframes wouldn’t be too different from the current app layout minus the newest feature.
Our biggest changes would come in the new overlay when hitting “save” and in the organization of the reading list.
Iterations Of The Reading List
Iterations Of Saving From Inside An Article
Usability Test
Test Details
-
Six (6) total participants.
-
Four (4) low fidelity tests
-
Two (2) high fidelity with user tested iterations.
-
Users completed a total of three (3) tasks.
-
We recorded the time it took to complete each task.
-
I was responsible for two (2) of the six (6) tests.
Task 1
Open the "History of Helvetica" article and save it to the Helvetica sub-folder within the typography folder.
Task 2
Save the Java script article from the home screen to the Javascript sub-folder within Front End Design.
Task 3
Create a folder and add the first three articles in the bookmarks tab.
Results And Issues
In the first four tests, the participants all seemed to follow a similar path. They would have a moment's pause on the first question, speed through the second, and stutter just slightly on the last. Each test answer improved on the prior showing the learnability was there.
A couple of icons seemed confusing, including:
-
Filter icon in the Reading List.
-
Folder creation button in the Reading List.
Solutions
-
We moved the filter button to a sub-header near the articles to give it more relation to the saved articles list.
-
Changed the create folder icon to a pencil icon and housed organizational tools in there.
Did Our Solutions Solve The Problem?
Yes!! After moving our filter button, changing our “Create Folder” button to a pencil icon drop down with several editing tools, usability tests quickened and it appeared to solve the issues!
Initial Design
-
Filter in upper right-hand corner
-
“Create Folder” icon in the upper left-hand corner
-
Articles and Folders all housed in “General Reading List” and could be moved from there.
-
New folder and Add article buttons were also under the publisher picture.
After User Testing
-
Filter button was moved to right above articles.
-
Create Folder icon was changed into recognizable pencil icon and houses organizational tools.
-
Folders and loose articles are housed separately.
-
A “delete” icon was created.
-
We kept “add to current folder” icon to organize individually.
