The last time I saw Yesina Perez-Cruz speak, it was at the An Event Apart in Seattle in 2016, and she covered performance issues on websites. I don’t think it’s coincidental that she’s speaking now on scenario-driven design systems, because there’s a heck of a lot of bloat to be picked up in the performance of a site by building off a framework where you only need one or two features. And scenario-driven design is a solid approach to preventing bloat, as well as meeting your business goals.
Next up: @yeseniaa with scenario-driven design systems
Design is scaling.
Design problems are increasingly complex.
Design is increasingly remote. #AEADC— Anne Gibson (@perpendicularme) July 30, 2018
There are lots of posts about design systems. Strong principles result in a strong cohesive system. Spotify has succeeded at this. 18F is also producing a design system to clean up the incredible inconsistency of government systems #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Definition of a design system:
Collection of reusable components?
method of design products?
Like building with legos? #AEADC— Anne Gibson (@perpendicularme) July 30, 2018
“A system is an interconnected set of elements coherently organized in a way that achieves something”
Don Ella Meadows, Thinking in Systems #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
3 parts:
Elements
Interconnections
Purpose
When they all exist, it feels cohesive and unified and connected. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
A bad design system feels disjointed, confusing, difficult to use. No one knows how to use them and they get neglected over time #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Too much focus on the elements and the patterns, and not enough focus on the way elements come together, will cause a system to fail. You need to understand how a pattern comes together to achieve the purpose of the product #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Start your design systems with user scenarios. Not components, modules, or legos! #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
2 1/2 years ago Vox kicked off a design system for 8 brands, 350 websites. Why?
Easier to design, build, launch, maintain, and evolve the sites on our platform
Faster to launch new brands
Tell better stories, faster!#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Every brand’s website was very distinct and tailored to their brand’s need. Visual design system was incredibly custom. Different editorial missions, content types, audience needs, typography and branding #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Need to both unify and provide enough flexibility to allow brands to feel distinct.
What components do we need to build? How can we combine them? How do we still provide a unique look and feel? #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Early assumptions that didn’t pan out:
1 smaller modular components
2 address inconsistencies in design wth layout, color, theming
3 hypothesis: set of flexible brand agnostic modules with a theming system would give the most range #AEADC— Anne Gibson (@perpendicularme) July 30, 2018
Thought that general components would be the most flexible. Hero sets. story blocks. Layer with the theming system. Allow brands to feel unified yet distinct.
Fail: sites felt too similar. Didn’t reflect critical differences in content, tone, and audience. #aeadc
— Anne Gibson (@perpendicularme) July 30, 2018
Modules created didn’t have a clear purpose, so variations were presentational or visual. Elements have to *achieve something* or the modularity doesn’t really matter #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
You can’t start with individual components or patterns. Successful design patterns don’t exist in a vacuum. They don’t ignore the context they’re in, the people using them, the content they need to display, and how they need to work together. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
We should start with language, not interfaces.
– Alla Kholmatova https://t.co/v4yudNlYxO— Anne Gibson (@perpendicularme) July 30, 2018
Start with fast, unified platform.
Be scenario-driven when creating variations
Find key moments for visual brand expression that serve our audience #AEADC— Anne Gibson (@perpendicularme) July 30, 2018
Load quickly, be accessible, work well across devices
Should have a unified core experience
seamless across brandsScenarios should drive variation
All patterns should solve a specific problem
Not creating a one-size-fits-all solution#AEADC— Anne Gibson (@perpendicularme) July 30, 2018
No hypothetical situations – don’t anticipate needs that don’t exist. Don’t work in the abstract, don’t only reference other design systems when designing your own #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
How to identify scenarios:
Do a UI Inventory. Audit all the UI elements of the site.
Brad Frost, https://t.co/fa6BbKes6l#AEADC— Anne Gibson (@perpendicularme) July 30, 2018
Use a purpose-directed inventory to describe what things are being used for and in what stage of the process someone is doing something. Why is there variation in the modules? Sign-up vs purchase
Alla Kholmatova, https://t.co/kuspXpjSiD#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Keeping this map in my mind helped me think in families of patterns joined by a shared purpose, rather than individual pages.
–Alla Kholmatova#AEADC— Anne Gibson (@perpendicularme) July 30, 2018
So (looking at a library example) look at all the patterns for filtering items, or the patterns for learning about a book. Notice the difference between presentational differences vs semantic differences. They may look similar but solve different problems. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Map out the content of the pattern for viewing and learning about a book: thumbnail, title, author, published, type. Variant with a status. Build a pattern that allows for those pieces. Now it’s a more flexible component #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
– Identify core workflows and the patterns that need to support these workflows.
– Understand the role each pattern plays in a user’s journey.
– Define how the patterns work together to create a cohesive experience.#AEADC— Anne Gibson (@perpendicularme) July 30, 2018
Sales force starts their guide with “know your use case”.
If you have designers or engineers thinking in terms of user flows and say “yes I’m solving this problem, here’s the pattern that will help me solve it”#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Shopify’s Polaris system puts merchants first. Each pattern explains the problem it’s solving for a merchants. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Scenarios can help to guide visual design standards. US Gov’t has different type systems based on the problem you’re solving. Default for digital services that feature forms, another for more promotional sites. Users understand how to apply it #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
(@yeseniaa then went over how her team built out the process, while @TwitterSupport locked me out because apparently live-tweeting a conference is “spam”) #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Distinguish between very general patterns and very specific patterns. Content block vs Events block. Scorecard / ratings systems for 3 different things have different goals (where to eat vs what game to buy vs what product to buy). So content was very different. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
With each of the iterations of the scorecards, the components become flexible enough that any of the brands can use the “game scorecard” but at the same time it stays true to the scenario that “i want to buy a game”#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Homepages are the trickiest to unify – incredibly robust and distinct for each brand. Started with identifying core workflows. What’s the value of the homepage today? Who’s the audience? What are they looking for? How are our current homepages performing? Research #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Audience is composed of loyal followers – they want to know what’s new, what’s important, and what’s helpful?
3 main areas of purpose for a homepage, then the components that will answer those questions. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
3 components: Story feed is made up of entry boxes (mostly presentational with variants for things like “review” or “map”). Generic homepage heroes didn’t provide critical differences. New heroes were purpose-driven. Newspaper, Evergreen, Morning Recap. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
In the process of naming an element, you work out the function as a group and a reach an agreement.
Alla, again #AEADCName components collaboratively! Entire team will understand purpose.
— Anne Gibson (@perpendicularme) July 30, 2018
Do design systems stifle creativity?
It’s much harder to power vastly different brands with one design system, but there are ways to achieve flexibility of brand expression while still maintaining a system #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Flexibility levers:
Content
Structure
Style
BehaviorBrad Frost, https://t.co/L3rp51ZQdI#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Google’s Material theming system is an inspiring example of how much flexibility you can build into a theming system. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
In some cases, Vox added components specifically for brand expression. Verge can use the component with the one-up hero to art direct the page and dramatically change the tone without needing back-end support #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Scalable visual design system (theming system):
Must create a platform where brands can feel distinct
Need to express strong editorial voice and identity
Brand expression is more than just colors and logosfoundational visual elements + room for customization#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Foundational elements:
Type scale
Color system
Whitespace variationsDesign system needs to adapt to various font metrics because the vertical metric can be very different #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Each brand had its own color palette, and every component needed to be mapped to those colors. Primary, accent, link, background, button. You’ll probably have a lot of different color uses to track #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Baseline theme, then each brand has its own values that hook into the system. That way each can look different while still being scaleable. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Good variation:
There’s a specific problem to solve
Determined byuser scenarios and content need
Strengthens brand voice that serves the audience.In those situations, introduce a new pattern to the system.#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Bad variation:
Visual variation on components that serve the same function across brands but don’t do much to strengthen brand voice.Example: 3 different newsletter modules that are 100% consistent in what they do. Low on the page. Unifying the design was better #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Before the design system, lots of time building custom one-off solutions for “packages” of stories that went together. Reporters and developers spent a lot of time building and customizing. New “packages” use the design system, much easier to use for editors and writers #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Now they’re focused on telling better stories, faster.
what’s next in the system?
Create even more tailored experiences at scale.
Another round of refinements for elements that need strengthening. #AEADC— Anne Gibson (@perpendicularme) July 30, 2018
Question and Answer period
How to add or remove variation:
– User data that says people interact with component A, not with component BWhat if Editorial wants something new constantly?
– Innovation is important, focus on what is good variation vs bad variation. #AEADC— Anne Gibson (@perpendicularme) July 30, 2018
How to strike a balance between users and people making the site?
– Know your users, audience, analytics.
– Know how the story’s produced. They’re users too.
– Listen to editorial teams on where they want to move the brand#AEADC— Anne Gibson (@perpendicularme) July 30, 2018
Relationship between the UI Design teams and User Experience team?
– Team works on websites and how they look on the web
– Team works on the content management system
– Each have their own design systems
– They work together to create what audience and editor see#AEADC— Anne Gibson (@perpendicularme) July 30, 2018