UX Case Study of Medium — where everyone discusses UX

OVERVIEW

I decided to build a more user-friendly version of it.

Timeframe

My role

Problems

USER RESEARCH

01 Online Reviews

1. Struggles with algorithm

2. Limited bookmarking features

02 User Interviews

Pain point #1: Unordered reading list

“It is always overwhelming to look through the endless lists of the articles I saved.”

List of saved articles

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 did not use saving functions anymore as they found it difficult to access saved articles.

“I’ve been highlighting a few hundreds of sentences. Since it’s nearly impossible to find sentences I want, I rather screenshot the sentences.”

List of highlights

Furthermore, the search feature is not available for highlights. Users struggled to find a particular highlighted sentence they wished to revisit.

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

Home screen

Medium is well-known for its clean and minimalistic design. However, users still expected to have better efficiency when selecting articles to read.

  • Whereas the names of writers and thumbnail images are visually prominent on the current website, 7/10 pointed out that they barely affected their decisions.

Pain point #3: Failure to understand some functions

“Did that feature exist? I even didn’t know that.”

‘Control recommendations’ hidden beneath the dropdown menu

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 used the saving function on Medium, 9/10 did not know that the archiving function exists.
  • 10/10 did not understand the difference between saving and archiving.
  • 9/10 did not know that they can manually control recommendation algorithms.

Further insights

  • 8/10 always used PC when reading articles on Medium. 2/10 used both PC and mobile but preferred PC.
  • 8/10 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 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.

03 Understanding Users

Personas

Persona #1: Sani

Directly enters Medium or via Digest (newsletter) & Finishes reading article at the moment of finding it

Persona #2: Somin

Redirected from other platform & Saves long articles to read later

DESIGN PROCESS

01 Type Considerations

The official fonts used on Medium are Kievit and Charter. Kievit is a sans-serif font with the humanistic characteristics of old styles. It is used for headings, subheadings, and previews on Medium. Charter is a transitional serif font used for body texts and quotes on Medium.

However, I couldn’t afford these fonts, so replaced them with Google Fonts and Adobe Fonts. Upon analysis of their structural and geometric details, I chose the closest approximation to the official fonts. Roboto and Minion Pro are employed as substitutes.

02 User Flow Analysis

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.

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.

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

04 Ideate & Sketch

In the ideation process, 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.

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

DESIGN OUTCOMES

01 Before Reading

“How might we help users to easily find articles they’d like to read?”

During the interviews, users mentioned that they have their own methods for choosing a right article for them. They were circumspect about selecting articles as they didn’t want to end up reading articles which are far from their interests. Medium employs a personalized recommendation system on the home screen, but current design does not represent it well.

Also, lack of visual hierarchy and putting visual emphasis on features which do not meet users’ needs distracted them from quickly going over the lists of articles.

(While I was working on this project, Medium updated its home screen at the end of May 2021. Therefore, I analyzed two ‘before’ versions.)

Before #1 (before update in May, 2021)
Before #2 (after update in May, 2021)

a. Headlines need more prominence.
When selecting an article to read, 10/10 users answered that headlines are what they consider the most. Headlines are the key factor that helps users to make decisions rather than other factors such as expected time for reading, recency, writers, thumbnails, etc.

b. Thumbnails are unnecessarily prominent.
9/10 users answered that they are not affected by thumbnails. However, big thumbnails on the current home screen draw users’ attention. In most cases, stock images which do not precisely represent the content of the articles are often used as thumbnails.

c. Writers or publications barely affect users’ decisions.
One of the observations from the interviews was that the goal of Medium users is to read high-quality articles, not to follow particular writers or publications. Given that, the current design displaying the names of both writers and publications of each article could be revised.

d. ‘Control recommendations’ feature is hidden.
Even though Medium provides recommendation control features, it is not well-promoted on their home screen and newsletters. To access it, users have to look into a long dropdown menu extended from their profiles or scroll to the bottom of newsletters. This analysis is buttressed by the observation that 9/10 users are not aware of this feature.

e. Call-to-action is unclear.
The button on the top right of the home screen prompts the call-to-action. For unpaid members, it’s written as ‘upgrade’ or ‘resume membership’ and for paid members, it says ‘write.’ However, there are undoubtedly more readers on Medium than writers. Accordingly, it should be reconsidered if writing an article is the action that Medium likes to encourage the most or that users would respond to immediately.

