The User Experience (UX) function has matured tremendously since Don Norman originally coined the term in 1993, to describe the work of his design team at Apple. Since then, the experience of the user and delighting customers has gained traction at companies. Now companies are increasingly focusing on UX when creating digital products that enable people and are user-friendly. The term “create” goes hand-in-hand with “design”, because creating a digital product involves expertise from many disciplines. The intersection of UX Design (what we call Experience Design, or XD, at Orion) and Application Development is where Digital Design Systems enter the picture.
Time & Cost Efficiencies
Bringing a product to market is usually expensive and time consuming as it requires extensive collaboration by many people with diverse skillsets. Companies look for time/cost efficiencies as well as consistency in product design. Digital Design Systems evolved from these goals so that branding, design and development of repeatedly used assets could be codified and leveraged to eliminate redundancies. When properly used, this also enables designers and developers to focus on the creativity of combining new and reusable components when designing and developing digital products.
Components & Component Libraries
It’s important to understand what goes into creating a digital design system. The most basic building block of a design system is a Component: a digital asset (like a dropdown menu or a call-to-action button) that is used by designers and developers, and also incorporates brand definition. Component Libraries comprise groups of components that designers and developers use to quickly design and build digital experiences. Because the needs and tools used by designers and developers are different, effective design systems have parallel component libraries in design and development. Components in both types of libraries are identically styled to express the company’s brand with a consistent look and feel. Components in the design component library ideally have interactivity built into them to support design prototyping—and their identical counterparts in the development component library have front-end code built into them to support actual development.
Culture & Collaboration
Product designs define what is to be developed. Therefore, it is crucial that the design and development component libraries are created, grown and maintained synchronously by design and development. The best way to accomplish this is to designate design team leads within each team. This way, designers and developers will work closely together to ensure a 1:1 relationship between components in the design and development component libraries, both teams are equally invested and have a voice ensuring the component library serves their collective needs.
Design is Not Plug and Play
The biggest risk in using a design system composed of component libraries is that designers, especially those earlier on in their careers, may approach design as simply a process of picking components from the component library and dropping them into their designs—and leadership may encourage this approach in the interest of time, cost savings and consistency. While it is tempting to use component libraries and components right from the start because they result in high-fidelity designs, the risk is giving an illusion that early-stage designs are much closer to being final than they actually are. This can lure stakeholders and designers to take shortcuts in testing and design refinement.
Design is not component-centric, nor can it be purely driven by the desire for consistency and speed. Users must still be at the center of everything we do as designers! Although early-stage plug-and-play designs may look great, early-stage designs by definition are often completely off the mark concerning the user’s needs, or just not the best designs the team is capable of. To avoid constraining thinking and creativity too early, it’s recommended to use components and component libraries later in the design cycle to achieve high-fidelity mockups and prototypes; while working towards a final design, it is crucial to stay lo-fi and user-centric. We do that by being designers, by employing the now very mature processes of UX Design: from design strategy, validated research and synthesized user understanding to interaction design, ideation, concepts, tested/refined/iterated wireframes/prototypes and holistic visual design.
Final Thoughts
In the quest for time/cost efficiencies and design consistency, don’t let design systems replace true design. There are other elements of design systems which must also be considered, like design guidelines for best practices in using the design system, tools which use the component libraries, and design patterns which combine elements from the component library into reusable designs like login screens and surveys. It is vital to apply design systems in a way which supports work streams without impeding or constraining creativity, and that we always lead with deliberate, thoughtful, user-centered design.
XD Strategist Dennis Crumbine has over 25 years of leadership and design experience spanning companies including Wayfair, The Nielsen Company, JetBlue, and Microsoft. He has a B.A. in Music & Literature from the Gallatin School at New York University and is also a musician, dog lover, and a very proud father.
