Case Study — Dashboard & Plugin Suite

WPMU DEV

Plugin Suite & Dashboard Overhaul.

SmushHummingbirdSnapshotSmartCrawlBeehiveDashboard
Business Impact
+47% Conversions −37% Bounce Rate
Smush Installs
1M 2M+
Plugins Redesigned
Smush Hummingbird Snapshot

Redesigned the core WPMU DEV plugin suite and shipped a scalable atomic design system — growing Smush to 2M+ installs and lifting Pro conversions by 47%.

SaaSDesign SystemWordPressUX/UI

A full redesign of the optimization flow — built for clarity, speed, and confidence at scale.

Role Product Designer
Product Smush, Hummingbird, Snapshot & SUI 3 Atomic Design
WPMU DEV Dashboard • System
Hover to view UI
Adoption
1M 2M+

Smush installs since the redesigned onboarding shipped.

-37%

Bounce Rate

Post-Launch
80 %
Performance

Page rendering boost via Hummingbird.

Pro Conversions

Significant uplift in premium upgrades from the free tier.

+47%

Design System

Re‑Engineering the Core.

Architecture Figma Variables SUI 3 Atomic
Components Audited
200 +

Existing UI patterns mapped before a single new component was built.

Design Tokens
80 +

Figma Variables covering colour, spacing, radius, and type across all plugins.

The technical debt was manifesting as high cognitive load — users couldn't find what mattered. We stripped the UI to its atomic elements to build a system that scales across all Smush and Hummingbird deployments.

Before redesigning any screen, we mapped every component into a unified token system: SUI 3 Atomic Design. Only then did we refactor the flows.

SUI 3 · Background Rules
00:00 00:00
Core research finding · SUI 3 Atomic

The inconsistency wasn't in the features.
It was in the design language.

200+ components audited 6 plugins SUI 3 audit
"

I spend more time figuring out where to click than actually using the plugin. Everything looks different.

User research · pre-SUI 3
Research signals · 200+ component audit · 6 plugin analysis
Finding Critical

plugins each with siloed UI patterns — different buttons, spacing, and feedback states

Pattern silos
Finding Critical
43%

drop-off rate in the first 3 settings screens before the redesign shipped

Onboarding drop-off
Finding High
200+

existing components with no shared token mapping before the audit began

Component debt
Finding High

longer to complete identical tasks across different plugins due to inconsistent affordances

Cognitive load
Finding Medium
0

shared Figma libraries before the SUI 3 audit — each plugin had its own isolated file

No source of truth
Finding Medium
Manual

every plugin used hand-coded spacing, color values, and radii — no token pipeline

Token gap
Hypothesis

Building SUI 3 Atomic — a single token system, shared component library, and unified Figma Variables — before redesigning any plugin screen would eliminate UI inconsistency and cut onboarding drop-off across all six plugins.

What we changed
01

Token architecture

80+ Figma Variables covering color, spacing, radius, and type — a single source of truth propagated across all six plugins simultaneously.

02

Atomic component library

Base atoms → molecules → organisms, all connected to tokens. Every component variant tested at all breakpoints before plugin redesigns began.

03

Unified Figma Variables

Single library file. One variable change cascades to every plugin frame — no more per-plugin manual updates or style drift.

04

Design-to-code handoff system

Token names matched 1:1 to SvelteKit CSS custom properties. Zero translation layer between design and production implementation.

Post-launch proof
200+ Components audited pre-SUI 3
80+ Design tokens Figma Variables
6 Plugins unified one system
−43% Onboarding drop-off post-launch

Hypothesis confirmed — onboarding drop-off fell 43% and support tickets citing UI confusion dropped within 4 weeks of the SUI 3 rollout.

Onboarding drop-off measured across new free-tier installs in the 8 weeks post-SUI 3 rollout compared to the same period prior year.

02 — Smush

Next Chapter

Smush

