Columns

XXVI.5 September-October 2019
Page: 22
Digital Citation

Scaling UX with design systems


Authors:
Elizabeth Churchill

back to top 

I remember the delight of discovering that I could “view source” for a webpage and see the underlying html.

Copy ...
Paste into an editor ...
A tweak here and there ...
Publish ...

And then, ta-da!

My website.

Very exciting!

I have the same kind of excitement in working with “design systems” [1]. Since around 2011, the idea of a systematic or systems-level approach to visual and interaction design has become more and more popular. Design systems lay out the core elements and components of visual and interactive design for the devices we use every day—cellphones, tablets, laptops, desktops, and car dashboards, to name just a few. They offer guidance for layout, shape/form, color palettes, buttons, forms, tables, typography, user task flows, and can offer advice for content, branding, tone, and personality. Design systems enable designers and developers to create a consistent and cohesive product or suite of products. If you haven’t immersed yourself in this world before, I entreat you to pick up your favorite device right now and carefully examine the interface of your most-used application, whatever it is—mail app, shopping app, health app. Examine with new eyes the layout and all the visual elements, experience the interactions, and ask yourself: What decisions went into choosing that shape? That color? That motion or animation when you click on a button? That visual (or haptic or sonic) feedback and ensuing interaction possibility, invitation, or call to action?

ins01.gif

There are many design systems out in the world of visual and interaction design, addressing a variety of screen-based experiences [2]. Design-system style guidance is also appearing for nonvisual modalities, including voice, sonic and haptic feedback, and fully embodied gestures for immersive virtual and augmented reality experiences and for interaction with smart vehicles and smart, sensor-laden physical spaces and interactive environments.


Design systems are creative sculpting clay; they are provocations, inviting—or perhaps demanding—exploratory play.


Researchers on my team [3] have been looking into what value design systems provide. Here are some obvious and non-obvious points of value, and some indicators for why more research into design systems is an exciting proposition:

  • Design systems reduce effort. So much of design work is creating a new version of what already exists, albeit slightly modified for a new context. Building on others’ expertise reduces re-work and frees up time for the creative aspects of designing and developing for the specific product context. My favorite example is sewing patterns. In the mid- to late-1800s, sewing patterns synthesized expertise into packaged and systematized formats, enabling fabric creatives (that is, people who sewed) to produce affordable, homemade fashion quickly and cheaply [4]. In a similar way, design systems guide digital design creatives toward the production of usable, useful, and delightful experiences. They help maintain consistency and reduce divergence across products and product suites. They reduce the time to go from concept to designed interaction to engineered experience. They offset reinventing the wheel and thus reduce problem solving, providing the platform for efficient workflows and product development.

  • Design systems scaffold learning. More interesting for me, and harking back to my example of learning html by tweaking examples created by others, design systems allow one to take well-packaged expertise from brilliant visual and interaction designers, and then interrogate their assumptions, question their decisions, learn from their reasoning paths, and rebuild and/or extend what they have proposed. Design systems show you a world that you can dismantle, re-create, rearrange, and extend. You can create your own ideas and new versions, sparked by others’ insightful beginnings. Design systems are creative sculpting clay; they are provocations, inviting—or perhaps demanding—exploratory play. Design systems need not be constraining; they can be generative. In this mode, design systems invite creative appropriation.

  • Design systems can increase cross-disciplinary and cross-functional collaboration. Using a design system can reduce disagreements between people with different disciplinary backgrounds. There are indicators that implementing or adopting a design system not only reduces decision making for individuals but also reduces cognitive load for teams, by reducing friction between different disciplines. People have even told us that adopting a design system can increase job satisfaction and reduce team turnover and stress for managers.

The last of these benefits intrigues me greatly. This insight was, for me, the least predicted and yet the most obvious when one rethinks the value proposition for design systems: Design systems are as much about the experience of the producers and those in the production process as they are about the quality of the product. This is a shift from a product focus (still very important, of course) to a focus on the psychological health of the producers and the team (important for creating a humane and sustainable work environment). Design systems illuminate, transmit, and translate the expertise of the experts who have fashioned the elements of the design system. They are about inspiring and scaffolding design quality. But they are also about facilitating teamwork, and can create a common purpose and focus. They can turn critique away from interdisciplinary disagreements and toward the important matter at hand: that which is to be designed and developed. Returning to my second bullet point, but extending it from personal learning to group learning environments and cultures, they can create common product and learning goals.

Happily, digital well-being has become part of our discourse around designing discretionary consumer products and services. Our research suggests that eyes could be equally focused on the digital well-being of the teams involved in creative endeavors. Personally, one of the most exciting aspects of understanding the value of design systems is seeing the psychological and social benefits they can bring for producers and consumers of digital experiences alike. And that is all about scaling not just the products but also the people and expertise of UX and HCI into the future. UX is as much, if not more, about the producers as it is about what they produce.

back to top  References

1. Design systems are also known as design languages.

2. For a wonderful repository of existing and emerging design systems, check out this site: Design Systems Gallery - https://designsystemsrepo.com/design-systems

3. Thanks to Michael Gilbert, Alisa Weinstein, Jude Yew, Abla Hamilton, Clara Kliman-Silver, Hilary Palmen, and Gregorio Convertino for driving this research.

4. The first paper patterns were designed by Ellen Curtis Demorest from 1860, sold through Mme. Demorest’s Mirror of Fashion magazine. Ebeneezer Butterick was the first to create a graded sewing pattern in 1863, and Butterick patterns remain a source of fashion design patterns for sewing to this day.

back to top  Author

Originally from the U.K., Elizabeth Churchill has been leading corporate research at top U.S. companies for the past 18 years. Her research interests include social media, distributed collaboration, mediated communication, and ubiquitous and embedded computing applications. churchill@acm.org

back to top 

Copyright held by author

The Digital Library is published by the Association for Computing Machinery. Copyright © 2019 ACM, Inc.

Post Comment


No Comments Found