Improving Content Hierarchy on Medium’s app homepage: A quick analysis

The other day, while browsing Medium on my phone, something felt odd — like it was out of place. Then I realized that, for some reason, I was paying more attention to the author and editorial collectives than to the titles themselves. So, taking advantage of my recent practice of copying UI designs from apps that I like to improve my interface-building skills, I took Medium’s homepage and analysed it to see if I could gain a better understanding of the design.

So, next we have an image that shows how Medium actually looks on the native app.

I have noticed that the author’s photo appears at the top of the article section. While it is not as prominent as the title, the image still attracts the reader’s attention. Consequently, the title, which is what the reader should focus on, may be somewhat overlooked.

Additionally, I observed that the read time and publication date are slightly larger than the author’s name but still smaller than the title.

The “Recommendation” label is the smallest label in this section. It explains why you are seeing the recommended article. However, this label is optional and some recommended articles do not have it, which means that the section ends with the reading time and publication date.

To visualize the content hierarchy in a more abstract way, I tried to find a map that would help me with this, but I couldn’t find one. Maybe I didn’t use the correct search terms. So, I came up with something weird but helpful for this case — the “hierarchy content map.” I will quickly explain it below.

Basically, what I did was visualize the hierarchy of the content using size weight. I set the biggest item as level 1 and assigned higher levels to smaller items. Once I established the levels, I added an indicator for each level horizontally to guide the placement of items in the section.

Starting with the elements on the screen, I assigned a size of 13px to the author line and placed it on level 3. The title, being the biggest item, was the only element on level one. I repeated this process for the publication date, reading time, and recommendations.

As a final step, I added a blue line between the start of the hierarchy level to create a visual representation of “reading rhythm”. While I am not sure if this is a recognized concept, I believe it has potential to make our lives easier. If you are interested in this topic and would like to conduct research on it, please feel free to reach out to me.

For now, this map serves as a guide for experimentation in this specific case.

Now, let’s clean up the notes and continue.

As you can see, the reading rhythm appears messy and lacks harmony. I aim to improve it.

To start, I reduced the hierarchy for the section to make it easier to digest. After a few attempts, I managed to go from 4 levels to 3 levels, which I consider a significant improvement. To achieve the three levels, I made the following changes:

• Give equal weight to the author and date lines, as I believe both pieces of data are the second most important things after the title. If a title is engaging, the next thing users would like to know is how much time they need to invest in reading (and evaluate if they have the time) and who the author is.
• Slightly reduce the prominence of the “Recommendation” label, as it is optional and can be seen as an extra.
• Change the order: I want to keep the author photo, but avoid grabbing too much attention. Instead of having it at the top of the screen, I will switch its place with the date of publication.

And here is what the new map looks like:

The map now appears more harmonious, and I noticed that the content pattern matches the Spotted Scanning Pattern, which I believe is a good sign.

Having defined the changes, it was time to move on and implement them.

While I was crafting the new interface, I realized that there was something else that looked weird. The bookmark, “block item” icon, and three dots menu (Let’s refer to these three elements as the “actions menu.”) were aligned with the last line of the section. For example, if the last line was the recommendation part, then the actions menu was completely aligned with it. However, for sections that didn’t have a recommendation part, the actions menu was aligned with the date and reading time line. This caused some sections to have a lot of space between the image and the actions menu, while others had the actions right after the image.

This is how the layout currently looks:

I experimented with the layout by simplifying it into two columns and deleting the last row. Instead of having the action menu relative to the last line, I made it part of the right column, with a fixed distance from the image.

As a final decision, I have decided to remove the “block/hide article” option from the section. It can be confusing to use, and it’s easy to accidentally block something instead of saving it. This action can be moved to the three dots menu.

And that’s it! Here you have the before and after versions.

Let me know in the comments what you think!