When organizations move from a template-based website to a design system-based site, content editors gain the flexibility to build new layouts to suit their needs. But it’s a very different way to think about content creation, since you can now stack and combine layout components like Lego™ blocks. Editors used to having one big WYSIWYG box to enter content can get confused or overwhelmed.
We designed a low-tech workshop that uses paper prototyping to introduce your editors to your design system before training them to use it in the CMS. In the workshop editors focus on the content itself, working collaboratively and iteratively to explore ways to present content using the components offered by your design system.
You may have heard of the idea of paper prototyping before, but this workshop has an important twist. With paper design system prototyping, instead of working with a blank slate, you start with a set of available layout patterns from your design system.
This exercise works well when paired with Content Planning for “Red Route” Pages, UI Design Studio Workshop or Design Consequences Workshop.
You’ll need:
- Content strategy for the pages you will prototype. This could result from one of the exercises mentioned above.
- Printouts of grayscale wireframes for each layout pattern available in your design system & CMS
- Pens, markers, scissors and tape
Below you can see a set of grayscale wireframes of various layout patterns from a design system.
If running this workshop virtually, you can prepare the grayscale wireframes for each pattern as an object on your virtual whiteboard. This screenshot is an example of a virtual board we set up in Miro to run this workshop for Emory University School of Medicine.
Steps for a Design System Training Workshop:
- Divide the group into teams of 2 or 3 people.
- Assign a page to each team or assign a set of related pages in a workflow to each team.
- Have the teams design the pages using only the available layout patterns. They can cut them out with scissors from paper printouts, or copy/paste them on a virtual whiteboard. Ask them to write or sketch in real content over the grey boxes.
- Have teams present their solutions to each other.
You can go further and run usability tests with these paper prototype pages.
- Paper Prototyping: Streamlining the User-Centered Design Process (video training from UIE)
- Guide to Prototyping in Figma
