The problem
Drupal is an incredibly powerful content management system, but it has a reputation for being difficult to use. The editing experience was clunky and unintuitive, and the site building experience was even worse. This was a problem for our users, and it was a problem for Drupal as a platform. We needed to create a new experience that would make Drupal more accessible and easier to use, while still maintaining the power and flexibility that our users love.
My involvement
This isn't a typical design project, usually you'd be there from the start, but I was late to the party. Originally I was going to be a front-end engineer on this, but as the project was moving fast and at an early stage, a design system hadn't yet been formalised. I took the initiative to pull together the existing design work and build a cohesive system from it.
This is how I was offered the job of Senior Product at Acquia. I was making strides on the design system, and created the design files that every developer would want to work from. From here I organised everything into a clear atomic design system.
While organising I improved on the UI for each of the components. Due to the deep technical complexity of Drupal, there were some aspects of our UI that needed updating. For other areas I created completely new components to make our interface more intuitive.
Since then I have led a comprehensive redesign of the UI, worked with developers closely on the interaction design, designed multiple new features that required turning very complex workflows into simple processes, collaborating with designers on new features by bridging the gap between design and the complex engineering constraints of the product, and a lot more.
Crafting a design system
Joining the project somewhat late meant that certain technical decisions had already been made, and there were certain design decisions that had been made too. One of the largest challenges was that a design system hadn't yet been formalised. I worked to build on the strong foundation of existing UI work, auditing and consolidating designs into components, and organising everything into a clear atomic design system.
The codebase was using Radix as its underlying component library, so I had to create the design system to fully reflect this. I found that Radix offered a design system file for the atomic elements. With this I had the core building blocks, however, I needed to remove all of the options that we weren't going to utilise for other designers on the team. Removing options meant that a designer couldn't make an incorrect UI anymore.
Over time I designed a lot of components to be more intuitive and better suited to the needs of our users. With this I also created clear rules and guides for how to use each of the components. On top of this there were usage guides for icons, colours, and text to ensure a consistent experience when using Drupal Canvas.
Components created with variables and autolayout
Rules and guides created for consistency
Every component organised into groups and documented
Structuring the shell
One of the largest challenges of this project was structuring the shell of the product. We needed to fine-tune a system, that would not only serve as a site building and editing interface for our core product, but one that would be future-proof.
The shell was created to take up as little space as possible, while still being able to expand to show more options based on the task that a user might take. If they wanted to add new items, or edit their existing page, the items become contextual to the area of the UI that you're in.
One of the largest challenges was creating all of this that would work today, but ensure that it would facilitate new features that would be added in the future. This meant solving problems that we didn't necessarily have yet.
Each panel has been designed with a consistent experience. It never navigates the user away at a top level, it always acts as a navigation device, and only navigates once you’ve selected a context.
The top bar has been designed for multiple different functions. We have a way to exit Canvas, change the content that you’re previewing, or perform contextual or global actions in a click.
Creating new features
Each one of the features that I worked on were extensively broken down into clear user flows. This was to ensure that the engineers and other designers working on the project could understand the complex workflows that we had to create, and how we turned these into simple processes for our users.
Step-by-step breakdown of the user flows
What I've done
Crafted a design system
An atomic design system built using an existing UI library. Extended for our needs and evolved with a focus on ease of use.
Documented everything
Every single component is clearly defined and explains it’s use.
AI Native
AI was a requirement, so it was built in to feel as seamless as possible.
Help and train designers
As the lead for the project I’ve helped senior designers and trained junior designers on the project
Handled the small details
Every piece of the UI went through me, from working closely with the engineers
New features
I’ve designed new features. There have been prototypes and user flows to showcase it all
Results
Since the 1.0 release, Drupal Canvas has been adopted by over 4,500 websites in just three and a half months. For a product built to modernise one of the web's longest-standing CMS platforms, this adoption rate reflects both the demand for a better experience and the quality of what the team shipped.
End notes
As you can probably tell, this isn’t a typical case study where I go into absolutely everything. If you want to know more about the project, I’ll happily show you how I’ve created everything listed above and more. This has been created as a way of showing the value I’ve generated for this product.
However, this project isn’t a typical design process. Many times I’ve had to work as a product manager to figure out the requirements, or I’ve had to work as an engineer to solve technical limitations. None of this fits into the regular design workflow, but that’s fine!
Ultimately, I solve problems, but I don’t let anything get in the way of that. I think you need to be a nerd to solve this stuff, and if that means working outside of the realms of a typical product designer.