Tags: brand

3

sparkline

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:

  1. Successful design patterns don’t exist in a vacuum.
  2. Successful design systems solve specific problems.
  3. Successful design systems start with content and with people.

See also:

User Experience vs. Brand Experience

I’m at the Future of Web Design in London and figured I’d pass the time with some live blogging.

Right now there’s a session somewhat in the same vein as last year’s Flash vs. CSS face-off. This time it’s brand experience vs. user experience. And just as with last year’s supposed battle, the truth comes out pretty early on that actually they should work in perfect harmony.

Steve Pearce is on first, fumbling with his Mac setup and mumbling about the importance of user experience but hammering home that brand and user should be in agreement. He’s illustrating this point with some cute cartoons.

The interactive experience is like an iceberg apparently. An experience iceberg. The visual part sits above the surface (what most people see) but the main part (that people interact with) is below the surface. We spend too long focusing on the bit above the surface. It doesn’t matter how much you polish the visible bit if it’s a wreck underneath. Basically, you can’t polish a turd …or a turdy iceberg. Instead we should work on the experience, which is the stuff under the surface. The reason we should work on this is that users will spread the word about good and bad experiences.

At this point, Steve mentions social objects, misattributing the term to Hugh instead of Jyri. I don’t quite see the connection with social objects unless he’s trying to say that any good user experience is automatically a social object because people will talk about it with their friends. That’s not quite my understanding of social objects. Can I include the term social object in every sentence I write? Possibly (social objects).

Don’t work too much on the surface: work on the experience underneath. That’s Steve’s takeaway point.

Now Andy is up to talk about the importance of brand. To demonstrate his point, he will refer to classic British comedy acts like Morecambe and Wise.

Andy makes the point that branding isn’t about what’s up on the billboards. It’s more about the experience and emotional attachment. Think Starbucks. Think Twitter.

Quoting Seth Godin, Andy says that a brand is really about getting people talking to each other. You know, the viral thing.

Now for an Eric Morecambe interlude. There is a connection though. In the past, everyone used to watch the same television shows and share the experience. There were far more people watching the Morecambe and Wise Christmas special than the most-watched TV programme today. Back then we consumed media in a very different way. These days it’s harder to reach those numbers and create something that spreads so widely. Back to the Eric Morecambe jokes now.

Andy plugs Dan’s book. Instead of thinking of systems-centred design, we can practice user-centred design. What if we make people something they love emotionally instead of asking them what they want? This is reminding me of Henry Ford’s quote that If I had asked people what they wanted, they would have said faster horses.

Then there’s activity-centred design. Look at what people do instead of asking them.

Finally, there’s genius design. This is the Apple approach. You create something that you think is going to be fantastic and the user will then tell you if you were right. But you mustn’t fear failure otherwise you will never release anything risky. Yes, it’s the old “learn from your mistakes” lesson.

Andy likes the idea of inspired design. A usable design need not be a safe design.

Design should be more like one-liners from Eric Morecambe. That’s his takeaway point.

An awkward silence follows. Our compére, Paul Boag kicks off the Q and A by asking C’mon, it’s all good and well to say it’s okay to fail and learn from our mistakes, but I don’t think our clients would like that very much!

Steve says that a beta testing period is a good time to fail. You can then learn from your mistakes and still improve the product. It’s humbling to learn that we don’t know what users want.

Andy says this what we hired for—to create and experiment and sometimes fail. Otherwise we’re just painting by numbers.

Steve says creating great work requires a great client.

Next question: is there any way of measuring the value of user experience?

Steve says you can measure it by how much people talk about it. But there’s no magic bullet for measuring it.

The next question may or not be about inspiration. The advice from the panel is not to create Frankenstein designs by mashing up the best bits of other sites. Those bits don’t work so well out of context. That may or may not answer the question.

Now a question about roles and who should be doing what. Silos are bad, mmkay? Engineers, designers, developers …who calls the shots? Andy insists on doing his own wireframes. He also designs using HTML and CSS. He doesn’t want to get bogged down in process. Who wants to spend their answering Basecamp messages. Steve reminds us that design is about solving problems and that isn’t the exclusive domain of designers—engineers are good at that too.

And with that, Paul kicks them off the stage.

Chiaroscuropod

Portrait of an Elderly Man by Rembrandt is remarkable not just for its treatment of light and shadow but also—as Jessica pointed out—it must be one of the first recorded instances of iPod earbuds in western art.

Portrait of an elderly man