Jun 21, 2021
UX Case Study of Medium — where everyone discusses UX
OVERVIEW
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?”
I decided to build a more user-friendly version of it.
Timeframe
2 months
My role
User research, Wireframing, UI design, UX design, Interaction design
Problems
1. While Medium pursues a clean and minimalistic visual concept, some key parts mislead users.
2. Current saving system doesn’t help users to easily organize their saved articles and highlights.
3. Some functions are less understood or used, whereas other functions that users need are missed.
USER RESEARCH
01 Online Reviews
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. The major pain points could be put into two categories:
1. Struggles with algorithm
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 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.
02 User Interviews
I interviewed ten 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 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.”
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.”
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.”
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
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: 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
Given the insights from user interviews that users mainly use PC for Medium, I focused on improving the reading experience on desktop websites.
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.)
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
- Give headlines the highest level of importance.
- Categorize the tab of the first section based on the topics each user is following.
- Enable ‘read later’ feature when hovering over the thumbnails.
- Make ‘control recommendations’ more noticeable.
- 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
- Make the side bar compact yet self-explanatory.
- Show the number of people who clapped, but anonymously.
- Add features for categorizing each article into different collections.
- 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.
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.
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.
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
- Categorize ‘More From Medium’ so that users would find more relevant articles.
- Keep the layout of ‘More From Medium’ consistent with the home screen to maintain cohesion, making it easier for users to skim through.
- Equalize the symbol of ‘do’ and ‘undo’ as ‘fill’ and ‘empty’ the icons.
- Group highlights into articles they belong to.
LESSONS LEARNED
If you made it to the end, thank you so much for reading all of that!
“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.
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.
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.
Always avoid making assumptions.
Starting off the project with a hypothesis is helpful, but I should beware of turning the hypothesis into bias or assumptions. It is easy to analyze the user research from my own perspective, not users’ perspectives. Repeatedly looking into user research results whenever I’m making critical design decisions ensures that I’m designing for users’ voices not mine.
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.
