How I designed a popular posts plugin for WordPress
Did my own bias play too big a part of this project?
While at MonsterInsights I was assigned a project to design a Popular Posts plugin.
MonsterInsights was all about actionable insights; we not only provide analytics on how your site is permorming, but also what to do with that data.
In the case of building a Popular Posts plugin, we told you what content of yours is the best, now we want to give you a tool that surfaced this content in more places, increasing engagement with the content and getting visitors to do more clicking, reducing bounce rate.
I've used a lot of Popular Posts plugins in the past and nearly all of them suck.
Whether its a lack of granular design features, inconsistent reference data, out-of-date theme selections, or all of the above, the plugins on the market never checked all the boxes.
So I had a good idea of what I wanted to see in a popular posts plugin, but I still wanted to understand:
What plugins are the most popular
What users love most about them
What complaints do users have
To my not surprise, my frustrations were consistent with the public's.
Armed with knowledge and empathy, what featured should this plugin offer?
Granular Padding & Margin Options
Wide variety of Themes
Allow users to display Popular Posts inline with content
Allow users to embed Popular Posts after body content
Allow users to embed Popular Posts in the sidebar
WordPress is a funny thing. It's designed for both Developers and for Non-Developers.
I've witnessed many a co-worker frustrated at how inconsistent WordPress is as a WYSIWYG editor. Especially when using Shortcodes, embeds, etc. It can be downright maddening when you want a little extra space on your page or post when trying to add a new plugin like popular posts.
With this in mind, I wanted a better user experience, so I pondered on how I could solve two problems with one layout.
How do I see exactly what this will look like inline?
How can I allow a user to fine tune their spacing without bouncing back and forth between the MonsterInsights plugin and the preview of their page?
This Popular Posts tool would have it's own dedicated page inside the MonsterInsights plugin, so I have some room to work with in terms of page width.
I decided there should be a Live Preview as you were making style, theme and display decisions so that users wouldn't have to flcip back and forth between our plugin and a preview.
I also decided there should be a host of style options like:
Top and Bottom Margin
Top and Bottom Padding
These are the kind of features that should exist an a popular posts plugin and would make for a delightful experience as opposed to feeling like you're forcing a square peg into a round hole.
So as it turns out, I may have over-scoped this project a bit.
My Product Manager was looking for something much simpler that felt more like a native WordPress experience. There was still some room for an improved experience, but one that fit into a WordPress settings-type-of-page.
The preview functionality still made it into the estimate, but without the "Live" feature that gave the it it's soul.
Themes & Icons
Likely the most intensive design part of this project was the Themes and Icons.
Deciding what the Themes would look like, and how I could improve the experience of choosing a Theme by crafting some simple, consistent icons.
I also wanted to be sure that Theme selection was clear and easy to use, not buried in a dropdown with no idea what it will look like before selecting.
This was one of the first big projects I was assigned while at AwesomeMotive.
It was a great learning experience and was the catalyst for my PM and I to define our Product Design Process. My early exploration of the ideal UX for the plugin was way over-scoped and made us realize the early part of our process lacked detail and clarification.
I had approached this project with a vision that was better suited for standalone plugin, rather than a tool inside of our plugin. The ideal experience I had designed didn't feel like a MonsterInsights plugin, but rather behaved like a completely separate page builder experience.
Its possible that my bias was introduced here because I had been exposed previously to poor plugin experiences and that led to some tunnel vision during Ideation.