Drupal Canvas
Earlier this year I joined the Product Design team to help create the future of building and editing websites with Drupal. This is a case study on how I helped to create the future of Drupal.
Role
Senior Product Designer, Senior Software Engineer
Outcome
A new site building and editing experience for Drupal
Deliverables
Design system, User Flows, Wireframes, User Testing
Timeline
Jan 2025 - Now
The problem
We created this product to solve an issue within Drupal; how could we make the editing experience and the site builder experience better for anyone using Drupal? On top of creating this, we had to ensure that what we were building aligned with the existing paradigms within Drupal, keeping the open source community happy, and building something that could become the foundation of Drupal.
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 G 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.
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
What it looks like
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. So be it.