Case Study

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.

Design Thinking


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


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


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.


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.

Continue Reading

View All Posts
8 min read

Case Study

Designing a new feature to solve an old problem.

Like most startups in their early stages, Accountingfly was building the plane while it was in the air; using what tools we had already built to fulfill the needs of the customer.
8 min read

Case Study

Defining a completely new experience for the legal industry

During Jurispect's debut into the market, I worked with their team to help define the UI, UX and Visual Design of their platform.
8 min read

Case Study

Auditing and redesigning the UI of the Convex platform

After Convex's Series B, it was time for our brand and visual style to mature beyond the libraries and frameworks of our youth.
8 min read


How to Animate a Hidden Menu with Invision Studio

In this beginner tutorial, I walk you through step-by-step how to create an animated hidden menu for use in your mobile or web prototypes.
8 min read


How to build a Pinterest-style portfolio in Webflow step-by-step

Learn how to create that quintessential "pinterest-style" layout for use in your design or photography portfolio.