Checklist Pattern

A lot of my work with Kit so far has been improving onboarding in a number of areas around the platform.

To address the multiple onboarding experiences in an efficient manner, I created a flexible checklist pattern that could handle any number steps (and their sub-steps) in either sequential order or non-sequential order.

One of the more interesting aspects of the pattern is how it shows completed, active, and inactive checklist items. We ended up using a combination of opacity, strikethroughs, and checkmarks.

Attached is closeup and previous checklist pattern (by a different designer)