Reference Designs for Systems
Page Concepts Comparing Before & After, with a System Twist
When it comes to selling a design system, you’ve gotta have a pitch. And by pitch, I mean a compelling, infomercial-like comparison of
“Here’s what you look like, today, without a system” vs. “Here’s you look like, tomorrow, cohesive using a system.”
Early on, nothing — not a library, not a sticker sheet, nothing! — demonstrates a beautiful future more than reference designs.
Reference designs are a collection high-fidelity page concepts (static or threaded as a prototype) spanning a holistic customer experience, shining with a new system. While disposable and imperfect, they still depict an aspirational future that every stakeholder can understand. They invite reactions from the enterprise and begin to stress decisions made in narrower exercises like style tiles and element collages.
Don’t skimp and stay too atomic. Use reference designs to build belief in a system’s promise and convince everyone you are headed in a direction worthy of everyone’s invested time and attention.
Planning Reference Designs
Reference designs are more than just concept explorations. The output is familiar: a collection of high-fidelity page mocks and/or prototypes. However, you’ll approach the activity — how and who does the work, pages you design, and more — differently with system-focused mindset.
Which Pages? A Broad Cross-Section
When creating reference page concepts, thoughtfully select pages representative of a the broad experience, not just one or two flagship products. You should:
- Represent many products (such as Home, Search, Products, Checkout, Email Campaigns, and Account Management) and platforms, with a concentration on flagship and a few secondary products.
- Explore a mixture of layout motifs — Product Page with heavy photography, Search Results full of Media Objects, Sign In form, Press Release article, Dashboard, Map, the works — including responsive considerations.
- Maximize elements and components diversity to parallel your intended library’s diversity.
- Reveal opportunities for shared components to provoke useful lines of discussion, such as a unified global web navigation or cards across platforms.
- Vary between simple and complex displays, particularly if your experience shifts from high-styled hero photography to dense, rich interactions.
- Balance high-value key pages — a Home or Product view — that matter most to your stakeholders with an outlier (or three) to emphasize the system’s reach.
- Be stitchable as a customer journey, so you can tell the story of your pursuit of cohesiveness through the customer’s eyes. A reference design demo as a journey — even as few as 6 to 10 screens — can be quite the aphrodisiac.
- Avoid muddling efforts with near-term release priorities or today’s fire drill. Focus on the long view of the target experience.
Takeaway: Don’t just launch into designing some cool pages. Thoughtfully consider such criteria to confidently select pages that demo well and inform the system.
How Many? At Least 5, Ideally 10+
Rendering two or three layouts representing a couple flagship products doesn’t convince anyone of a design that scales. That’s too limited a product reach and insufficiently diverse. So reach for more. While some teams succeed with 5 to 10 for more limited portfolio, an enterprise-wide set often warrants 10 to 20.
When? Early On, in a Quick Burst
A burst of reference designs usually takes place in sprint 2 or 3 of a system’s formative period, after planning and strategy solidify. With sufficient focus, a reference designer (or up to three or four) can crank through a first pass within a week, and iterate for one to three weeks depending the depth and range of feedback required.
Who? Ideally, System & Product Designers Working Together
It’s hard to divert leading product designers from their product teams for a sprint’s worth of collaboration in a war room. That doesn’t mean you shouldn’t try. If you can’t assemble your all-star team, at least assertively seek feedback from designers on those flagship and secondary products.
Takeaway: Minimize black-boxedness of conceptual exercises. This will bode well for future adoption and start down a path of collective ownership.
Presenting Reference Designs
Before & After, Side by Side
When presenting reference designs, start with the old, reveal the new, and follow with key points of visual style (like color, typography, and space) and components (like buttons and global navigation). Once complete, rest your presenter’s display on a side-by-side view of old vs new to open discussion.
This lets the audience compare on their own. I may have a boundless passion for button varieties. But my audience usually isn’t like me. They are usually convinced by a bigger picture evoking today’s pain next to tomorrow’s promise.
Takeaway: Sell your audience on the before and after, side-by-side. Revel in it. Let the comparison persuade them.
Soliciting Input from Product Teams
Some teams post reference designs on walls of a conference room or hallway. This exposes the target state in a space where others can stop by and thoughtfully consider the designs themselves.
The hudl.com system team led by Kyle Murphy and John Henry Müller used an effective Post-It notes and dots technique to invite structured feedback for their pre-system product design audit. While the audit preceded this activity, the structure would work really well for reference designs too to solicit:
- “LOVE! This is how we should feel!” using pink.
- “NOPE! This is not how we should feel” using yellow.
- “OPP! An idea for improvement” using green.
Their wall of designs transformed into visualization. The systems team catalogued responses to inform early priorities and subsequent work on color, buttons, forms, and other components.
Takeaway: Don’t bury reference designs in some InVision prototype or Keynote deck for only attendees of an invite-only presentation. Put ’em where they can see ’em, invite feedback, and be transparent.
Using Reference Designs Later
As early reference concepts give way to painstaking design and build of each part, I’ll revisit reference designs for:
Inspiration
In my experience, I pull out reference designs as I build individual components to look for inspiration: additional states I haven’t considered, alternative layouts I’d not expected, and variations that help us build more flexible pieces.
Composing Page Examples
As a system’s library matures towards a first release, building full pages based on components you’ve built is essential. These pages showcase examples of what’s possible and stress test your build by fitting all the pieces together. More often than not, we’ll build our initial reference design concepts using the parts we’ve subsequently built.
About to embark on a design system, or need to dive deeper to discuss products and players? EightShapes conducts systems planning workshops and coaches clients on design systems. Let’s talk!