Image optimization — Ultra, Lossy, and Lossless compression at scale.

Active Installs 1M 2M+
Bounce Rate −37%
Ultra vs Lossy

Image Optimization

Smarter. Every time.

Ultra · 5× NEW
Lossy Lossless
Ultra vs Lossy
better

Pro-exclusive Ultra tier. Lossy and Lossless stay free — always.

Re-Scan Logic

Already-optimized images get a second look on every update.

If a better algorithm exists, Smush finds it automatically.

Ultra delivers 5× the file reduction of Lossy — for sites where every kilobyte matters. Lossy and Lossless remain free because not every site needs the maximum.

The library rescans on every plugin update. Better algorithms get applied retroactively — without any user action required.

Before → After · SUI 3

01 // Smush · Original Userflow

Before · Smush v2
00:00 00:00

02 // Smush · SUI 3 Redesign

After · Smush SUI 3
00:00 00:00
Figma Prototype · Smush v3
Smush · Prototype Validation
00:00 00:00
Core research finding · Smush

Images were compressed.
Just not compressed enough.

500+ reviews audited 6 support threads Smush v3 audit
"

It said everything was optimized. I tried rescan on a whim and it found 200+ images with another 38% to save. I had no idea.

Community thread · WordPress.org · Smush reviews
Research signals · 500+ reviews · 6 support threads · v3 audit
Finding Critical
4–5%

avg file reduction with Lossy on large images — industry benchmark is 60–80%

Compression ceiling
Finding Critical
#1

support pattern: "Smush ran but my images are still large"

Trust gap
Finding High
Never

previously optimized images re-checked after algorithm updates — stale library by default

Stale library
Finding High
0

guidance on which tier to pick — users chose Lossy by default unaware Ultra could save 5× more

No guidance
Finding Medium
Missing

email digest, background toggle, and onboarding guide were absent in v2

Feature gap
Finding Medium
Manual

every re-optimisation required user-initiated action — no set-and-forget capability

Manual overhead
Hypothesis

Introducing Ultra (5× compression), auto-rescan, an onboarding tier guide, and email reports would break through the 4–5% ceiling — and give users confidence the library was always at its best without manual effort.

What we changed
01

Ultra tier · New, Pro-exclusive

5× better reduction than Lossy. Tested on 10–20 MB images across all color profiles and image types. Lossy and Lossless remain free.

02

Auto-rescan library

Re-checks every image after algorithm updates. Better compression applied retroactively — no user action needed.

03

Compression tier guide

Inline comparison of Ultra, Lossy, and Lossless with plain-language guidance. Pick once, Smush handles the rest.

04

Email reports + background toggle

Compression digest sent to admin after each run. Toggle to control when background jobs run — set it and forget it.

Post-launch proof
Ultra vs Lossy large image dataset
Lossy / Lossless algorithm improvement
2M+ Active installs up from 1M
−37% Bounce rate post-launch

Hypothesis confirmed — Ultra adoption hit 34% of Pro users in the first month. "Still large" support tickets dropped significantly after rescan shipped.

Ultra tested on a large dataset of 10–20 MB images with full color profile variation across all supported image types.

03 — Hummingbird

Next Chapter

Hummingbird

Speed & performance optimization — Critical CSS, JS Defer, and Asset compression.

Page Load 5s <1s
Performance Gain +75%
Critical CSS NEW

Performance Optimization

Critical. Fast. Clean.

Critical CSS NEW
Defer JS NEW
Asset Optimization
Page Load Speed
5–6s <1s

Measured across 20+ live WordPress deployments with varied plugin stacks.

Performance Gain
75 %

Faster page renders via Critical CSS generation and JS Defer automation.

Users were confused about which optimizations were active. We redesigned Hummingbird to show live status inline with every feature — Critical CSS, Delay JS, Asset Optimization — so the interface answers the question before anyone thinks to ask it.

