• Editor links

    Linking something in an editor seems fairly simple but it can be quite a complex problem. This was something I worked on extensively.

    The problem: editing is complex and not accessible

    For example, there are different types of links: posts, pages, outside the CMS links. These also need to be unlinked easily. Icons also can cause issues with comprehension so looking at each was key.

    The solution: scale back, simplify and think of basic usabiliy

    Icons grew to be incredibly important throughout the editor as the balance was made between too little or too much text.

    There were also accessibility and SEO considerations along with the need to have an interface because it’s an open source project – that could be extended.

  • Editor preferences

    One of the problems with the editor was an ever-growing collection of options. A solution needed to be found to manage them effectively.

    The problem: too many options and no place for them

    Not a new problem

    The problem of managing options isn’t new. One of the most effective solutions is often in mobile applications. This along with looking at flows was part of the extensive exploration work into what a solution could be.

    The solution: bring options into the editor gradually.

    Ideal state

    After several iterations, a prototype was reached and taken to a vision for what could be. This was a little different from what was in the editor today with a full vision of options to scale to.

    A gentle start

    Whilst the full vision was being worked on, the problem of managing the options wasn’t going away so a middle ground was reached. Using existing interface components, whilst the new ones were built an interim screen was made. After this the full vision was worked on, but it eased the problems faster with this approach.

  • Global styles

    One of the projects I got to work on within the editing experience of WordPress after the initial release, was global styles – allowing anyone to create styling without having to know code.

    The problem: every customising experience is different and it is confusing

    The trouble with styling

    Styling is a difficult problem to solve. How much or how little freedom should you give? How can this be extended? WordPress has further complications, those of themes and plugins – how do those work with whatever styling comes in? How do you truly create an open source, fully extendable styling solution that works out of the box, doesn’t overwhelm?

    The flow

    Due to the complexity of the stack made by themes and plugins, mixed with extending – the experience flow was critical. The hierarchy of styling and impact had to be considered. What could or couldn’t be done, what would be expected when – all was critical.

    To communicate this new methodology to people various visual concepts were also worked on and charts. The WordPress way was going against the natural way of CSS, that had to change.

    The solution: use the cascade in CSS, build with existing not against.

    Old problems are new

    WordPress had been there before with a feature called ‘Customiser’. There were lessons to be learnt. However, this was also an opportunity to truly think wide. Early explorations embraced going wide and really dreamt ‘what if’.

    Focus on what matters

    Through iterations the focus grew more narrow. As a project, WordPress embraces a regular release cycle and iteration. Global styles could also take this ‘cupcake’ approach to release. What was the smallest, most delicious release?

    This feature continues to be iterated on from this starting point and grows to be an essential part of site editing in WordPress.

  • Editor (Gutenberg)

    I was the design lead for the first phase of the project and continued to work on this project for a number of years during my time at Automattic. This was codenamed Gutenberg.

    The problem: WordPress had outgrown it’s editor both in technology and experience.

    This role saw many years of focus on the editor for me, resulting in co-leading a significant release of WordPress. I got to travel the world running usability tests, talking to contributors, iterating and listening. All whilst leading a growing team of full time and part time volunteer contributors both from Automattic, other companies and those with open source drive. It was an incredible experience focused on one very specific interface.

    A new editor

    The solution: create a new experience from the ground up, focusing on flow

    WordPress had been a project around for a long time, it relied on a third party editor. The time had come to create it’s own heart, to build the start of a long road that is still being walked to site editing in the project.

    This began with a paradigm shift, not only an interface change but a move from PHP to React. With this, a whole range of experience options also opened up.

    5.0

    With the launch of WordPress 5.0 the first release of the editor was live. However, this was just the start and I have continued to also work on this project in various capacities since then.

    Talks

    I spoke frequently over my time as design lead and continue to around Gutenberg. Here are some of those.