o2 / P2 for WordPress
Communication is Oxygen
A common refrain heard in the distributed halls of Automattic is “Communication is Oxygen”. When precious few of your employees live or work near each other, there’s a strong need for an overabundance of communication to keep things running smoothly. Email would be a usual suspect for how to fix this kind of problem, but Automattic isn’t a usual kind of company.
Because WordPress is at the core of the Automattic ecosystem, it was a natural choice to use blogging to communicate with each other internally when the company started. In 2008, Automattic released a theme called Prologue, and its main features were pretty novel at the time, and based loosely on the Twitter UI:
- Put the new post editor right on the home page, at the very top
- Use this home page to display the full content of each post, as well as threaded comments beneath
While this sounds pretty simple in theory, it achieves stunning results: coworkers all over the globe use a skill they already have, using a tool they already know (blogging, WordPress), and collaborate to build the software powering all of it. Dogfooding at its finest.
About a year later, Automattic released P2, the successor to the Prologue theme. P2 was a great step in the right direction, and it worked really well for years (and still powers the WordPress.org blogs used to collaborate on the open-source side). It was lacking a few modern features though, most notably real-time notifications, AJAX-powered interface elements, @-based username mentions, and cross-posting to multiple blogs at a time.
In 2011, P2 was rebuilt using Backbone.js. Keeping mostly the same user experience, the advanced features were abstracted out from the main theme and placed into a plugin called o2. The goal of this was to be able to “o2-ize” any theme at all. This abstraction allowed us to really start iterating on the interface toward a more modern communication tool, which was what I was tasked with designing.
I took the clunky text-link-based actions that clutter each post and comment, and replaced them with a dropdown/button/icon system used to place functionality in consistently findable places. I researched, designed, and prototyped UX for:
- An overall cleaner look at feel
- Real-time, in-page notifications
- A brand-new user mentioning system, including exactly how to pull relevant content into the notifications (which has also made its way into BuddyPress core)
- Cleaner threading
- Mobile page designs, including better comment threading for narrow devices
- Mobile app UX workshop
- UX structure and strategy around a (cancelled) plan to bring P2 interactivity to Calypso
An example of what P2 looks like in common use at Automattic.
Another example of how P2 can look, as it adapts to any customization WordPress can throw at it.
Data visualization of user research for how @mentions are used in practice, helping us determine which text to pull out of the post for a specific user's mention notification.
User research for how people use @mentions.
Sketches for cross-posting UX.
Cross-posting UX design mockup, made inside of an interactive prototyping tool I developed just for P2.
Final UX for @mentions
Logos I designed for Team Mercury