x

Love our Articles?

Sign up and we’ll send you new ones every month.

Written By:
Ceara Crawshaw

How this Checklist Came to Be

My first UX gig was working on really complex enterprise software for biotech. I was supporting two feature development teams who were mature in their approach to Agile and software quality.

Working on a powerful enterprise tool involved a myriad of use cases, which meant I ended up having to develop some serious habits to manage all the complexity. Designing interactions for a few features made me realize I was struggling to remember all the states and weird scenarios by heart—so I started to create a system instead – starting with V1 of my interaction design checklist.

My goal was to consider as many use cases as humanly possible without having to dream them up from scratch over and over again every time I worked on a project. After working out an initial version of the checklist, I collaborated with the QA team to make sure we captured all manner of edge cases. By using our checklist consistently we worked out that we were shaving off a cool 3 hours of implementation time on every feature!

In an effort to reduce how much us designers duplicate our effort, I’ve made the list available to all, as something you can follow with your design projects and use as your own living document to guide you through creating high quality design (without having to reinvent your process every time).

Checklist Summary

What this list is

A checklist to help you make sure that you’ve accounted for multiple states/scenarios when doing interaction design for digital products.

What to use it for

While it is particularly useful for complex software, it also provides great prompts and reminders even when doing simpler apps and websites.

When to use it

Treat it as a reference when starting your wireframes or early concepts. Rely on it to try to break your design (push it to the limit!) to make sure you’ve accounted for the deeper interaction and visual design aspects. I use it as a foundation when working on patterns in low-fidelity to highlight points that will be helpful later on for visual design and written documentation.

How to use it

Work through the checklist at a zoomed out level (Page) — you can try this with paper prototyping. Then zoom in to the component level and individual interactions and validate each of those.

A note about efficient documentation & design

This checklist not only helps me define interactions but also decide what should be defined and mocked up in high-fidelity and what should be defined with words and documentation. I have a strong “nerd alert” factor when it comes to documentation and making sure it’s airtight so your collaborators (and your future self) don’t have to waste time deciphering it!

Without further ado, here’s the official Pencil and Paper Interaction Checklist™ you can use as your design companion through your most complex projects.

Airtable Instructions

We recommend going through every item in the Pages, Components & Interactions tabs to make sure you haven’t forgotten anything! Some projects won’t need to take into account every one of these, but it’s helpful to be reminded of what *could* need doing and then filing it away mentally if it doesn’t. A couple tricks for this document:

  • Copy the base to use the checklist for your own work. The *Status* column is where you’ll want to check off what you’ve completed.
  • To-Dos* (left under the tabs) shows all items to be done. Switch to *Completed* to see everything you’ve checked off
  •  The *Kanban* view lets you see the list as grouped boards

Feel free to add your own checklist items when you copy the base!✌

View the list on Airtable

What is it

A checklist to help you make sure that you’ve accounted for multiple states/scenarios when doing interaction design for digital products.

What to use it for

While it is particularly useful for complex software, it also provides great prompts and reminders even when doing simpler apps and websites.

When to use it

Treat it as a reference when starting your wireframes or early concepts. Rely on it to try to break your design (push it to the limit!) to make sure you’ve accounted for the deeper interaction and visual design aspects. I use it as a foundation when working on patterns in low-fidelity to highlight points that will be helpful later on for visual design and written documentation.

How to use it

Work through the checklist at a zoomed out level (Page) — you can try this with paper prototyping. Then zoom in to the component level and individual interactions and validate each of those.

A note about efficient documentation & design

This checklist not only helps me define interactions but also decide what should be defined and mocked up in high-fidelity and what should be defined with words and documentation. I have a strong “nerd alert” factor when it comes to documentation and making sure it’s airtight so your collaborators (and your future self) don’t have to waste time deciphering it. Now get out there and design!

Pencil & Paper never ships a product without vetting it against our Interaction Design Checklist.

Ceara CrawshawFounder of Pencil & Paper