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.

Prologue

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.

P2

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.

o2

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.

My Role

Team Social at Automattic had historically been responsible for P2’s development. Once they ported P2 to JavaScript, I joined the team.  We changed names to Team Mercury, and focused for two years on sprints to improve and update the tool. I worked hand-in-hand with four developers to internally iterate – in front of the whole company, on software they used almost all day, daily – and increase the usefulness of this already useful tool.

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

When P2 was sidelined in favor of Calypso, we released the codebase to Github, so others could improve and refine it further.