Progressive disclosure kept power features accessible without overwhelming beginners. The new SUI 3 Atomic components unified every setting panel with a consistent visual language.

Redesigned UI · Hummingbird SUI 3
00:00 00:00
Core research finding · Hummingbird

Users weren't failing at optimization.
They were failing at trust.

214 surveys 8 sessions Hummingbird beta
"

I set it up, it said done, but pages were still slow. I turned everything off thinking it wasn't working.

User 4 · Session recording · Hummingbird beta
Research signals · 214 surveys + 8 usability sessions
Finding Critical
67%

couldn't confirm optimization was active post-setup

Visibility gap
Finding Critical
#1

support category: "is this even working?" before inline status

Trust failure
Finding High
3 of 8

session users disabled features they thought were broken

False negative
Finding High
4.2m

avg time wasted re-checking already-configured settings

Wasted effort
Finding Medium
v2

only had CSS Minify + basic JS toggle — no Critical CSS, no JS Defer

Capability gap
Finding Medium
0

visual difference between "optimizing" and "idle" states in v2

State clarity
Hypothesis

Making status visible inline — and shipping Critical CSS + JS Defer as default-on replacements for CSS Minify and the basic JS toggle — would eliminate the trust gap and reduce the support burden.

What we changed
01

Inline status on every control

Critical CSS generation state, JS Defer exclusion counts, compression ratios — surfaced next to each control, always visible.

02

Critical CSS · New, default on

Replaced CSS Minify. Auto-generates above-the-fold styles. Enabled by default for all new installs.

03

JS Defer · New, default on

Replaced basic JS optimization. Safe script deferral with built-in exclusion logic from day one.

04

Progressive disclosure

Clean surface for beginners. Full control accessible one level deeper for power users.

Post-launch proof
<1s Page load from 5–6s
+75% Performance 20+ deployments
−42% Support tickets "not working"
−37% Bounce rate post-launch

Hypothesis confirmed — "not working" tickets dropped 42%. Users stopped disabling active features within 2 weeks of launch.

Measured across 20+ live WordPress deployments with varied plugin stacks.

Design → Production

01 // Figma Design · CSS Info & Tags

CSS Info Icons · Figma
00:00 00:00

02 // Live Beta · Critical CSS SUI 2

Critical CSS · Live Beta
00:00 00:00
04 — Snapshot

Next Chapter

Snapshot

Backup & restore — Scheduled backups, selective restore, and cloud storage.

Backup Success 99%
Restore 1-click
Selective DB or Files

Backup & Restore

Backup all. Restore one.

Selective Restore NEW
Backblaze + OneDrive NEW
Auto-Schedule
Backup Success Rate
99 %

Reliable scheduled backups across all connected WordPress sites.

Restore Scope
DB · Files · Both

Restore only what broke — database, files, or both. One click, no technical decisions. Critical for low-storage sites.

Snapshot removed the anxiety from site maintenance. Selective restore, backup composition badges, and two new cloud destinations — Backblaze and OneDrive — gave users control they didn't have before.

SUI 3 email alerts and in-dashboard notifications mean you know the moment a backup succeeds or fails — not when disaster strikes.

Snapshot · 4.10.0 Beta Walkthrough
Snapshot · 4.10.0-beta · Selective Restore
00:00 00:00
Core research finding · Snapshot

Backups felt like
a developer task.

User interviews Support threads Snapshot v4 audit
"

Users were unsure if their backups had run, where files were stored, or how to trigger a restore. Critical status was buried behind technical jargon and nested screens.

User research · WPMU DEV user survey · pre-Snapshot 4.10
Research signals · user interviews · support threads · v4 audit
Finding Critical
100%

of restores were all-or-nothing — no scope selector. 67% of users who needed only a DB fix restored the entire site, risking content overwrites.

No granularity
Finding Critical
0

visibility into backup composition — users could not see whether files, database, or both were captured in a given backup entry.

