Blog

How I designed a popular posts plugin for WordPress

Did my own bias play too big a part of this project?

Overview

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.

Design Thinking

Empathize

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.

Early wireframes

Define

Armed with knowledge and empathy, what featured should this plugin offer?

Basic Features

  • Preview Mode
  • Granular Padding & Margin Options
  • Wide variety of Themes
  • Reliable data

Display Options

  • 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

Ideate

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. 

  1. How do I see exactly what this will look like inline?
  2. 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?
Early exploration of icons for Themes

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
  • Background Color
  • Positioning

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.

Design

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.

Retrospective

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.

More Blog Posts

Tutorial
Building a Pinterest-Style Portfolio in Webflow
15 min read

In this video I'll show you how to build a masonry style portfolio layout (Pinterest Grid) in Webflow

Read More →
Thoughts
Shit I Wish Someone Told Me When I Was in Design School
15 min read

Things young designers need to know

Read More →