Improving UX of Medium Website // re-design
Hey y’all, this is my first attempt at redesigning something. During my experience at CareerFoundry, I’ve got a task where I had just to analyse a website or an app, highlighting the pain points of a potential user within the use of it. In the beginning, I was a little bit “stuck in the middle” with this task and the decision took me a couple of days, when finally came to my mind what I would like to analyse: Medium website.
The entire analysis I’ve made and illustrated in this article is based on theories behind human motivations: Maslow’s Hierarchy of Needs and Design Hierarchy of Needs. The theory behind it is that humans are motivated to fulfil basic needs first, before moving on to the next, more advanced set. The lower-level needs serve as a foundation. If that foundation is unstable, the higher levels won’t have a leg to stand on. But basically, this means one thing:
In 1943 the US psychologist Abraham Maslow described the human motivation for the first time, in a structured framework that has 5 stages:
- Physiological Needs: Basic human needs such as air, food, and water.
- Safety and Security: Personal security, financial security, and health.
- Social Belonging: Love, friends, belonging to a team such as in sport.
- Self-Esteem: Needs related to how we feel about ourselves, both by others and themselves.
- Self-Actualisation: Once all the previous needs have been fulfilled, humans reach what Maslow calls self-actualisation. ‘Living according to one’s full potential’ and ‘becoming who we really are’.
Usually, Maslow’s hierarchy is visualised in a pyramid like this below:
But, what this could means in the design field? Over the years, designers have understood that the motivations & needs of humans are always present, also in the products they daily use. In 2010, Steven Bradley gave birth to the Design Hierarchy of Needs, basing his new creation on the previous work of Maslow. New stages are:
- Functionality: The design works and meets basic functional needs.
- Reliability: The design maintains stable and consistent performance. It works again and again (e.g. the reliability of an iPhone consists in its hardware and software).
- Usability: Easy-to-use, users don’t have to think a lot to do something.
- Proficiency: It enables users to do things that weren’t previously possible and to expand on basic functionality. To explain better this concept, I’d like to cite a quote of the biggest:
Our job is to figure out what they’re going to want before they do.
— Steve Jobs
- Creativity: Aesthetic, beauty, intuitive interactions.
Thus, what my analysis consists of? Basing all my work on simple assumptions, I’ve tried to summarise peoples’ behaviour while they’re using Medium within Prompts & Friction Points, using Fogg Behaviour Model:
Behavior = Motivation x Ability x Prompt
First of all, I’ve written some User Stories to analyse the Users’ perspective (btw, I’m a user too, so It was quite easy to understand that).
Assumptions
Main Goal: Sharing & reading articles / posts within a community.
“As a Medium User, I’d like to easily find articles so that I can read interesting things and improve my knowledge.”
“As a Medium User, I’d like to write articles so that I can share my knowledge, receive feedback and earn.”
The first thing I’ve noticed was on the homepage, the articles are put all on the screen, in a messy way. People are here to easily find good articles and relax with their daily digest. So why not reduce friction by introducing hierarchy? Simply grouping them between categories.
Moreover, what I dislike is the long list of terms that appears below, in the menu under the avatar, one is also wrong in my opinion… “Publications”. What it means?! I think common users could struggle with this. The label Publications seems to refer to my published articles, instead its meanings is a sort of “Collections” in which users can group articles concerning the same topic.
Obviously, Medium has also good features such as the possibility of adding articles from a link, highlighting text and saving “highlights”, but some improvements seems to be fundamental to make the whole user experience quickly accessible and memorable.
Other friction points are explained in the screenshots that I’ve made for my task, before thinking to redesign the Website (thanks to my Tutor for this advice 🙇🏼🌱).
Yay!! If you’re still reading this article, can now enjoy the best part of it! 🔥
I’d like to clarify 1 thing before proceeding. The redesign I made will be constantly changed and expanded from the feedback that I’d like to receive in the comments below.
So, Let’s see what I introduced:
- Splashscreen (or Loading screen);
- Hierarchy between articles 👉🏻 Categories label;
- Fixed Sidebar with suggestions;
- Call-to-action to encourage writing;
- Simplified menu;
- Dark mode! 🍒
I’ve done 2 versions, one is more image-based and another one is more… content-based(?). I don’t know 🤷🏼 Anywayyy, these are a bunch of screenshots and video interactions of my prototype, before linking it and saying ‘Ciao’ to you.
Splashscreen
Switching to Dark 👽, but just…
Ultimately, as promised, you can try it personally here:
☝🏻 First version (image-based)
✌🏻 Second version (content-based)
Let me know in the comments below what do you think about, what can I improve & if you’ve enjoyed it, give it a Clap-Clap 👏🏻 or share.
Thanks for reading!