Hidden composition
Finding High
1

cloud destination supported (Amazon S3 only) — no Backblaze or OneDrive, locking out users on non-AWS stacks or with existing OneDrive licences.

Destination lock-in
Finding High
Silent

backup failures — no in-app notification, no email. Users discovered failures only during a disaster restore, not when the job ran.

Silent failures
Finding Medium
4 steps

to confirm restore scope — users navigated four screens before seeing what would be restored. High abandonment before commit.

Restore UX friction
Finding Medium
Manual

verification required post-backup — no badge, no confirmation detail. Users had to open individual backups to confirm what was saved.

No post-backup proof
Hypothesis

Status visible at a glance. Restore in one action. Selective scope (DB · Files · Both), backup composition badges, Backblaze + OneDrive destinations, and SUI 3 email alerts — no multi-step wizard, no technical decisions. Users know exactly what ran, what was saved, and where.

What we changed
01

Selective restore engine

Full site, database only, or files only — chosen upfront before any restore is initiated. Low-storage sites can target just the DB without touching the file system.

02

Backup composition badges

Every backup entry shows a DB · Files · Both indicator. Know what was captured at a glance — no need to open the detail view to verify.

03

Backblaze B2 + Microsoft OneDrive

Two new cloud destinations alongside existing options. Backblaze for cost-efficient object storage; OneDrive for teams already in the Microsoft 365 stack.

04

SUI 3 notifications + email alerts

In-dashboard notification and a branded email on every backup event — success or failure. Designed with SUI 3 components for full visual consistency across WPMU DEV plugins.

Post-launch proof
99% Backup success scheduled across all sites
−67% Abandoned restores vs. all-or-nothing v4
+2 Cloud destinations Backblaze + OneDrive
3 Restore scopes DB · Files · Both

Hypothesis confirmed — selective restore reduced abandoned mid-restore sessions by 67%. Users on low-storage sites could target just the database, avoiding the file system entirely.

Restore abandonment measured across Snapshot beta users in the 6 weeks post-4.10.0-beta rollout. Abandoned restore = user-initiated restore that exited before completion without reaching a confirmed clean state.

Closing

What I Owned.

End-to-End

SUI 3 Atomic Design System

Token architecture, component library, monochrome mode for white-label use. Every plugin in the suite was built on this foundation.

End-to-End

Smush Compression Flow

Reduced the core flow from 7 steps to 4. Led every Maze test and synthesised findings into the shipped design.

End-to-End

Snapshot Restore UX

Scoped selection redesign (DB · Files · Both) — eliminated the top support ticket category within the first quarter post-launch.

Visual Direction

Hummingbird Onboarding

Led Figma system and interaction design. Product defined the performance metric triggers and threshold logic.

Audited

SmartCrawl & Beehive

Mapped to SUI 3 tokens and audited for inconsistencies. Full redesign scoped for a subsequent phase beyond my tenure.

What I'd Do Differently.

Snapshot Restore Modal

I'd have run a second Maze test before shipping. The first round showed clear improvement — but users were still over-reading the "Selective Restore" options before committing. A follow-up test would have told me whether the bottleneck was copy or information architecture. I shipped the first iteration and moved on to Hummingbird. That's the call I'd revisit.

Token Governance

SUI 3 scaled across six plugins with no formal deprecation protocol. Old alias tokens persisted in legacy components longer than they should — visible in the visual gap between fully updated and partially updated plugin screens. A token governance doc from day one would have prevented that drift.

Explore

More Projects

Ideajam Kanban SaaS Redesign Work

−68%

Task Steps

UI/UX Designer · 2021–22

11 steps → 3.5 avg. Zero-training enterprise UX.

Rebuilt a B2B Kanban SaaS from the ground up with a white-label system, collapsible sidebars, and a drag-and-drop model that eliminated onboarding friction entirely.

White-label systemB2B SaaSZero-training UX
View