{"id":30496,"date":"2020-09-09T07:22:51","date_gmt":"2020-09-09T11:22:51","guid":{"rendered":"https:\/\/centricconsulting.com\/?p=30496"},"modified":"2022-12-02T07:59:48","modified_gmt":"2022-12-02T12:59:48","slug":"an-introduction-to-design-systems-and-how-they-improve-the-digital-customer-experience","status":"publish","type":"post","link":"https:\/\/centricconsulting.com\/blog\/an-introduction-to-design-systems-and-how-they-improve-the-digital-customer-experience\/","title":{"rendered":"An Introduction to Design Systems and How They Improve the Digital Customer Experience"},"content":{"rendered":"<h2 style=\"text-align: center;\">We look into the basics of design systems and how to determine if you need one to improve your digital customer experience.<\/h2>\n<hr \/>\n<p class=\"intro-text\">By now, most people that work in the web development industry have heard the term design system, but if you haven\u2019t created or used one yet, this post is for you.<\/p>\n<p>In this post, I\u2019ll detail the basics of design systems, when &#8212; and when not &#8212; to use it, and how to get started.<\/p>\n<h2>What is a Design System?<\/h2>\n<p>A design system is a well-documented set of design rules for how components on a website should look and interact to provide the best <a href=\"https:\/\/centricconsulting.com\/digital-consulting-services\/customer-experience-design\/\">digital customer experience<\/a>. A good design system will include documentation for:<\/p>\n<ul>\n<li>colors<\/li>\n<li>iconography<\/li>\n<li>typography (fonts)<\/li>\n<li>photography or images<\/li>\n<li>reusable components like tables, grids, download buttons, calls to actions<\/li>\n<li>brand voice and tone<\/li>\n<li>code samples or how to implement a component.<\/li>\n<\/ul>\n<p>Up until I mentioned brand voice and tone, developers reading these probably thought this looked like a stylesheet, and marketers probably still wonder how it\u2019s any different than a brand standards document.<\/p>\n<div class=\"ewa-rteLine\">\n        <div class=\"inline-cta dark-blue\">\n            <div class=\"inline-cta--content\">\n                 Our Customer Experience Experts explain what being customer-centric truly means and how to use the right customer insights to help your business thrive.<\/div>\n<div class=\"ewa-rteLine\">\n            <\/div>\n            <div class=\"inline-cta--button\">\n                <a\n                    class=\"button\"\n                    href=\"https:\/\/go.centricconsulting.com\/CX-FY22-7-Customer-CentricityEvaluateYourPerceptionvs.TheirReality_02LandingPage-OnDemand.html\"\n                    target=\"_blank\"\n                    >\n\n                    View Webinar\n                <\/a>\n            <\/div>\n        <\/div><\/div>\n<h2>Differences Between Stylesheets and Design Systems<\/h2>\n<p>A design system will contain stylesheets, and the more reusable these are, the better, but a design system is the bigger picture. It will contain details you can\u2019t show in stylesheets, including when and how to use particular styles. <strong>For example, looking at a stylesheet won\u2019t tell you the use cases for primary vs. secondary buttons, or the differences between a mobile app version of an icon set, or when to include an icon in a button and which ones to use if for some reason you have multiple.<\/strong><\/p>\n<p>For larger organizations with omnichannel environments, you should use design systems to define and document different components on web, mobile (iOS and Android) and distinct microsites. You should have code examples and usage examples for each, likely in separate languages. For these reasons, a design system should live outside of the web application itself.<\/p>\n<h2>Differences Between Designs Systems and Brand Standards<\/h2>\n<p><a href=\"https:\/\/centricconsulting.com\/blog\/how-to-create-consistent-and-positive-customer-experiences-with-your-brand\/\">Brand standards or brand guidelines<\/a> serve a specific purpose. The usual purpose is documenting brand details like brand voice, logo usage (and alternative versions), iconography, typography, and so on. Once you document these, you then provide your standards to new designers, writers, agency partners and anyone else who creatively represents your company to make sure they consistently apply the brand and designs to the proper channels.<\/p>\n<p><strong>What brand guidelines don\u2019t do is tell you how interactions should work for web or mobile applications to provide the best <a href=\"https:\/\/centricconsulting.com\/blog\/what-is-the-digital-customer-experience\/\">digital customer experience<\/a>. They don\u2019t provide code samples or when to use certain reusable components.<\/strong><\/p>\n<h2>When to Use a Design System for the Best Digital Customer Experience<\/h2>\n<p>As much as I love and advocate for design systems, I don\u2019t believe all websites need a design system. If you are using a purchased or off-the-shelf theme for a content-only website, a brand standard is usually enough. However, if you are creating a custom application (web or mobile), I think a design system greatly reduces the development time and effort and ensures consistency.<\/p>\n<p>When to use a design system:<\/p>\n<ol>\n<li>When you create a custom mobile web, mobile or omnichannel application<\/li>\n<li>When you have multiple developers responsible for front-end<\/li>\n<li>When you separate design teams from UI developers or use contractors.<\/li>\n<\/ol>\n<p><strong>Let\u2019s take a look at each of these.<\/strong><\/p>\n<h3>1. When You Create a Custom Web, Mobile or Omnichannel Application<\/h3>\n<p>With custom application development, you need to make sure your design system is well-documented.<\/p>\n<p>Each of these types of applications have complex interactions that require a design system. You should document each system in a way that keeps developers from guessing which components to use in which situation. For example:<\/p>\n<ul>\n<li>When to use specific layouts, specific table formatting, when to use call to action buttons.<\/li>\n<li>Like a scripted playbook, better consistency (look and interaction), brand adherence, when to use modals, when not to. Extend the brand beyond.<\/li>\n<li>Work more efficiently when working from the ground up.<\/li>\n<\/ul>\n<h3>2. When You Have Multiple Developers Responsible for Front-End Controls or Components<\/h3>\n<p><strong>The key to building customer loyalty is consistency.<\/strong> A single, standout experience may grab attention, but it doesn\u2019t always lead to increased loyalty. According to research from Forrester, 95 percent of customers use three or more channels to connect with a company in a single service interaction with 62 percent using more than one device. The critical part of this scenario is consistency.<\/p>\n<p>It\u2019s not uncommon for individual developer style preferences to creep into app development. A design system can eliminate a Frankenstein approach to building digital applications where apps look as though they\u2019ve been pulled together through various unrelated parts. Not only does individual developer style result in inconsistency within or across applications, but it also results in CSS bloat. People invest too much time and energy defining styles when they don\u2019t need to. A design system provides access to designs that already exist.<\/p>\n<h3>3. When You Separate Design Teams from UI Developers or Use Contractors<\/h3>\n<p><strong>If the product owner isn\u2019t the one who created the design vision, then the team handing off the project needs to make sure they effectively document the design, and developers aren\u2019t the ones choosing how to implement it.<\/strong><\/p>\n<p>Think about building a house. A detailed blueprint gives precise guidance to the various contractors on the dimensions of the foundation, framing, electrical, plumbing, HVAC, and more. Leave it solely to previous examples, conversations or individual contractor preferences, and there is no telling what the house will look like nor how it will function when completed.<\/p>\n<p>A design system creates design and development efficiency, especially for organizations that have or are planning to create multiple applications for its employees and customers.<\/p>\n<h2>Summary<\/h2>\n<p>Design systems are essential tools that help define brand interactions and promote consistent digital customer experiences. They are far more comprehensive than code comments or flat layout files.<\/p>\n<p>As a prelude to a future blog, I\u2019ll mention that Bootstrap, Foundation and Material are not design systems. They\u2019re design frameworks. These systems still require someone to define common interactions, the brand voice and tone, and how the app should be architected from a design pattern standpoint.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We look into the basics of design systems and how to determine if you need one to improve your digital customer experience.<\/p>\n","protected":false},"author":63,"featured_media":30497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_oasis_is_in_workflow":0,"_oasis_original":0,"_oasis_task_priority":"","_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","footnotes":""},"categories":[1],"tags":[19347],"coauthors":[15012],"acf":[],"publishpress_future_action":{"enabled":false,"date":"2024-07-21 20:56:05","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category"},"_links":{"self":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts\/30496"}],"collection":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/comments?post=30496"}],"version-history":[{"count":0,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts\/30496\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/media\/30497"}],"wp:attachment":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/media?parent=30496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/categories?post=30496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/tags?post=30496"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/coauthors?post=30496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}