Customizing your site
I was the customization experience design lead in 2017-2018. During that time, my engineering co-lead and I focused on making numerous UI/UX improvements to the WordPress Customizer tool.
Additionally, I co-led the WordPress 4.9 development cycle where we focused on the site customization experience.
Revision history
It was too easy to make permanent changes to your website in the Customizer, so I designed a workflow for previewing and restoring previous revisions of your site.
“Mel is a designer that cares about every detail and the impact of her work. I’ve been lucky enough to see her grow over the years into a design leader within open source. She has robust design knowledge, refined editing skills and a strong sense of art direction. Her voluntary work on campaigns is a testament to her dedication to making a difference in the work she does. I’ve seen her adapt to work on a team but also take the lead in prominent projects. She always focuses with empathy on the task in hand.”
Tammie Lister, Senior Product Designer at Automattic
This flow also extended into making CSS changes to your website.
Theme uploading
There wasn’t a quick and easy way to preview new themes and change your site design on-the-fly, so we added a way to upload and previous new themes directly in the Customizer.
Schedule and draft changes
At the time, every change you made in the Customizer had to be published or discarded. We designed a system for drafting and scheduling changes.
Building with blocks
In 2018, we launched WordPress’s new block-based editor. It shifted the user’s experience from simple rich-text editing to a more “what you see is what you get” (WYSIWYG) editing experience.
As part of the team exploring how block editing could work, I designed the interface for several of the blocks launched with the editor. I also designed a custom suite of blocks to power WordPress conferences.
Converting widgets to blocks
As customization lead, one of my early Gutenberg tasks was to redesign default WordPress widgets to be blocks.
Part of this process was also aimed at establishing components and patterns to use in future blocks, and formed the foundation of our first Gutenberg design system and style guide.
Recent Posts block
RSS block
Calendar block
Supporting hundreds of conferences through design
I created a suite of blocks to help people build websites for WordPress conferences.
I designed blocks for listing organizers, speakers, sessions, sponsors, and schedule grid.
Sessions block
Speakers block
Playlist block
Most recently, I looked at designing a block for creating audio playlists directly on your site. We had this feature in previous versions of WordPress, but it hadn’t been translated into blocks yet.
Installing blocks
Additionally, I designed a flow and the interface needed for installing blocks directly inside of the WordPress editor.
You can see each step in this flow documented in the public post I wrote updating the community on the project status and its GitHub issue.
Block directory
WordPress offers directories for installing new themes and plugins. I designed a new directory for installing blocks.
My biggest goal with this project wasn’t just to create a central location for installing blocks, but also to start standardizing components across the various directories and list table pages in WordPress.
Learn more about my approach in the community update I shared.