• Auto updates

    One of the great features of WordPress is auto-updating of both the system and themes, plugins. However, this screen and options in general within WordPress was getting rapidly out of control.

    The problem: an ageing interface had no more room to accommodate new options

    New release, new options – but what about design?

    A new release was due with more features for auto-updates. However, the design hadn’t been done for it. The interface had ended up looking far worse, way more complicated and almost unusable.

    The ideal state was created, using existing WordPress styling but bringing in a much simpler, cleaner interface to settings.

    However, there was an issue the deadline was approaching and time was short. Within a short time, I pivoted to bring the foundations of the ideal into the existing.

    The solution: iteration, ship and review

    What shipped wasn’t the endpoint, it began conversations that are leading to far more extensive iterations than we even thought possible on this screen. One thing this project showed was that to even change the smallest thing, some major issues needed resolving. However, the experience and clarity was iterated in rapidly and the release was met.

  • 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.

  • XWP

    Summary

    1. Research: discovery, client projects.
    2. Collaborating: agile team (PO/PM/lead design/lead engineer).
    3. Leadership: formed design practice, Lead Product designer.
    4. Skills: designOps, UI, UX, animation, product design, design systems, documentation, training, sales/estimation, mentoring.

    The problem: how to empower the enterprise through performant experiences

    Working for XWP working on various Enterprise clients. I also help with hiring, sales, and estimating. I am the Lead Product designer there, having created that role with them. I have grown the design team, to now be fully global, with a focus on async communication.

    I created a Learn Gutenberg course and learning materials that now all Engineering hires follow along with advising around the new editor.

    System focused

    My passion for design systems continues at XWP both in working on one collaboratively that designers use to build client sites and in creating ones for clients.

    Sample projects

    I have got to work on a range of projects in my time at XWP, from a design system for a network of 13 sites, a designer for a hearing technology startup, to advising converting to WordPress a complex design. I also was sponsored to continue my contribution to WordPress as a core committer.

    I have also worked on extending the editor and recommending options there.

    Working practice

    During my time at XWP I have worked on projects in an agile team format. Each having both discovery and retrospective to them. I also have worked on sales and hiring. As part of my time there I have documented the design practice and collaborated on a handbook for design, ensuring that everything we do is written down.

    I also created visuals for sales presentations to deliver ‘what ifs’ to clients.

    Growing a design culture

    One of the big things I have focused on whilst at XWP is growing a culture of design. From bringing in design health checks to async feedback weekly sessions and check-ins – the design community is growing. It has doubled in size with my leadership and has also seen a culture of mentorship and feedback thrive.

  • Upfocus

    Summary

    • Research: competitive analysis/market.
    • Collaborating: directly with founder also small team.
    • Leadership: advised on hiring the first designer, ‘shape up’ ideas.
    • Skills: designOps, advisor.

    The problem: turning feedback into something to use

    Advisor for Upfocus on their user experience direction, creating their design team foundation, practices and supporting as they move to look to the first round of investment.

    Initially, I worked on a short contract focusing on user experience and review, this led to collaborating as a long term advisor. As part of the role, I have helped form each product sprint using the ‘shape up’ method with the founder. I also was part of hiring their first design hire and helping grow design as a practice.

    Sketching seeds

    One of the key roles I have served is to funnel inspiration and sketches during the shaping. This might be to visual draw an idea just enough (not too much), so the designer can form. It also might be competitive analysis and commentary.

  • Mastodon

    Summary

    • Research: usability testing.
    • Skills: reporting.

    I worked on a contract to run a series of usability tests for Mastodon. This then led to creating a report of advice for experience recommendations and iterations.

    The problem: does this new experience work?

    The testing carried out was around the login and onboarding process.

  • Extendify

    Summary

    • Research: competitive analysis, market, usability testing, user interviews.
    • Collaborating: directly with founders as formed MVP.
    • Leadership: Head of Design.
    • Skills: designOps, advisor, product design, UI, UX, branding, design system

    I began working as the Head of design at Extendify when they had no real product. During my time there I worked on the initial experience and worked on making the ideas of this early startup grow into reality. I continue to support them as an advisor.

    The problem: empower easier creation of content and lower barrier of WordPress

    The goal of Extendify is to truly extend the experience of WordPress, starting with templates and patterns to ‘jump start’ any site.

    The solution: build on the new design tools

    The journey

    The browser

    First, we worked on the browser to discover templates and patterns within WordPress. This was to ‘extend’ the options you have out of the box with WordPress and bring design into the hands of more people.

    As with anything it began with sketches, a simple format using the core editor foundations. The brief was to be as native as possible, truly extend.

    The screen had multiple iterations over many months ending in a release and now it has grown from this start.

    The styling system

    In order to create templates and patterns rapidly, natively; I worked on creating a system that drew both on design systems and was strongly connected to the WordPress design system roots itself.

    From just a few combinations and simple styling, multiple combinations of templates and patterns were easily created and then offered in the browser.

    The onboarding

    As the vision for what we were creating grew, our view looked to how to easily onboard and combine these foundations into hosting – for example with an onboarding process or perhaps a site builder.

    The first step was to create a simple, branded onboarding that could be used in the browser. By now the branding was evolving, the logo had been simplified along with colors.

    Further explorations looked at a standalone version for hosting.

    The design system

    One of the pieces begun in this was creating a system and brand for the startup. This has evolved, but by laying a strong foundation the natural evolution was possible.

  • 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.

  • WordPress

    Summary

    • Research: usability interviews, testing
    • Collaborating: global teams, community teamwork and co-leading
    • Leadership: design lead, design producer, design team lead, testing team lead.
    • Skills: designOps, product design, theme design, design systems, branding, presentations, design relations, documentation.

    WordPress is open source software you can use to create a beautiful website, blog, or app. I have worked across every aspect of WordPress, from the community itself, product and even the mobile app.

    I have been a Design Lead for 3 releases of WordPress (5.0, 5.4, 5.6) and involved in numerous others. I also led a default theme release and supported several others. I am a core committer and component maintainer.

    Testing

    As part of my role as design lead of the editor I built on my long-standing practice of triage and testing in the open source project. I had led for a while testing initiatives and saw testing tables and a range of things from interviews to tests taking place at community events. This happened from WordCamp US through to several days spent running user interviews in Tokyo. I also spent a lot of time gathering user feedback across various channels and even going on-site to observe editing at scale.

    WordPress examples

    Here are various examples of work that I have done as part of my time on the WordPress project.