Medium

A streamlined reading experience

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.

My Role

  • UX Research
  • UX UI Design

Team

  • Individual

Tools

  • Figma
  • Adobe XD
  • Miro

Timeframe

  • Apr 2021 to May 2021

✓ 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 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.

Define Problem

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.

    Online Review 1
  • 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.

    Online Review 2
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.

  • Icon

    Pain point 1 – Unordered reading list

    User 1

    “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.

  • Icon

    Pain point 2 – Lack of visual hierarchy

    User 2

    “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.

  • Icon

    Pain point 3 – Failure to understand some functions

    User 3

    “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

    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 1
  • Persona 2 – Sojin

    Sojin's Behaviour: Redirected from other platform & Saves long articles to read later

    Persona 2

Ideate

01 User Flow
  • Current 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

    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
Opportunities of improvement

With the aim to streamline the user flow of reading articles, I grouped the opportunities to improve into three phases: before reading, while reading, and after reading. Features and functionalities involved in each phase are shown above.

Prototype & Test

01 Sketch
Sketches

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
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.

Final design

✓ Hover over the image to see where my design decisions are grounded.

Final design 1 Final design 2 Final design 3 See detailed case study

Reflections

01 What Would I Do Differently?

1. Do one thing, do it really well

Even though I focused on one specific user flow — reading and re-accessing the article —, I found there was room to narrow down the problem even more. From the beginning to the end of the reading experience was still on a broader scale, which made me end up revamping some features and not including them in the case study. Next time, I'll dissect the problem into smaller fractions and start by tackling one fraction at once.

2. Do not overlook "convergence" phase

While I allowed my ideas to diverge into different directions, I haven't thoroughly chosen which ideas I should mainly develop further. As a result, I found myself trying to redesign all minor elements without evaluating their importance or priority. I learned that making choices is as important as creating choices in the design process.

02 Key Takeaways

1. Discover unseen needs of users

During the interview, users often said they’re overall satisfied with Medium. Once I asked detailed questions, however, I could find their unseen needs — which are the opportunities for improvement! I learned that redesigning or revamping user experience is not only about solving frustrating moments, but also about ironing out the problems that even users themselves haven’t noticed yet.

2. Maintaining brand identity requires in-depth understanding and research

Since this project is not about rebranding but about redesigning user experience, all the visualized solutions had to fit into Medium’s brand style guide. I repeatedly asked myself — does this seem to be from Medium? Analyzing details of Medium’s current website and comparing them with other websites helped me to retain the consistent visual language.