WordPress.com is the largest installation of WordPress in the world with 131 million unique monthly users in the US. We were seeking to modernize our users’ experience by taking WordPress, which clearly still exists in its unchanged form and is in active development, abstract the core technology to an API, and build new experiences on top.
We had historically eschewed email, working together through the internally-developed P2 WordPress theme and IRC. Prior to Calypso, we usually launched code pretty quickly through Subversion to the main production codebase, and teams often iterated in silos, attending to their own needs first and foremost. Calypso changed all of that, moving a large portion of the design and development discussion to Slack and Github, adding beneficial layers of peer-based code and design review on top of each Pull Request.
The end result was a more cohesive product, for us in the code and for our users in the experience. Designers started working more closely together on specific issues across teams, developers and designers collaborated in quicker iterations to get to better solutions, and the standards we used to build the app progressed along with evolving React and ES6 best practices.
Despite this increased flow of communication and priority-dovetailing, there were still inconsistencies within Calypso’s design. In September 2014, I organized a workshop for four designers to:
- Look at the UX we’d achieved at breakneck speed over the past year and a half
- Find UI inconsistencies and gotchas
- Provide recommendations on how to bring the app into a more pure Atomic Design model
Since we were already using React, this made for a perfect time to adopt a more standards-driven UI design process, placing the idea of functional components at the heart of the design language. We reviewed every page, outlined the parts of it that differed from the UX of other parts of the app, and made general recommendations for how to bring the application more in-line with itself.
The result of these workshops were 6 lengthy internal blog posts outlining the changes that we felt should be made, and created much discussion. Some recommendations were implemented by other teams and some of them were decided against by the wider group of contributors.
My Further Role
There was a third group of recommendations which were generally agreed upon by everyone, but were not going to be worked on by anyone, so I took it upon myself to get them finished. I took specific problems that the team had seen crop up over and over again and created Pull Requests in Github to address them. I re-engineered the interfaces in question to use core Calypso React components, got my designs and code reviewed by my peers, and launched them into production. This work is evident on WordPress.com in the following ways:
- Stats modules got simplified, including a cleaner way of clicking through into detailed information
- A cleaner Site Settings section
- Sharing Settings and Connected Applications use the same components to do the same interactions
- Standardized patterns covering Connect/Disconnect, Remove/Delete and Disable actions
- I created and edited core Calypso components as-needed to express improvements needed for implementation across the entire app
Flow Diagram for how users would pass through a process connecting their self-hosted WordPress site to WordPress.com through the Jetpack plugin. The data visualization surrounding the screens shows potential user loss at each step of the way, with users having to go through WP-Admin at particular risk for being lost along the way.
A proposed design process flow, taking into account various design roles, including growth optimization.
Audit and recommendations for standardizing patterns across the app that had diverged over time.
User mental model of how people interact with their site (or a nerdy Flux Capacitor).
Wireframe outlining possible ways of getting users' attention to the state of their site, without using the already-overworked notifications system.
Before/After of Sharing Settings, a page outlined in my team's heuristics review of Calypso. The after image shows how much cleaner the UI became when using standard components in a more user-friendly way.
Connected Applications screen, before and after atomic design review.
This is currently the screen on WordPress.com to manage Pages on your blog. It doesn't seem to follow many of the UX principles in the rest of Calypso, so I re-composed it using standard components.
A simple nag screen to get users to turn on a feature of Jetpack.
A tightly-composed screen made up entirely of core Calypso components.
Since Calypso's look and feel is taking over all of Automattic's products, these are some screens I designed to make the VaultPress and Akismet plugins look more like Calypso while inside of WP-Admin.
Atomic design principles applied to the Stats page of WordPress.com.
Multi-Step Indicator component I designed for the two-factor auth workflow.
Two-factor auth workflow on WordPress.com