April 2, 2018 @ 11:30am
An Event Apart Seattle
@yeseniaa
In the past few years we’ve seen a big change in the way people build on the web. We’ve had to build for a bigger range of devices and react rapidly to the fast change of technology. So we’ve adopted modular, pattern driven design systems. These help us create cohesive design and user experiences quickly.
How do you design a design system?
A collection of reusable components…
An interconnected set of elements coherently organized in a way that achieves something. -Donella Meadows, Thinking in Systems
Design Systems should focus on:
- ELEMENTS
- INTERCONNECTIONS
- PURPOSE
When all of those 3 things exist a design system feels cohesive, unified, connected. They inspire teams to use and contribute to them.
But a bad design system feels disjointed, confusing, and difficult to use. They grow bloated and disjointed over time.
In her experience from building and watching others build design systems, she sees them fail when the focus is too heavily put on ELEMENTS. The success of a design system should be measured by how well the elements of the system come together to achieve the goals of a product.
Start yoru design system with user-scenarios. Not with components or modules, but with user-scenarios.
A year ago, Vox Media decided they needed to come up with a cohesive design system for all 8 of their brands because maintaining and iterating on all of their websites was time consuming and difficult.
They also wanted to help their editorial teams tell better stories, faster. This was a challenge because each of their brands’ websites were very unique, visual design system is custom for each with typography, color palette, and visual elements…and more than that they needed to support different editorial missions, content types, audience needs, along with typography and branding. Even though they had to unify the 8 brand sites into this one design and code system, they needed to provide enough flexibility to make each brand feel distinct.
When they started designing this system they asked what patterns did they need to build, how can they be combined, and how can they retain separateness in identity for each site.
They knew they needed to:
- Focus on designing modular elements not entire pages
- Address inconsistencies in design
They started with modular components and layouts, and thought that they could start with these ‘legos’ and then lay each brand’s styling elements like colors and typography on top of those legos. It didn’t work.
The sites felt too similar and did not reflect critical differences in content tone, and audience.
They also found that they’d created the modules but they didn’t have a purpose. The variations between them were primarily presentational.
In order to create an interconnected system, they needed to start by being specific! They couldn’t start with individual components or patterns because successful design patterns don’t exist in a vacuum!! They don’t ignore the content they’re in, the people they server, etc!
We should start with language, not interfaces when creating designs. For that it mean they had to start with content and people, so considering their audience, editorial teams, the content they’re producing and consuming, and their revenue content.
So they had to ask better questions in order to better understand the needs of their design systems, like what is the audience goal for this design system? Are their shared goals between What’s the editorial workflow (the process someone is going through to create this content), and what range of content should the support?
- Start with fast, unified platform
- Be scenario-driven when creating variations
- Find key mounts for visual brand expression that serve their audience.
There was push back and resistance in teh company about how having a design system would stifle creativity or produce a look that felt very cookie cutter. They can have variations in layouts IF those variations serve a scenario / purpose.
This means we can’t have HYPOTHETICAL SITUATIONS. We can’t anticipate needs for our system that don’t exist, because our audience aren’t hypothetical people, and they aren’t coming to do hypothetical things. We can’t focus on the abstract or focus on OTHER design systems when creating ours!
Brad Frost popularized the idea of doing a UI inventory to start a project to see what all you have and see duplicates, inconsistencies, etc.
All Kholmatova focuses on doing a purpose-directed inventory that groups items by purpose. She takes things a step further and recommends mapping core modules to sections of a user journey to see how patterns fit together into a bigger picture. She said doing this exercise helped her team think in familiar of patterns joined by a shared purpose and focus on patterns needed in each step of a user journey.
This exercise helps us:
- Identify the core workflows and teh patterns that need to support these workflows
- Understand the role each pattern plays in a user’s journey
- Define how patterns work together to achieve those goals
Understand how the information on the page is going to be used as your starting point!
Case Study: Shopify
Their design system ‘puts merchants first’
Each of their patterns solve a problem for a merchant.
They also recommend different typeface combinations for different types of websites / purposes.
BACK TO VOX MEDIA’S PROJECT
In their design system creation project, they found that audience goals were consistent across their brands but the content differed. So the user flow for a some starts with a Lede image, then goes into the text, and ends with related content / something to keep them engaged.
To account for the varieties needed to support different content, they designed several different layouts for Lede images. They only added a variation IF THERE WAS A CONTENT NEED!
Content audit:
They asked 3 questions:
- Does this snipped add value?
- Is it available for more than 3 brands?
- Is it necessary for 1 brand?
They were then able to reduce the number of snippets from 81 to 43!
Started with 18 feature templates and ended with 1 comprehensive design system that could support different content needs that still feels distinct for their brands.
Homepage were the most challenging of all to unify… Because they’re homepages, but also because their previous homepages were incredibly robust and distinct for each of their brands, so they had to do a bunch of upfront work to identify core workflows… so they started asking:
- What is the value of their homepage today?
- Who’s our homepage audience
- What are they looking for?
- How are the current homepages performing?
They found answers by asking their audience. Finding the latest news was the most important thing for them, so they decided to address: What’s new, what’s important, what’s helpful? Then they landed on 3 main components: Storyfeed, Covers, and Utility.
NAMING ELEMENTS
In the process of naming an element, you work out the function as a group and reach an agreement.
Scalable visual design system:
How do we theme a design system?
Branding should support the specifics of the content, the writing style, and the tone for each of our brands… and that we should push for unique brand elements that serve the audience, not just those that are ornamental or ‘visual fluff.’
Their foundational elements: Type scale, color system, spacing variables.
Good Variation vs Bad Variation
Variation is GOOD if:
- There’s a specific problem that they need a new pattern to solve
- Determined by user scenarios and content needs
- Strengthens brand voice in a way that serves our audience
Bad Variation:
- Visual variation of components that serve the same function across brands
- Don’t do much to strengthen brand voice.
BEFORE THEIR DESIGN SYSTEM:
They spent a lot of time building custom, one-off solutions.
Their variations are now achieved with a theming system and the procedure is so much easier and faster.
NOW:
Reporters can focus on telling better stories, faster, which is the whole goal of their design system.
But there’s still a lot of work left to do. They started in a way where they thought they could be really flexible and consistent, and now it’s possible they went too far in being different… so they’re tweaking to further clean up their design system. They also need to continue to define their theming system so it’s clear and powerful and more people can use it.
Now that they’re on a unified platform, they can create even more tailored experiences at scale.
In Summary:
SUCCESSFUL DESIGN PATTERNS DON’T EXIST IN A VACUUM. THEY SOLVE SPECIFIC PROBLEMS, AND THEY START WITH CONTENT AND PEOPLE.
0 Comments
Trackbacks/Pingbacks