Sketch an Etch! Community Sketching Exercise for Admin

Here's how we ran a community sketching exercise to design Gatsby Admin.

To start designing something called Gatsby Admin, we held a community sketching exercise. In this article, along with seeing screenshots of some sketches, you can learn how diverse ideas helped us converge on something closer to the right solution, and how you can run your own sketching exercise.

Shannon Soper
June 19, 2020

What is a sketching exercise, and why do it?

A sketching exercise is a time when a small group of people come together and sketch their ideas for a user story, feature, or product and show each other their sketches.

The purpose of a sketching exercise is two-fold:

  1. create a spirit of collaboration between design, engineers, and PMs before starting design and development on a project
  2. generate ideas that diverge and then hopefully converge on an MVP

How to run a sketching exercise

There are many good ways to run a sketching exercise. Here’s what we’ve done at Gatsby.

Gatsby Community Zoom Meeting

This screenshot shows seven Gatsby community members, including employees and open source contributors, meeting on Zoom for a sketching exercise

Gatsby Admin Sketch

Shyam’s sketch of what onboarding could look like in Gatsby Admin someday

Before meeting:

If you’re organizing the mtg:

  • invite about 5 attendees ideally, a couple designers, a couple engineers, and a PM. I highly discourage larger groups; nevertheless, for groups larger than 5, you can divide into smaller groups in person or in Zoom “virtual rooms”, no more than 5 people per group
  • in the meeting invitation, plan at least an hour. 1.5 hours is ideal.
  • for any attendees who have never been to a sketching exercise before, it will be super worthwhile to sync with them for 10-15 mins ahead of time to make sure they know what to expect. Basically they need to know what quality of sketches the group expects (hint: really scribbly! No pressure!) and what a user story is. It takes way too much time to introduce everyone to the concept of a sketching exercise in the meeting itself.
  • plan 1-2 user stories or screens that people will sketch for the sketching exercise. It is difficult to do any more than this.

Meeting agenda

Include this agenda in your calendar invite.

Role assignments

Each sketching group needs 2 people with these roles:

  • time-keeper: person will need to set a timer for sketches and discussion and notify folks when the timer is starting and when time is up
  • note-taker: takes notes on what feedback people give on the sketches and shares notes with group

Sketching

  • 5 minutes: Everyone draw (with pen/pencil & paper) one user story (e.g. “user can browse plugins”)
  • 1 minute: Everyone shares sketches somewhere the whole group can see. We upload ours to a Slack channel under a thread with team name in this format: plugins-sketch-YYYY-MM-DD-[team-narwhal]

Feedback

  • 1 minute: Person who drew sketch explains it to their group
  • 2 minutes: other people in the group ask questions and comment on the sketch. It’s most useful to share observations and avoid value judgments (avoid saying good, bad, better, or worse). For example, describe your what you see, think, feel, and notice “I had this thought. I felt this. I had a question. What is this? I think this is an effective way to meet user needs because…I’m seeing a difference between these two sketches.”

Repeat the sketching and feedback exercises. 1 hour minutes is enough time to do 2 rounds of sketching if everyone sticks to the timer. 3 rounds is honestly more ideal, because people tend to diverge during the second round and converge during the third round.

After meeting:

  • consider thanking everyone who came
  • I often pull the sketches into a page in Figma and create my own “summary sketch” to distill the most MVP-ish idea that I took away from the meeting. Then I share that summary sketch with folks and keep revising it and getting feedback on it.

What user story did we sketch for Gatsby Admin?

A user opens localhost:8000/___admin for their Gatsby site. What is the first thing they see?

Key takeaways

See the agenda and all sketches and notes in this googledoc.

Here are some sketches.

A sketch of Gatsby Data Sources

This screenshot shows an idea from Morten about how to show an overview of a Gatsby site’s data sources

Screenshot of ObservableHQ

Kevin shared a screenshot of ObservableHQ to illustrate a lefthand navigation pattern that could work for how we organize recipes in Gatsby Admin too

We saw some common user stories emerge:

  • user can add data to site
  • user can see all data sources feeding into the site
  • users can see a gallery of recipes from the community and an aggregation of what you’ve viewed/like
  • users can share recipes
  • users can edit recipes and see the result in real time
  • user can see edit history like google doc
  • user can see where each data type is being used in a page template

Next steps

Comment on the Gatsby Admin prototype here!

Written By

Shannon Soper

After years of discussing, with anyone willing to listen, the particular failings of poorly designed things, Shannon discovered she could get paid for this strange hobby. Now, she works on improving developer experiences for Gatsby developers everywhere.

Follow Shannon Soper on Twitter
Previous Post

My top 5 design principles

Next Post

It's never too late to start