Overview
While Medium is a repository of knowledge and insights of UX design, it doesn’t provide a seamless user experience. The purpose of this project is to streamline the user’s reading flow from browsing and selecting articles to reading and re-accessing them.
✓ Why did I do this project?
Medium is a repository of knowledge and insights of UX design. As a heavy user of Medium, I get most of the critical knowledge about my career from it. However, I came to wonder “Why doesn’t Medium offer an optimal user experience while everyone talks about user experience on Medium?” So I decided to build a more user-friendly version of it.
✓ What was the problem I wanted to solve?
Medium's complex user flow of reading and saving articles makes it challenging for users to complete certain tasks. In addition to this, unclear visual hierarchy, counterintuitive functionalities, and inconsistent layouts frustrate users.
✓ What was my solution?
I redesigned Medium's website to make it easier for users to navigate themselves and to fully use all functionalities without having to go through unnecessary depths or phases.
Design Process
Design Outcomes
Glance and Read
Improved visual hierarchy of the home page allows users to choose which articles they are going to read more efficiently. Hover effects give users access to further information and features while making the home page more interactive.
Everything on the Sidebar
The new sidebar displays all the information of the article in a simple, clean, and interactive manner. Users can save the article into different collections and mark it as "read later" when desired.
Re-access Anything You Read
Users can easily re-access the articles and highlighted sentences which are categorized into collections. This allows users to revisit, modify, and update them efficiently without having to scroll down unorganized, lengthy lists.
Define problem
Medium's complex user flow of browsing, reading, and saving articles makes it challenging for users to complete desired tasks.
The complicated user flow of reading and saving articles makes it challenging for users to complete certain tasks. In addition to this, unclear visual hierarchy, counterintuitive functionalities, and inconsistent layouts frustrate users.
Goal
How might we make each phase of the reading experience more intuitive and simple?
My goal is to streamline the reading experience – from browsing articles and skimming through the writer's information to archiving and revisiting the articles. Since this is the major task users wish to perform on Medium, it should be simpler and easier to understand for anyone.
Research
01 Customer Review Analysis
For user feedback of the current app and website, I checked out reviews on three sources: Apple App Store, Google Play Store, and Reddit. Despite the overall high ratings that Medium has received, users commonly mentioned the areas it could improve.
-
1. Struggling with recommendation algorithms
Users were frustrated with the recommendation system as it often failed to perform its personalized recommendation functionality. To ‘train’ the algorithm, some users even opened and gave claps to articles on particular topics without reading them.
-
2. Limited bookmarking features
Users were overall critical of the current saving/bookmarking features since they had to scroll over a whole list of saved articles. They wished to use more advanced functions such as marking “read later” or creating sub folders when saving articles.
02 User Interviews
I interviewed 10 users in total about their experiences and usage patterns of Medium. The insights from interviews helped me ascertain that each phase of the design process is based on users’ voices other than mine.
-
Pain point 1 – Unordered reading list
“It is always overwhelming to look through the endless lists of the articles I saved.”
Users cannot customize or categorize the saved articles. They have to enter the precise keywords to search articles in the saved lists. However, they often get a lengthy search result if they have read many articles including the same keywords.
✓ 7/10 users did not use saving functions anymore as they found it difficult to access saved articles.
-
Pain point 2 – Lack of visual hierarchy
“When choosing articles from the feed, my eyes are often lost because of different layouts and sizes of headlines and thumbnails.”
Medium is well-known for its clean and minimalistic design. However, users still expected to have better efficiency when selecting articles to read.
✓ 7/10 users pointed out that they are barely affected by the writers' names and thumbnail images, whereas those are visually prominent on the current website.
-
Pain point 3 – Failure to understand some functions
“Did that feature exist? I even didn’t know that.”
In many cases, users were not aware of particular features or did not have a proper understanding of them — this especially applies to saving/archiving, undo clapping, and controlling recommendations.
✓ While 8/10 users used the saving function on Medium, 9/10 users did not know that the archiving function exists.
✓ 10/10 users did not understand the difference between saving and archiving.
✓ 9/10 users did not know that they can manually control recommendation algorithms.
-
Further insights
✓ 8/10 users always used PC when reading articles on Medium. 2/10 users used both PC and mobile but preferred PC.
✓ 8/10 users answered that the number of topics they usually read articles about was less than 3 even though they set 6–10 topics as their interests.
✓ For 10/10 users, what affected them the most when choosing an article to read is its head line. 9/10 users thought thumbnails do not represent the actual content of articles as stock images are often used.
✓ 5/10 users saved or copied the links of long articles to read later, while the other half finished reading the articles whenever they discover them.
-
Affinity diagram from interviews
-
Design opportunities
03 Persona
Based on user research conducted above, I created two provisional personas. They represent two major behaviours of Medium users: How they enter Medium & When they finish reading articles.
-
Persona 1 – Sami
Sami's Behaviour: Directly enters Medium or via Digest (newsletter) & Finishes reading article at the moment of finding it
-
Persona 2 – Sojin
Sojin's Behaviour: Redirected from other platform & Saves long articles to read later
Ideate
01 User Flow
-
✓ Current user flow
Visualizing the user flow helped me to find out problems of the current design. It requires users to go through multiple steps while there are opportunities to simplify them. One of the critical observations from user research was that users have difficulties understanding and performing saving features. Therefore, I chose to simplify the user flow of reading articles.
-
✓ Proposed user flow
I proposed a feature called “collection” where users can have access to saved articles, highlighted sentences, and comments they left. All the actions users have executed while reading articles converge to collections.
02 Opportunities for Improvement
With the aim to streamline the user flow of reading articles, I grouped the opportunities for improvement into three phases: before reading, while reading, and after reading. Features and functionalities involved in each phase are shown above.
Prototype & Test
01 Sketch
I sketched out multiple variations of each screen to come up with as many ideas as possible. Also, I took account of connections between each functions and screen so that they would work as one product altogether, not as separate unrelated features.
With consideration to the analysis of user research results, I selected a few ideas and concepts to digitize and develop further.
"Which ideas should I develop further? Let's look into the user research result again."
02 Wireframes
As I translated sketches into wireframes, I discovered some weaknesses of potential ideas. Some ideas turned out to have unbalanced ratios when I fit them into the grid system, which led me to come up with new ideas. After going back and forth between preliminary layouts, I narrowed down my top solutions.
Whenever I made any design decisions, I prioritized the users' voices observed during user research. It gave me confidence that I was executing the user-centered approach across the whole design process.
"Are my decisions and choices based on users' voices? What were the key takeaways from the interviews?"
03 Usability Testing
I conducted 2 rounds of usability testings with 5 users per round. The purpose was to validate my proposed design solutions, make adjustments based on users' voices, and measure how much my solutions advocate for user needs.
-
✓ Round 1
During the first round, there was a lot of confusion when users were asked to open the page of writer or publication (Task 1) or to remove the article from collections (Task 4). Based on this observation, I made adjustments for each task accordingly.
-
✓ Adjustments
• Task 1 – Open the page of writer or publication
Before adjustment, users had to hover over the profile images of the publication and writer separately. During the round 1 of usability testing, users were confused with the difference between two. I observed that what mattered the most to users was to know who wrote the article in general rather than distinguishing the publication and writer.
After adjustment, I put the information of the publication and writer together under the profile image of the publication. By doing so, users don't have to alternately hover around two different images or strictly distinguish the publication and writer.
• Task 4 – Remove the articles from collections
Before adjustment, users did not expect that clicking the icons of collections would allow them to remove the articles from collections. Also, the small text of "read now" was not discoverable especially if the users had any visual impairments.
After adjustments, adding fills to the collection icons led users to click them to 'empty' the collections, which matches with 'removing' articles. Further, I increased discoverability of "read now" by adding colors on thumbnails and overlaying texts on it.
-
✓ Round 2
Then I took the improved version into the second round of usability testing. This time, all the tasks were completed successfully including task 1 and 4. The users made additional suggestions that would enhance their usage flow so I made further iterations to implement them.
