Re-inventing Local dev

In late 2016, Flywheel acquired Pressmatic — an app for developing WordPress sites on your computer instead of the web. It was a decent Mac app, but in effort to launch with a splash and give the UI room to grow, it needed a bit of a (scrappy) rethink.

The goal was the most-loved community tool. We dropped the price from $129 to free, renamed it to the so-obvious-it’s-awesome “Local” — a nod to its job and the WordPress community, and I set out to bring the app into the Flywheel family.

Clearer UI

I quickly realized the only true layer of IA in Pressmatic was the site. As we dreamt of features like an add-ons library, in-app support, and connecting to hosts like Flywheel (see “Local Connect”), we needed a way to have features that conceptually were at the same level of heirarchy as a site.

I landed on solving this with a fun side nav. As a desktop app, horizontal space is cheaper than vertical due to screen aspect ratios, and this gave me a great spot to place a more prominent “add a site” button — a big win, considering that’s the core activity of the app.

local-main@2x
local-navs@2x-1

New Local nav in light + dark mode (added later)

content-heirarchy@2x

Intentional heirarchy

The new navigation set up a great content paradigm— the further right, the more specific. Expanding from there, I was able to create five levels of content depth in a single screen. Some of the core Pressmatic UI patterns were even reusable, saving time on initial dev.

These patterns continue to serve us well, but are currently under review.

Simpler site creation

A main reason people choose to use an app rather than code for things like this is because they don't know what they're doing and don't want to mess something up they can't fix. I needed to make sure the create site flow was incredibly easy.

New-site-Choose-environment-Preferred@2x
New-site-Setup-WordPress@2x-1

I de-prioritized advanced features, clarifying steps for the majority of users. I introduced a "layered" concept for focused, top-level tasks. This effect proved to be valuable later on in addressing other areas of the app.

It's the best thing ever for local development if you ask me."

— CHRIS COYIER, CSSTRICKS.COM

Community-–-First-Pull-w-staging-Create-new-–-2@2x
connect-tab-site-connected-–-1@2x
update-2@2x
environment-control-–-28@2x
Local-Pro-Site-Overview-–-3@2x
icons-local
DMG-Install-—-Final@2x
drag-and-drop@2x
install-–-1@2x
environment-control-–-21@2x
Dash-Warning-No-button@2x
environment-control-–-23@2x
multiple-sites-selected@2x
ABOUT-LOCAL@2x
browser-login-2@2x
environment-control-–-22@2x

Project impact + reflection

Local is still one of the coolest apps I've ever worked on. The re-design and subsequent next few years of work I did on the app helped it grow to nearly 100k MAUs, becoming the most-used app in the WordPress ecosystem (other than a code editor). It's brought a ton of joy to peoples' workflows. Anyone whose ever tried to dev a WordPress site locally can attest to the literal hours of troubleshooting it sometimes takes to solve simple, stupid, problems. It always makes me excited to see people like Chris Coyier of CSSTricks.com making blog posts about it, teachers getting their students up to speed on it the first day of class, or even random YouTubers in Japan doing tutorial videos.

This product success, of course, isn't just my fault. The dev team are literal geniuses, the PMs that have worked on the project have focused in on the important problems to solve, and for the last 8 mos or so I have had someone else doing the design work for the product. At the end of the day it's just super cool to have worked on something providing such a tangible benefit to peoples' lives.