Scenario-Driven Design Systems by Yesenia Perez-Cruz
I’m at An Event Apart Seattle (Special Edition) taking notes during the talks. Here are my notes from Yesenia’s presentation…
In the last few years, we’ve seen a lot of change in web design as we have to adapt to so many viewports and platforms. We’ve gravitated towards design systems to manage this. Many people have written about the benefits of design systems, like AirBnB.
But how do you define a design system? You could say it’s a collection of reususable components.
Donella Meadows wrote Thinking in Systems. She said:
A system is an interconnected group of elements coherently organized in a way that achieves something.
A good design system inspires people to work with it. A bad system gets bloated and unusable. Yesenia has seen systems fail when there’s too much focus on the elements, and not enough focus on how they come together. Yesenia has learned that we should start our design systems, not with components, or modules, or legos, but with user scenarios.
Yesenia works at Vox Media. They have eight editorial networks. Two and a half years ago, they started a project to move all of their products to one codebase and one design system. Maintaining and iterating on their websites was getting too cumbersome. They wanted to shift away from maintaining discrete brands to creating a cohesive system. They also wanted to help their editorial teams tell stories faster and better.
It was hard. Each brand has its own visual identity, editorial missions, and content needs. So even though they wanted eight brands to use one design system, there needed to be enough flexibility to allow for unique needs.
There were some early assumptions that didn’t work. There was a hunch that they could take smaller modular components to address inconsistencies in design: layout, colour, and typography. They thought a theming system would work well. They started with layout modules, like three different homepage hero elements, or four different story blocks. They thought they could layer colour and typography over these modules. It didn’t work. They weren’t reflecting critical differences in content, tone, and audience. For example, Curbed and Recode are very different, but the initial design system didn’t reflect those difference.
That brings us back to Donella Meadows:
A system is an interconnected group of elements coherently organized in a way that achieves something.
They weren’t thinking about that last part.
They learned that they couldn’t start with just the individual components or patterns. That’s because they don’t exist in a vacuum. As Alla says:
Start with language, not systems.
They started again, this time thinking about people.
- What’s the audience goal?
- Is there a shared audience goal across all brands or are there differences?
- What’s the editorial workflow?
- What range of content should this support?
This led to a much better process for creating a design system.
Start with a fast, unified platform. It should load quickly and work across all devices. All patterns should solve a specific problem. But that doesn’t mean creating a one-size-fits-all solution. A design system doesn’t have to stifle creativity …as long as the variants solve a real problem. That means no hypothetical situations.
Identify scenarios. Brad uses a UI inventory for this. Alla talks about a “purpose-directed inventory”. Map core modules to user journeys to see how patterns fit together in the bigger picture. You start to see families of patterns joined together by a shared purpose. Scenarios can help at every level.
The Salesforce design system starts by saying “Know your use-case.” They have examples of different patterns and where to use them. Thinking in user-flows like this matches the way that designers are already thinking.
Shopify’s Polaris system also puts users and user-flows at the centre: the purpose of each pattern is spelled out.
The 18F Design System doesn’t just provide a type system; it provides an explanation of when and where to use which type system.
At Vox, “features” are in-depth pieces. Before having a unified system, each feature looked very custom and were hard to update. They need to unify 18 different systems into one. They started by identifying core workflows. Audience goals were consistent (consume content, find new content), but editorial goals were quite different.
They ended up with quite a few variations of patterns (like page headers, for example), but only if there was a proven content need — no hypothetical situations.
Brand expression for features is all about the details. They started with 18 very different feature templates and ended up with one robust template that works across device types but still allowed for expression.
The “reviews” pieces had a scorecard pattern. Initially there was one unified pattern that they thought would be flexible enough to cover different scenarios. But these scorecards were for very different things: games; restaurants, etc. So people’s needs were very different. In the end, instead of having one scorecard pattern, they created three. Each one highlighted different content according to the user needs.
Homepages were the most challenging to unify. Each one was very distinct. Identifying core workflows took a lot of work.
What’s the value of the homepage? Who is the audience? What are they looking for?
They talked to their users and distilled their findings down into three user goals for homepages:
- What’s new?
- What’s important?
- What’s helpful?
Those needs then translated into patterns. The story feed is there to answer the question “What’s new?”
When it came to variations on the home page, they needed to make sure their design system could stretch enough to allow for distinctly different needs. There’s a newspaper layout, an evergreen layout, a morning recap layout.
Again, Alla’s advice to focus on language was really helpful.
In the process of naming an element, you work out the function as a group and reach agreement.
The last piece was to have a scalable visual design system. Brands need to feel distinct and express an identity. They did this by having foundational elements (type scale, colour system, and white space) with theming applied to them. Thinking of type and colour as systems was key: they need to cascade.
But how do you tell good variation from bad variation? Variation is good if there’s a specific problem that you need a new pattern to solve — there’s a user scenario driving the variation. A bad variation is visual variation on components that do the same thing. Again, the initial design system provided room for “visual fluff and flair” but they were hypothetical. Those variations were removed.
The combination of a scenario-driven system combined with theming allowed for the right balance of consistency and customisation. Previously, the editorial team were hacking together the layouts they wanted, or developers were creating one-off templates. Both of those approaches were very time-consuming. Now, the reporters can focus on telling better stories faster. That was always the goal.
There’s still a lot of work to do. There’s always a pendulum swing between consistency and variation. Sometimes the design system goes too far in one direction or the other and needs to be recalibrated. They want to be able to add more detailed control over typography and spacing.
To wrap up:
- Successful design patterns don’t exist in a vacuum.
- Successful design systems solve specific problems.
- Successful design systems start with content and with people.
See also:
This was originally posted on my own site.
