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.
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:
- create a spirit of collaboration between design, engineers, and PMs before starting design and development on a project
- 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.
This screenshot shows seven Gatsby community members, including employees and open source contributors, meeting on Zoom for a sketching exercise
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.
Include this agenda in your calendar invite.
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
- 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]
- 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.
- 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?
See the agenda and all sketches and notes in this googledoc.
Here are some sketches.
This screenshot shows an idea from Morten about how to show an overview of a Gatsby site’s data sources
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
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