Proposed solutions

  1. Give headlines the highest level of importance.
  2. Categorize the tab of the first section based on the topics each user is following.
  3. Enable ‘read later’ feature when hovering over the thumbnails.
  4. Make ‘control recommendations’ more noticeable.
  5. Incorporate ‘continue reading’ as a CTA.

02 While Reading

“How might we provide handy features on the process of reading articles?”

It was observed from user research that users often feel frustrated with saving/bookmarking features — which predisposes them to use external saving methods such as Chrome bookmark, copying links, etc. Therefore, it is demanded to add and remove some features based on user research and analysis. I focused on revising the functionalities of the side bar as it plays a key role in the reading experience.

a. The side bar has room for simplification.
The current design of the side bar consists of writer’s name, bio of writer, clap, comment, and bookmark. Some of these are frequently used by users but others could distract the users from reading. For example, it is not necessary to show the bio of the writer, which often involves their portfolio websites or current job positions.

b. People who gave claps are not recognizable.
When clicked, the clap icon adds more claps from the user but the text showing the total number of claps lists the names of people who gave claps. In the interviews, 8/10 users have never discovered this feature. 4/10 users answered that they do not value the number of claps. One of them shared their experience when an article received 200 claps in total by a mere 10 people.

c. Users’ needs for categorizing articles.
As shown in the user flow analysis, the process of saving, archiving, and re-accessing articles is complicated. Also, it was observed in the user research that there is a demand for creating sub-folders of saved articles which enables easier re-access.

Proposed solutions

  1. Make the side bar compact yet self-explanatory.
  2. Show the number of people who clapped, but anonymously.
  3. Add features for categorizing each article into different collections.
  4. Add ‘read later’ feature as a selective mark, while saving all articles to ‘collection.’

03 After Reading

“How might we prompt users to stay on Medium for a longer time?”

“How might we streamline the process of re-accessing saved articles and highlights?”

Taking these two main goals into account, I tackled the challenge from the perspectives of both Medium and users. Medium’s goal is to suggest relevant articles when users finish reading one article to make them explore more articles — which would also benefit users. Also, users need more convenient ways to find an article from their saving lists other than scrolling over innumerable articles.

a. ‘More From Medium’ is not the best fit for its salient goal.
9/10 users are willing to read more than one articles if they discover related articles. 6/10 users enter Medium only when they are redirected from other platforms. Given that, the current layout and structure of ‘More From Medium’ should be revamped to increase the possibility of users reading multiple articles.

Medium explains how to distinguish saving and archiving functions, but users should be able to use them without any explanations.

b. Unclear terms for saving and archiving.
While Medium intended users to use ‘save’ for articles to read later and ‘archive’ for articles they finished reading, 0/10 users understood them. Their complicated structure confused even more users.

Current iconography

c. Lack of clear iconography to provide contextual clues for actions.
In the process of saving and archiving, the icon switches from a bookmark to a box then to a bookmark again. Also, the action of ‘remove’ and ‘empty the bookmark’ perform the same function — removing the article from the saved or archived list.

Endless of highlighted sentences

d. Highlighted sentences are jumbled together.
6/10 users think highlighting is a unique and outstanding feature of Medium. However, the current design hasn’t incorporated the way to navigate through highlights efficiently. It is nearly impossible to find particular highlights as users have to scroll down unorganized, lengthy lists of highlights without a proper visual hierarchy.

Proposed solutions

  1. Categorize ‘More From Medium’ so that users would find more relevant articles.
  2. Keep the layout of ‘More From Medium’ consistent with the home screen to maintain cohesion, making it easier for users to skim through.
  3. Equalize the symbol of ‘do’ and ‘undo’ as ‘fill’ and ‘empty’ the icons.
  4. Group highlights into articles they belong to.
New saving and highlighting system using ‘collection’
Categorized and consistent lists of relevant articles

LESSONS LEARNED

“Dig into something you really do love but still see what you would have done differently.”–Julie Zhuo

This amazing quote motivated me to start this project in the first place. Medium is one of my favourite apps, which I use daily. As a devoted user, I still found some room for improvements and listened to other users about their thoughts and experiences. Implementing changes for something you find nasty is easy; however, when it comes to something you really like, it is more challenging. I’m glad that I decided to tackle a challenge on my go-to platform.

Needs of thought-out user research.

Maintaining brand identity requires in-depth understanding and research.

Always avoid making assumptions.

Whoa, I know that was a lot. Thank you again for reading. If you liked my case study or have any feedback, feel free to comment below or reach me out at gleamwtr@gmail.com or LinkedIn.