All designers at Automattic are tasked with quarterly empathy challenges to help us better look at our products from the perspective of our users. Our most recent task was to recreate an existing post using our new Gutenberg editor.
While I’d definitely read a lot about the editor, I hadn’t actually gotten into the nitty gritty, so I was excited to dive in!
Because this is an empathy challenge, I also tried to approach this exercise from the mindset of one of our users. So in other words: limited time; a single screen; limited/no CSS knowledge; and expecting intuitive behavior.
I think I must have fully embraced this after I installed Gutenberg. Even though I totally knew better, I still spent a couple of thoughtless minutes hunting around Calypso before remembering I needed to go over to wp-admin to get started.
The article I chose was A Little Story… A Journey to Find What Sustainable Coffee Really Means because it was literally the first editor’s choice story that came up in WordPress.com’s reader. I didn’t want to browse through options or try to angle for anything in my chosen post, but rather just experience building a post as any average user might.
The post was pretty long, but also FULL of blocks! So I was excited to give it a try.
In a past life, I’d used a WordPress.org theme that had a block-based layout editor, so I think that was stuck in my mind for what I was expecting.
I started out pasting each individual paragraph and image. Eventually, I needed two columns – one for the text and one for the pull quote – and definitely assumed this would be possible. After a bit of hunting around, I realized it wasn’t. It seemed my knee-jerk instinct was that I wanted to use Gutenberg to design my page.
At this point, I readjusted my expectations and just copy and pasted and the entire thing into the editor. It actually worked pretty well – the image and caption layouts got a bit messed up, but nothing beyond what I might expect.
Editing things was straightforward, and I was able to easily add images and change the positioning of text and quotes. No complaints there.
My page definitely didn’t match at this point – CSS and theme adjustments would be necessary to get it fully there, but as I was about an hour into things, that seemed further than my pretend user persona would want to go for this page. (And I still needed to draft my post!) So I had to leave it at that.
Overall, I felt fine about the editing experience but was wondering if it had actually felt better than my normal Calypso experience.
So post-screen recording, I went into Calypso and tried doing the beginning of the page there. And I do get it! One type of content bleeds into another and I quickly missed the clean division of sections from Gutenberg. Also it made me appreciate the brilliance of Gutenberg’s ability to change the type of content within a box with the click of a button!
But I do think there is going to be a percentage of users that will want and expect to use Gutenberg to design their page to some degree. (which of course becomes complicated/messy coupled with themes) I think this framing is the result of coming at it from a marketing perspective. If we talk about easy to arrange blocks to the average user, many may think about design and layout first. I even did! I could see frustration emerging from users who come into it with that mindset.
Automattic Design 