The Component Cut-Up Workshop

Kickoff a Design Library Effort by Engaging the Whole Team

Nathan Curtis
Nov 3, 2015 · 6 min read
Image for post
Image for post

Inviting Participants

Invite anyone who will influence or benefit from the library. UX designers and front-end developers are critical. However, you’ll benefit from inviting other key stakeholders and potential champions too, for the workshop is a big event and generate momentum around the pursuit. Therefore, considering inviting QA, product managers, copywriters, project management, and even willing executive sponsors.

  • mix up roles, personalities, and perspectives on standards, such as an interaction designer, developer, and product manager together.
  • (optional) mirror real project teams or relationships, aligning subsets of 15–25 page printouts with the team responsible for that area of the experience.

Preparing Materials

To prepare for the workshop, organize and print out screenshots from the existing site and/or applications, or a sufficiently broad set of emerging concepts. From the home page to search results, product pages to checkout, tabular displays to multi-page forms, choose pages that represent the breadth of the experience. Most importantly, select pages which cover the range of potential components you anticipate for your library.

Image for post
Image for post
Page screenshots laid out across a table so participants can familiarize themselves with the collection

Make Component Cut-Outs Traceable

Once participants cut up pages into components, it’s painstaking and impractical to recall where the component came from unless you’ve got an easy way to trace the cutout back to its source. Therefore, assign each page a unique number and print that number small and repeatedly across the back of the page printout. We had a legal-sized PDF with preprinted numbers for printing the flip side.

Image for post
Image for post
Each page screenshot is printed with a unique ID repeated across the flip side.

Provide Tools-of-the-Trade, Especially Post-It Notes!

You’ll need to stock up for the workshop by purchasing scissors, Post-It® Notes, Post-It® Small Flags, sharpies large and small, scotch tape, and blank paper. Be sure to buy more than one item per team, so that participants don’t sit idly as a single person cuts everything with the only pair of scissors. Usually at least one item for every two participants is sufficient (such as three pairs of scissors for a team of six).

Image for post
Image for post
A bevy of materials, including pens, papers, Post-It Flags, Post-It Notes, and – of course – scissors

Step 0: Ponder the Collection

Encourage teams to review the pages to become comfortable with the scope of their collection and notice reused frequently components. Some teams spread out the pages across a table for a bird’s eye view, pondering for a minute before the begin to cut.

Image for post
Image for post
Array the pages across the table to get a birds-eye view

Step 1: Cut Out Components

Participants cut up each and every page into components, separating each component on the table. During this stage, participants will often ask and need clarity on “how granular should I do cut this up: should it be this bigger section or just these few elements?”, and workshop leads can tips on how to cut each component and relate different variations of the same component.

Image for post
Image for post
Identify components by cutting apart a page screenshot into chunks

Step 2: Arrange Into Groups

As pages are cut up, group components on the table. For example, header and footer components congregate in one area, all navigation components in another, and sidebar components separate too. Once all pages are cut out, teams should focus on grouping all components into meaningful categories before proceeding to archive and prioritize items.

Image for post
Image for post
Organize components by moving cut outs into groups on the table

Step 3: Label Groups

Use Post-It® Notes with big labels to name each of the groups you’ve formed, such as Header and Footer, Content, Navigation, Promos, and Sidebar.

Image for post
Image for post
Label groups using a very visible Post-It Note and/or heavy-weighted Sharpie pen

Step 4: Tape Groups

Teams often then tape components to plain pieces of white paper (ideally, tabloid size) so that library leads can walk out of the workshop with tangible, organized results.

Image for post
Image for post
Tape components to Tabloid sheets of paper.

Step 5: Prioritize Components

Using Post-It® Small Flags, teams can also prioritize each component by importance. For example, green is “must have,” yellow is “nice to have,” and red is for “less important” candidates. Encourage participants to balance the quantity of each priority. If everything is green, then you haven’t prioritized anything.

Image for post
Image for post
Prioritize components by applying a color-coded flag next to each one.

Step 6: Label / Describe Components

Teams can use their remaining time to write common names used to refer to each component, such as “Base of Page” and “Footer Promo.” This step enables participants to discuss common terms used to refer to each item, informing the nomenclature of the formal catalog.

Image for post
Image for post
Label individual components to record internal nomenclature.

Wrap Up

After the teams complete the steps, reconvene the entire group to

  • identify differences, such as how teams may have cut up a header component slightly differently.
  • foster an open forum on the value and direction of using components.
  • clarify next steps, such as cataloging the results in a spreadsheet (see Chapter 9: Organize, similar to Dan Mall’s approach discussed on the Style Guide podcast).

EightShapes

A collection of stories, studies, and deep thinking from…

Nathan Curtis

Written by

Founded UX firm @eightshapes, contributing to the design systems field through consulting and workshops. VT & @uchicago grad.

EightShapes

A collection of stories, studies, and deep thinking from EightShapes

Nathan Curtis

Written by

Founded UX firm @eightshapes, contributing to the design systems field through consulting and workshops. VT & @uchicago grad.

EightShapes

A collection of stories, studies, and deep thinking from EightShapes

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store