Hey there, internet! I'm Pritam, a Product Designer at Hashnode. Join me as I walk you through the thinking behind designing the author recommendations feature, all geared towards delivering a smooth user experience.
Understanding User Needs
Our team noticed that many popular authors on Hashnode want to suggest similar writers to their readers. They used to do this by tagging authors at the end of their articles or in the blog footer. We saw that suggesting other authors is important in our community, so we decided to make it a key feature.
Starting up!
For the ideal user experience, I lean towards a non-intrusive UI that seamlessly integrates. A UI that just happens. I aimed to introduce users to the recommendations feature in the most natural way, and to achieve this, I made the follow button the main focal point. "By following me, users are guided to discover and follow the authors I recommend."
Deconstructing the 'follow' modal
Following UX principles, every action should be reversible and efficient to capture and retain the user's attention. The modal design reflects these guidelines. The inclusion of a single 'follow all' button serves as a clear indicator, allowing users to follow all accounts with a single click, ensuring a swift and easily one-click action.
But what if a user does not want to follow all the accounts?
As a nod to that, each account has its own follow button and the modal morphs with the input of users.
Once a user decides to follow a specific set of accounts and wants to confirm the action, the primary CTA changes to 'Done' for that very purpose. It's designed this way so users can easily undo their action of following an account by simply clicking the 'following' button again.
Dashboard
Within the dashboard, users can effortlessly manage their recommendations through a simple interface. Each element in this section is designed with self-explanatory indicators, ensuring that users can grasp the functionality intuitively without needing guidance.
You can save time by adding lots of authors at once using the search bar. If you want to remove them, just press Delete—it's that simple!
Finally, there's the 'Recommended by' tab where I have designed a simple table to keep track of how many followers you've gained from others recommending you.
Other components
I designed a special icon just for the recommendations feature, to blend well with the notifications. This is important because it helps keep a consistent look, making it easy for users to recognize and connect the icon with the recommendations when they see it in the notification area.
Learn more about our icons here
Wrapping up!
This post provides a sneak peek into how the design team at Hashnode approaches tasks. When creating for a wide audience, creating designs that are easy to understand is crucial. At Hashnode, we take pride in crafting designs that hold lasting value. Subscribe to catch more in-depth looks into our design process!
Follow our work on Dribbble