Jetpack SuperCache

  • Role: Design lead
  • Skills: Ideation, UI design, Prototyping, Product design
  • Tools: Figma
  • Duration: Three weeks
  • Iterations: Two

With over 2 million installations, WP Super Cache is one of the most popular open source caching plugins for WordPress. I like to think of it as one of the original static site generators.

This project was a short exploration to understand how WP Super Cache could be modernised and become part of the Jetpack suite of products, alongside Jetpack and Jetpack Boost. As an exploratory project, it was largely free from existing constraints and was used to kickstart further discussion about potential futures.

Challenges

Caching is complicated. Most popular WordPress caching plugins are jargon heavy with tonnes of inline documentation to try and ease the burden of configuration and management. WP Super Cache is no exception with pages of toggle switches, radio buttons and inputs used to tweak cache behaviour.

Current WP Super Cache interface

The existing WP Super Cache UI

Whilst a technical interface makes sense for a certain subset of WP SuperCache users, our data suggested that the plugin is being used by a much broader range of people. It has the potential to be installed by any WordPress user looking to improve site performance.

Solutions

Optimising for first time use therefore felt like a good place to start. What can we do during the first use of the plugin to both explain the concepts of caching and the benefits of the plugin?

A soft landing

Onboarding mockup step 1, titled: quick as a flash
Step 2, titled: found in space
Step 3, titled: Launching near you

When launching the plugin for the first time, you will enter an onboarding flow which is used to explain caching, why it matters and also the premium features that are available. This would be shown on first launch and could be expanded to include more cards as the product matures.

Your first use would also be guided by a “getting started” tutorial, explaining key features of the interface, how they work and most importantly, why you might need to use them.

Guided tour on settings screen Guided tour highlights features of the plugin

A new approach to settings

Making caching simpler

At its most basic, WP Super Cache is an on/off switch. The challenge becomes tailoring cache behaviour to your particular site requirements. The burden of configuration falls to the user in the existing UI. I believe the solution is to run a number of automated checks during cache activation, ensuring compatibility with other plugins and configuring sensible defaults.

New Jetpack SuperCache UI in activating state

The primary on/off tool becomes a big feature of the UI, and the status ring is used to indicate current plugin state and actions being taken.

Simply activating caching should be enough for most users to get started and see strong performance improvements.

Jetpack SuperCache UI with caching turned on

Audiences

Imagine for a moment that you wanted to create a homepage banner that was tailored to the operating system of the device visiting your sites homepage. On Windows it might say “Install the Windows .exe file”, on Mac “Download the .dmg” and on Android “visit the Play store to install the app”. Caching could easily break this functionality, as we now need different caches based on user agent or operating system.

Changing cache behaviour based on the visitor type (logged in vs logged out), URL, file, device and browser are pretty much all possible in the exiting plugin. They are unfortunately quite primitive. You cannot mix these categories or define specific circumstances in which caching can be turned off, or a new cache is defined. The settings are also loosely grouped under various tabs and sections.

The new tuning and settings screen
Screenshot showing how to define an audience

Audiences would allow you define these kinds of rules, targeting the specific visitors that require a separate cache. Most of the WP Super Cache interface could be simplified behind this concept, allowing for heavily reduced settings screens.

Demonstrating value

The existing WP Super Cache plugin is really just a huge collection of settings, once configured, there is very little need to revisit the plugin screens (set it and forget it). How do users know the plugin is working? How do we show value?

Guided tour on settings screen Guided tour highlights features of the plugin

I believe the solution will be to introduce statistics for both effectiveness and site performance. This gives users a reason to check back from time to time and is aligned with the approach taken in current Jetpack plugin.

Woah this is really breaking new ground, and an excellent unbound exploration bringing fresh ideas. :)

— Erin Casali, @folletto

Prototyping

To help communicate these ideas with the wider Jetpack team I created a Figma prototype with a number key interactions and screens available to test. The prototype can be found below if you wish to test it yourself.

Try the prototype