Building Design Systems Unify User Experiences through a Shared Design Language ― Sarrah Vesselov and Taurie Davis Building Design Systems Unify User Experiences through a Shared Design Language Sarrah Vesselov Taurie Davis Building Design Systems: Unify User Experiences through a Shared Design Language Sarrah Vesselov Taurie Davis Dade City, FL, USA Portland, OR, USA ISBN-13 (pbk): 978-1-4842-4513-2 ISBN-13 (electronic): 978-1-4842-4514-9 https://doi.org/10.1007/978-1-4842-4514-9 Copyright © 2019 by Sarrah Vesselov and Taurie Davis This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image, we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Louise Corrigan Development Editor: James Markham Coordinating Editor: Nancy Chen Cover designed by Taurie Davis Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science+Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], or visit www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the authors in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484245132. For more detailed information, please visit www.apress.com/source-code. Printed on acid-free paper Table of Contents About the Authors ��������������������������������������������������������������������������������ix About the Technical Reviewer �������������������������������������������������������������xi Acknowledgments �����������������������������������������������������������������������������xiii Introduction ����������������������������������������������������������������������������������������xv Chapter 1: The Rise of Design Systems ������������������������������������������������1 A History of Systems in Design �����������������������������������������������������������������������������2 The Intersection of Art, Technology, and Industry �������������������������������������������������5 The Rise of the Web �����������������������������������������������������������������������������������������5 Technological Advancements ��������������������������������������������������������������������������7 The Influence of Technology on Business ��������������������������������������������������������9 The Move to Agile ������������������������������������������������������������������������������������������10 Tying It All Together ���������������������������������������������������������������������������������������������11 Chapter 2: Introducing Design Systems ���������������������������������������������13 Style Guides, Component Libraries, and Design Systems �����������������������������������15 The Right Time to Implement a Design System ��������������������������������������������������17 Age of the Organization ���������������������������������������������������������������������������������17 Team Size ������������������������������������������������������������������������������������������������������18 Volume and Type of Work ������������������������������������������������������������������������������18 iii TTaabbllee ooff CCoonnTTeennTTss Approaching the Start of Your Design System ����������������������������������������������������19 Understanding Why Design Systems Fail ������������������������������������������������������������20 Lack of Initial Buy-In ��������������������������������������������������������������������������������������20 Trying to Do Too Much, Too Soon �������������������������������������������������������������������21 Perfectionism ������������������������������������������������������������������������������������������������21 Maintenance ��������������������������������������������������������������������������������������������������22 Design System Envy ��������������������������������������������������������������������������������������22 Tying It All Together ���������������������������������������������������������������������������������������������23 Chapter 3: Selling the System ������������������������������������������������������������25 Defining Why Design Systems Are Beneficial �����������������������������������������������������25 Three Dimensions of Value ����������������������������������������������������������������������������26 Communication Strategies ����������������������������������������������������������������������������������44 Diplomacy ������������������������������������������������������������������������������������������������������44 Education �������������������������������������������������������������������������������������������������������45 Salesmanship: Preparing for the “No” �����������������������������������������������������������46 Good Public Relations! �����������������������������������������������������������������������������������47 Selling Your System Worksheet ��������������������������������������������������������������������������47 Tying It All Together ���������������������������������������������������������������������������������������������49 Chapter 4: Design As a Language �������������������������������������������������������51 Lexicon: The Elements of Your System����������������������������������������������������������������53 Building Up Elements ������������������������������������������������������������������������������������53 Breaking Down Interfaces �����������������������������������������������������������������������������55 How a System Helps You Scale Design ���������������������������������������������������������55 Grammar: The Guidelines of Your System �����������������������������������������������������������56 Different Types of Guidelines �������������������������������������������������������������������������57 Contextual Rules ��������������������������������������������������������������������������������������������58 iv TTaabbllee ooff CCoonnTTeennTTss Design Principles ������������������������������������������������������������������������������������������������59 Defining Design Principles ����������������������������������������������������������������������������59 A Practical Guide to Creating Your Own ���������������������������������������������������������60 A Shared Language ���������������������������������������������������������������������������������������������62 Tying It All Together ���������������������������������������������������������������������������������������������62 Chapter 5: Implementing Your System �����������������������������������������������63 Assessing Your Organization �������������������������������������������������������������������������������63 Type of Organization ��������������������������������������������������������������������������������������64 Stakeholder Buy-In ����������������������������������������������������������������������������������������65 Team Size ������������������������������������������������������������������������������������������������������65 Gathering a Support System �������������������������������������������������������������������������������66 Assessing Your Product ���������������������������������������������������������������������������������������67 Utilize an Interface Inventory �������������������������������������������������������������������������67 Creating a Predictable Architecture ��������������������������������������������������������������������68 Categorizing to Improve Discoverability ��������������������������������������������������������69 Card Sorting ���������������������������������������������������������������������������������������������������70 Layout �����������������������������������������������������������������������������������������������������������������71 Spacing ����������������������������������������������������������������������������������������������������������71 Grid ����������������������������������������������������������������������������������������������������������������73 Styles ������������������������������������������������������������������������������������������������������������������74 Creating a Typographic System ���������������������������������������������������������������������75 An Accessible Color System ��������������������������������������������������������������������������76 Uniform Iconography �������������������������������������������������������������������������������������78 Components ��������������������������������������������������������������������������������������������������������79 Creating a Component Library �����������������������������������������������������������������������79 Tooling �����������������������������������������������������������������������������������������������������������79 Building Components ������������������������������������������������������������������������������������80 v TTaabbllee ooff CCoonnTTeennTTss Regions ���������������������������������������������������������������������������������������������������������������81 Content ����������������������������������������������������������������������������������������������������������������82 Usability ��������������������������������������������������������������������������������������������������������������82 Accessibility ��������������������������������������������������������������������������������������������������83 Internationalization ����������������������������������������������������������������������������������������84 Technical Implementation �����������������������������������������������������������������������������������84 A Single Source of Truth ��������������������������������������������������������������������������������84 Incremental Implementation �������������������������������������������������������������������������85 Documentation ����������������������������������������������������������������������������������������������������86 Establish a System That Self-Documents ������������������������������������������������������87 Searchability ��������������������������������������������������������������������������������������������������88 Tying It All Together ���������������������������������������������������������������������������������������������88 Case Studies ��������������������������������������������������������������������������������������������������89 Chapter 6: Measure and Maintain ������������������������������������������������������93 Measuring Effectiveness �������������������������������������������������������������������������������������93 Gathering Data Through Goal-Setting ������������������������������������������������������������94 Gathering Data Through Surveys �������������������������������������������������������������������96 Maintaining Your System in the Face of Growth ������������������������������������������102 Iterating on Components and Guidelines ����������������������������������������������������������106 Making Room for Revisions �������������������������������������������������������������������������106 Utilizing Research ����������������������������������������������������������������������������������������107 Communicating Changes �����������������������������������������������������������������������������108 Tying It All Together �������������������������������������������������������������������������������������������108 Chapter 7: A GitLab Case Study ��������������������������������������������������������111 Background �������������������������������������������������������������������������������������������������������111 Problem �������������������������������������������������������������������������������������������������������������112 Our Roles�����������������������������������������������������������������������������������������������������������112 vi TTaabbllee ooff CCoonnTTeennTTss Sarrah ����������������������������������������������������������������������������������������������������������113 Taurie �����������������������������������������������������������������������������������������������������������114 Challenges ��������������������������������������������������������������������������������������������������������115 Misconceptions and Buy-In �������������������������������������������������������������������������115 Resourcing���������������������������������������������������������������������������������������������������117 Tooling ���������������������������������������������������������������������������������������������������������120 Structure and Setup ������������������������������������������������������������������������������������121 Component Redundancy: Buttons, Badges, Labels, Tags, Oh My! ���������������123 Communicating Value ����������������������������������������������������������������������������������125 Lessons Learned �����������������������������������������������������������������������������������������������127 Next Steps ���������������������������������������������������������������������������������������������������������128 Marketing ����������������������������������������������������������������������������������������������������128 Less Reliance on Design Tools ��������������������������������������������������������������������130 Tying It All Together �������������������������������������������������������������������������������������������130 Chapter 8: Design Systems As a Resource ���������������������������������������133 The Role of Open Source �����������������������������������������������������������������������������������133 Researching Other Systems ������������������������������������������������������������������������������134 Commonalities ���������������������������������������������������������������������������������������������135 Differences ��������������������������������������������������������������������������������������������������136 Tying It All Together �������������������������������������������������������������������������������������������139 Index �������������������������������������������������������������������������������������������������141 vii About the Authors Sarrah Vesselov is a designer and developer with more than 10 years’ experience in web design and development. As the UX manager at GitLab, she helped set the overall direction of UX from a design and application experience perspective. Before landing at GitLab, she was lead UX designer and UI developer at Nitro Solutions and UI/UX manager at Mad Mobile, building beautiful experiences for clients including Aeropostale, Payless, Sysco, Talbots, and AutoNation. She served as Director of the Tampa chapter of Women Who Code for several years and is passionate about teaching and mentoring the next generation of tech. Taurie Davis is a UX and product designer who specializes in applying user-centered design methods to create cohesive, intuitive, and compelling experiences. In her role as Staff UX designer at GitLab, she actively contributed to their design system as a primary maintainer. Her experience includes working with startups and mentoring designers around the world. She is passionate about the open source community and growing open design practices. ix About the Technical Reviewer Bermon Painter has spent the past 20 years focusing on product strategy, design, and web development across a handful of industries. In his current role at EY Digital, Bermon leads innovation initiatives that help organizations create holistic experiences, digital products, and services, with an eye toward delivering value to customers. Bermon is also responsible for building and staffing the EY wavespace™ in Charlotte, a physical innovation space equipped with accelerator programs, co-creation activities, and facilitated design thinking sessions that help teams get in the mindset of approaching challenging problems differently, reinforcing the value of diverse thinking, and creating solutions through rapid prototyping. As the innovation and strategy lead at EY digital, Bermon applies his expertise in experience strategy, design thinking, agile and lean methodologies, and interface design and development. He frequently speaks at conferences and facilitates workshops around the world. In his local community, Bermon organizes and hosts numerous free community events, hosts a quarterly mini- conference called FusionConf, and leads the Charlotte IxDA chapter. Before joining EY, Bermon led various cross-discipline teams that crafted holistic product strategies all the way to end-to-end implementation of digital products and services. His claim to fame is having designed the Sass logo. In his free time, he enjoys drinking a tasty frosted mug of root beer while maniacally twisting his mustache. xi