Drupal Canvas

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 I noticed that there wasn’t a design system in place for us to build out the necessary UI. This is where I started collating everything that was available from the original designers, and started to create a design system.

This is how I was offered the job of Senior Product at Acquia. I was making strides on the design system, and bringing order to what were some pretty chaotic design files. From here I organised everything into a clear atomic design system.

While organising I improved on the UI of each of our components. Due to the deep technical complexity of the product, there were some aspects of our UI that weren’t very intuitive, or just weren’t fit for the job.

Since then I have redesigned the entire UI, worked with developers closely on the interaction design, designed multiple new features that required turning very complex workflows into simple processes, helping new designers work on new features by guiding them through complex engineering requirements, and a lot more.

Crafting a design system

As I said above, there wasn’t a design system in place for us to build out the necessary UI. This is where I started to take inventory of what we had and bring this into a sensible system. Take a look at what things looked like, and how it is now:

Components created with variables and autolayout

Rules and guides created for consistency

Every component organised into groups and documented

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 had to help and train all other 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

End notes