.png)
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:
To my not surprise, my frustrations were consistent with the public's.
Armed with knowledge and empathy, what featured should this plugin offer?
Basic Features
Display Options
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.
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:
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.
.png)
.png)