{"id":17054,"date":"2022-11-30T14:37:17","date_gmt":"2022-11-30T14:37:17","guid":{"rendered":"https:\/\/uxmag.com\/?p=17054"},"modified":"2022-11-30T14:37:20","modified_gmt":"2022-11-30T14:37:20","slug":"building-delight-in-your-design-system","status":"publish","type":"post","link":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system","title":{"rendered":"Building Delight in Your Design System"},"content":{"rendered":"\n<p><em>This is an edited version of the talk that I delivered to\u00a0<a href=\"https:\/\/designmatters.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Matters<\/a>\u00a0in Copenhagen in September, 2022.<\/em><\/p>\n\n\n\n<p>Delight is a word that is thrown around by designers a lot, usually when they want to complain about the work they\u2019re not being allowed to do, or, like me, when they\u2019re on a soapbox, trying to tell other designers how to do their jobs. So, why is delight important, and what should we be talking about when we use the word \u2018<em>delight<\/em>\u2019?<\/p>\n\n\n\n<p>According to the internet of dictionaries, to \u2018delight\u2019 someone is to give great joy or satisfaction. There are two parts to that: Joy and satisfaction. Personally, I think a lot of focus when we talk about delight tends to focus on the joy part primarily, and not as much on the satisfaction. We aim for delight on a surface level, and not at a deeper level.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"deep-delight-vs-surface-delight\">Deep Delight vs Surface Delight<\/h3>\n\n\n\n<p>This isn&#8217;t a new thought. In fact, it&#8217;s been mainly stolen from\u00a0<a href=\"https:\/\/twitter.com\/aarron?lang=en\" target=\"_blank\" rel=\"noreferrer noopener\">Aaron Walter<\/a>\u00a0in his\u00a0<a href=\"https:\/\/www.nngroup.com\/articles\/theory-user-delight\/\" target=\"_blank\" rel=\"noreferrer noopener\">NNGroup article<\/a>, and in his (fantastic) book\u00a0<a href=\"https:\/\/abookapart.com\/products\/designing-for-emotion\" target=\"_blank\" rel=\"noreferrer noopener\">Designing for Emotion<\/a>. Aaron redrew Maslow\u2019s heirarchy of needs into his heirarchy of user needs. As you can see above, he suggests that without functionality, reliability and usability (in that order), we can\u2019t achieve achieve pleasurable experiences, no matter how hard the design tries. As part of that, he identifies that these first three (functional, reliable, usable) are responsible for deep delight, whereas the pleasure is only surface delight.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png\" alt=\"Aaron Walter's heirarchy of user needs\"\/><figcaption>Aaron Walter&#8217;s heirarchy of user needs<\/figcaption><\/figure>\n\n\n\n<p>You\u2019ll only be able to effectively satisfy someone if your product delivers on the deep delight: if your product works as it\u2019s expected to, or surprises the user by working better than it\u2019s expected to; if it deliver the information that is required, when it\u2019s required; If it anticipates the user\u2019s needs and gets it right; If it learns from the user and adapts, either through fancy AI or just through the product team actually listening and making product changes.<\/p>\n\n\n\n<p>Basically, creating an exceptional user experience is a precondition for deep delight.<\/p>\n\n\n\n<p>And it&#8217;s important \u2014 Deep delight is how you create lifetime customer value. Deep delight is how you have your product be embedded in a user\u2019s day to day life. Deep delight is how you create psychological safety with your customers.<\/p>\n\n\n\n<p>However, deep delight being important doesn&#8217;t erase the importance surface delight.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"using-maccyds-to-stretch-the-analogy\">Using MaccyDs to stretch the analogy<\/h3>\n\n\n\n<p>Surface delight is the difference between McDonalds and a fancy restaurant. Bear with me&#8230; When you break it down, McDonald\u2019s is an incredibly efficient machine that prioritises consistency, quality and usability. They satisfy the basic needs pretty darn well, from the ordering process, to the speed of production, to the fact that a Big Mac tastes pretty much the same no matter where you go. But it\u2019s the focus on pleasure via ingredients, techniques and atmosphere among other things that elevates a Nobu or a Fat Duck. Both a fancy restaurant and McDonald&#8217;s satisfy the basic needs, but the focus on creating an elevated, pleasurable experience is what gets people talking. It\u2019s what gives people FOMO. It\u2019s what makes people excited to tell their friends about it.<\/p>\n\n\n\n<p>Especially in the saturated market we live in today, where it\u2019s rare to have an app or website that truly differentiates on core experience, or heck, even layout, the surface delight is often the area to most easily differentiate. Creating happiness, joy or any other positive emotional reactions can mean you stand out and excel. Basically, surface delight is an amplifier.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/kano.png\" alt=\"Noriaki Kano, but with a thug life hat and glasses on because he's a badass\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"enter-the-kano\">Enter the Kano<\/h3>\n\n\n\n<p>If you want some more science around this, Noriaki Kano developed\u00a0<a href=\"https:\/\/kanomodel.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">the Kano model<\/a>\u00a0back in the 80s that shows that customer loyalty is connected to our emotional responses to product features. He did a similar thing, in that he split up these features into a hierarchy:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>must-be qualities \u2014 the basic needs. The expected qualities. Without basic needs satisfied in your product, you&#8217;ll never get satisfaction from a user.<\/li><li>one-dimensional qualities \u2014 performance needs. These are the things that make things work better. The performance improvements. These offer satisfaction when fulfilled well, but dissatisfaction when not fulfilled well.<\/li><li>attractive qualities \u2014 the delighters. These are the sprinkles on top. They satisfy when fulfilled well, but they don&#8217;t actually change anything in satisfaction if you don&#8217;t fulfil them<\/li><li>Indifferent qualities \u2014 the things that don&#8217;t make any change<\/li><li>Negative qualities \u2014 the things that no matter how well you fulfil them, they will always dissatisfy the user.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/kano-graph.png\" alt=\"A graph of how the different qualities in the Kano work, which is explained below\"\/><figcaption>The Kano Model graph that is show absolutely everything<\/figcaption><\/figure>\n\n\n\n<p>I&#8217;ll come back to the last two later, but in essence, Kano found that if you don\u2019t meet the base-level needs, customers won\u2019t be satisfied with the experience and the performance and delighters mean bupkis. Similarly, if your performance needs are dissatisfying, your delighters will be less effective. He also notes that over time and with greater exposure, delighters can become performance needs, and performance needs can become basic needs. Basically, today\u2019s shiny things are tomorrow\u2019s table stakes.&nbsp;<\/p>\n\n\n\n<p>Just think about Twitter&#8217;s\u00a0<a href=\"https:\/\/uxplanet.org\/pull-to-refresh-ui-pattern-42a85f671cdf?gi=545a906bf3f2#:~:text=The%20pull%2Dto%2Drefresh%20(,countless%20apps%20adopted%20this%20gesture.\" target=\"_blank\" rel=\"noreferrer noopener\">pull to refresh pattern<\/a>, or the slash command in Slack or Discord. These have relatively quickly moved from exciting delighters to standard UI patterns that dissatisfy when they don&#8217;t exist (or don&#8217;t work as expected).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/eb57a3259443a6983bdb850d43a52e26.gif\" alt=\"An example of playful delight via Mailchimp. A chimp's finger is nervously hovering over a button and sweating.\"\/><figcaption>An example of playful delight via Mailchimp<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"types-of-delight\">Types of delight<\/h3>\n\n\n\n<p>I\u2019d argue that as product teams, we\u2019re still struggling with the \u2018deep delight\u2019 part of the pie, but creating functional, reliable, usable products is another article. Let\u2019s focus for a bit on the surface delight part, as it\u2019s the thing that\u2019s often sacrificed, especially when it comes to our MVP-obsessed product culture today.&nbsp;<\/p>\n\n\n\n<p>So, what different types of delight are there? I think Microsoft\u2019s categorisations of the\u00a0<a href=\"https:\/\/www.microsoft.com\/en-us\/research\/group\/customer-insights-research\/articles\/designing-for-delight-five-patterns-to-building-delightful-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">five patterns of delight<\/a>\u00a0are pretty good boxes to put things in:\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Playful experiences&nbsp;<\/strong>\u2014 these are ones that try and elicit smiles and laughter. They encourage people to enjoy what they\u2019re doing, not just focus on getting it done. These are good for providing an emotional boost to your users.<\/li><li><strong>Attractive experiences<\/strong>&nbsp;\u2014 kind of speaks for itself. We\u2019re talking about aesthetically pleasing, or more importantly, aesthetically pleasing to your demographic. We\u2019re aiming for a sense of belonging, or aspirational belonging. To tell the story of the product through aesthetic choices.<\/li><li><strong>Natural experiences<\/strong>&nbsp;\u2014 comfortable and intuitive. This is where that satisfaction part of delight comes in. Natural experiences excel at making a user feel at home. They\u2019re trying to play off of memory and affordances (bordering on mimicry) to achieve it.<\/li><li><strong>Personal experiences<\/strong>&nbsp;\u2014 these empower the user. Allowing the user to personalize, or even better, automatically personalizing based on experience and assumptions (<em>if<\/em>&nbsp;you get it right), empowers them and helps them ground a routine because it\u2019s what they feel like they need. It gives them agency and it fulfils their needs.<\/li><li><strong>Empowered experiences \u2014<\/strong>&nbsp;This is where you feel like you\u2019ve got super powers. Doing something way easier than they have before. It leaves the user feeling delighted with themselves and what they\u2019ve done. It also makes them appreciative for the time and cognitive effort they\u2019ve saved.<\/li><\/ul>\n\n\n\n<p>Now, it&#8217;s important to note that not all of these will make sense for your product. You definitely need to figure out what fits what you&#8217;re trying to achieve.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"building-delight-into-your-systems\">Building delight into your systems<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-beginning-is-a-very-good-place-to-start\">The beginning is a very good place to start<\/h3>\n\n\n\n<p>Just like any good systems thinking exercise, it&#8217;s always best to start at the foundation. We know that the foundation is where your colours, typography, spacing, grids are defined. Hopefully, it\u2019s also where your design principles and core guidelines are established too. But before we get there, let&#8217;s go a level up to the organizational level.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/system-hierarchy.png\" alt=\"A hierarchy of system needs, from foundations, to elements, to components, to layouts (and beyond)\"\/><figcaption>The way I like to look at the hierarchy of your systems<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"delight-as-a-value\">Delight as a value<\/h3>\n\n\n\n<p>If you haven\u2019t already, work on a\u00a0<a href=\"https:\/\/zeroheight.com\/blog\/governance-is-a-design-systems-friend\/\" target=\"_blank\" rel=\"noreferrer noopener\">design team charter<\/a>\u00a0&#8211; this is a foundational document that not only defines how your team works, but also what\u00a0<em>values<\/em>\u00a0you have as a team for what you\u2019re working on. They provide a consensus for what you do and how you do it, and help you engrain and encode important things into your team (like, I don\u2019t know, delight).\u00a0<\/p>\n\n\n\n<p>If you want a template for a workshop on how to write a design charter, Michelle has pulled together\u00a0<a href=\"https:\/\/www.figma.com\/community\/file\/1112144430251568839\" target=\"_blank\" rel=\"noreferrer noopener\">this handy workshop<\/a>. If you want to know more about them, Peter Merholz and Kristin Skinner covered them really well in\u00a0<a href=\"https:\/\/orgdesignfordesignorgs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Org Design for Design Orgs<\/a>\u00a0(which should be any design leader, designops, or design team nerd&#8217;s bible).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"delight-as-a-principle\">Delight as a principle<\/h3>\n\n\n\n<p>Next level down, your principles. Your principles are similar to your values, but are more focussed on the work that you create \u2014 the outputs. They are a few statements that cover off the most important things when it comes to the things you create. They enable you to have a guiding light when you\u2019re deciding on solutions, and more importantly, the scope of solutions. They also act as a blunt object to beat people over the head with when something isn\u2019t satisfying the principles (or maybe just a good focal point for conversations).<\/p>\n\n\n\n<p>Enshrining delight in your principles is a first step in saying \u2018we believe in this and we are prioritizing this\u2019. You could use &#8216;keep it wonky&#8217; if you wanted to focus on playful. It could also be \u2018make everything a learning opportunity for your product\u2019, if you were prioritizing empowering delight. Or \u201cMake it feel like sinking into a sofa\u201d to encapsulate the natural or aesthetic delight you\u2019re trying to capture. Again, if you want some advice on writing good principles, there&#8217;s&nbsp;<a href=\"https:\/\/zeroheight.com\/blog\/5-tips-for-writing-effective-design-principles\/\">another great article<\/a>&nbsp;on that.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"minimum-delightful-product-%F0%9F%A4%A2\">Minimum Delightful Product \ud83e\udd22<\/h3>\n\n\n\n<p>Having these things enshrined at a Values and a Principles level, for both your design and product teams, means that you can start having those conversations about what the V stands for in MVP. Viability should be a combination of user needs and org needs. If one of your org needs is to create a product that elicits an emotional response, or encourages users to stick around without providing extrinsic motivation, then there should be a shared understanding between your teams that delighting users is part of the \u2018viability\u2019.&nbsp;<\/p>\n\n\n\n<p>I\u2019ve heard people use terms like \u2018Minimum Loveable Product\u2019 or \u2018Minimum Delightful Product\u2019 and this just makes me throw up in my mouth a little bit. It also devalues how important delight can be to succeeding. Delight&nbsp;<em>can<\/em>&nbsp;mean viability. If it\u2019s the case for your product, be explicit with how important it is, and build a shared understanding around that between your product, design, engineering, and senior leadership teams.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"making-delight-repeatable\">Making delight repeatable<\/h3>\n\n\n\n<p>But how do we make delight repeatable at a component level?<\/p>\n\n\n\n<p>First up are&nbsp;<strong>illustration systems<\/strong>. Product illustration is a super powerful way of getting complex concepts across in simple ways. However, they\u2019re also great for providing the user a guide for what emotional state they should be in. Using color, type, motion, and, very specifically, faces and body language, gives the user a shortcut for how they should be feeling when using the product.<\/p>\n\n\n\n<p>One of the problems with product illustration is that it can be costly and hard to scale. Illustration systems are, in their simplest form, a way of codifying your illustration patterns through guidelines, templates, and libraries (ie. how to use illustrations, how to make illustrations, and libraries full of ones you\u2019re able to use). They can also include some pretty cool modular illustration systems, much like the ones that&nbsp;<a href=\"https:\/\/blush.design\/\">Blush<\/a>&nbsp;provides. I also recommend this great talk by&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=T4V2CJOySTM\">Bonnie Kate Wolf<\/a>&nbsp;on illustration systems.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/1_FnTZN2l4m9Zxc4Yv3-_XhQ--1--1.gif\" alt=\"An animated gif of the Blush Figma plugin in action\"\/><figcaption>The Blush Figma plugin in action<\/figcaption><\/figure>\n\n\n\n<p>Next up,&nbsp;<strong>microcopy.<\/strong>&nbsp;Another area that is so often underloved within design is content. I was genuinely surprised by the lack of content specialists in the How We Document survey we ran last year (&lt; 1% \ud83d\ude31). Words and visuals are your main tools for conveying meaning, information, and emotion, and filling&nbsp;<em>both<\/em>&nbsp;of these with personality is a quick way to inject joy into your product.<\/p>\n\n\n\n<p>Systematising microcopy is relatively easy. One &#8211; hire a content specialist for your design system. Easy. Second, and at the very least, make sure you spend time writing your content creation guidelines. This is pretty commonplace for marketing copy, but product copy goes severely unloved. What ends up happening instead is that it comes down to the designer who\u2019s doing the screen to chuck something in there. Shudder.<\/p>\n\n\n\n<p>One of the most obvious ways to inject delight into your product is via&nbsp;<strong>motion.<\/strong>It\u2019s another thing that gets left by the wayside in the pursuit of MVP. Adding expressive motion to your product brings it to life. It celebrates the interaction and adds character. It\u2019s a great way of conveying your brand to the user.&nbsp;<\/p>\n\n\n\n<p>But how do you systematize it? Apart from leaving room in the product process, or having minimum guidelines for components that include animation, tokens can also help us smooth out the bumps when it comes to implementing motion and animation. We can now encode the&nbsp;<a href=\"https:\/\/prototypr.io\/post\/animation-design-tokens\">animation values<\/a>&nbsp;via design tools (or write straight to the JSON). These can then be translated and spat out in whatever format your devs need, meaning they don\u2019t have to faff about with it as much. Also, things like&nbsp;<a href=\"https:\/\/airbnb.design\/lottie\/\">Lottie<\/a>&nbsp;are making advanced motion much easier to implement, as it spits out a JSON file directly from After Effects that is dropped in almost like an img into your code (as long as you reference the Lottie library).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/image.png\" alt=\"An example of how animation tokens are specified\"\/><figcaption>An example of how animation tokens work from&nbsp;<a href=\"https:\/\/prototypr.io\/post\/animation-design-tokens\">Prototypr&#8217;s great article<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"don%E2%80%99t-forget-your-internal-users\">Don\u2019t forget your (internal) users<\/h2>\n\n\n\n<p>One area I don\u2019t think I\u2019ve seen as much, is taking effort to sprinkle delight on your docs and internal tooling. It will most likely have to be via copy, but have fun. Team happiness should be a key success factor in your design system. A happy, content, and satisfied team are good for business. They\u2019re productive and won\u2019t be as likely to leave. Yes, you have to make sure your docs are functional, reliable, and usable first, but adding a little bit of delight just makes the \u2018happiness\u2019 metric that little bit easier to achieve.<\/p>\n\n\n\n<p>Want some examples? An oldie but a goodie is the&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Status\/418\">&#8216;I am a teapot&#8217; HTTP status<\/a>. One closer to the design system world is Gitlab&#8217;s inclusion of the&nbsp;<a href=\"https:\/\/design.gitlab.com\/components\/socks\/\">&#8216;socks&#8217; component<\/a>. They didn&#8217;t need to include these, but they add a little bit of joy to people&#8217;s lives. Or even Brainly&#8217;s use of beautiful motion and illustration in their&nbsp;<a href=\"https:\/\/design.brainly.com\/?utm_source=showcase\">Pencil docs<\/a>&nbsp;shows that care can add some beauty and joy for your internal users.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/WYusyh-az3P5fnmhL1wXHA.gif\" alt=\"Pencil's current animation on the front page of Pencil\"\/><figcaption>Pencil&#8217;s current animation on the front page of&nbsp;<a href=\"https:\/\/design.brainly.com\/8adfd5f36\/p\/10bcb9-pencil\">Pencil<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"measuring-it\">Measuring it<\/h2>\n\n\n\n<p>However, doing all this joyful work means nothing if you aren&#8217;t measuring it. Figuring out the ways to measure the effects of happiness is notoriously difficult. But just like anything, there are a combination of measures that can get you there. They&#8217;ll likely be a mixture of qualitative and quantitative measures. The qual measures are especially good at increasing confidence that what you&#8217;re creating works, but the business will likely want some kind of quant proof that it&#8217;s working&#8230;<\/p>\n\n\n\n<p>A large part of figuring out the right quant measures are figuring out your&nbsp;<a href=\"https:\/\/scaledagile.com\/blog\/demystifying-leading-indicators-in-product-development-and-innovation\/\">leading metrics<\/a>&nbsp;are. These are the things that, while probably not the important metrics you&nbsp;<em>want&nbsp;<\/em>to measure like retention, signup, or word-of-mouth reach, are the things you can effectively measure&nbsp;<em>and<\/em>&nbsp;change within a reasonable time frame. The problem with a lot of the measures that directly impact the business is that most of these are lagging metrics, and will sometimes take months, or even quarters, to move.&nbsp;<\/p>\n\n\n\n<p>There\u2019s also a point where you need to realize that some things are just really hard to measure. This is where you need to come to an agreement on what a &#8216;good enough&#8217; measure is for your business. Yes, it would be amazing to run everything through variant testing with user diaries and absolutely every facet tracked, but that would also cost a fortune and take 6 months to prove. MVP your measurement.<\/p>\n\n\n\n<p>But what about your internal teams? Measuring team happiness through surveys, in-\u2019product\u2019 feedback, and user interviews is an important way to be showing the value you\u2019re bringing.<\/p>\n\n\n\n<p>Finally, once you\u2019ve figured out what works for you, engrain these measures in your KPIs, OKRs, or whatever other measurement frameworks you use. This will automatically raise their importance to your stakeholders. It gives you something to lean upon to make sure it\u2019s taken seriously.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"be-mindful-of-when-it-goes-wrong\">Be mindful of when it goes wrong<\/h3>\n\n\n\n<p>Causing delight is a tricky business. It\u2019s what Kano talks about with those indifferent qualities and negative qualities. Indifference and negative satisfaction, especially with delight, are often a matter of taste. Some people just don\u2019t find cutesy or quirky things delightful. Others don\u2019t have the cultural experiences or cues to relate to, to make your western-focussed natural interface a comforting experience (remember, we often deal with global userbases these days). If you assume or guess ways to empower, and they don\u2019t land, it could end up harming an experience for some users.&nbsp;<\/p>\n\n\n\n<p>This is ok, but it\u2019s why testing with users is so important with delight.&nbsp;<\/p>\n\n\n\n<p>You obviously won\u2019t be able to show your designs to everyone, and it won\u2019t be in the same context, but you should get some &#8216;heads-ups&#8217; on what works and what doesn\u2019t, and then use that to inform decisions on what stays and what doesn\u2019t. Just make sure that when you\u2019re doing testing, it\u2019s with a diverse user base of different cultures, ages, genders, backgrounds, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/invisiblemachines.ai\/?utm_source=uxmag&amp;utm_medium=referral&amp;utm_campaign=article_buildingdelightinyourdesignsystem&amp;utm_content=ad1\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/06\/01book-1024x536.jpg\" alt=\"\" class=\"wp-image-16672\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/06\/01book-1024x536.jpg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2021\/06\/01book-300x157.jpg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2021\/06\/01book-768x402.jpg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2021\/06\/01book-1536x804.jpg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2021\/06\/01book.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This is an edited version of the talk that I delivered to\u00a0Design Matters\u00a0in Copenhagen in September, 2022. Delight is a word that is thrown around by designers a lot, usually when they want to complain about the work they\u2019re not being allowed to do, or, like me, when they\u2019re on a soapbox, trying to tell<\/p>\n","protected":false},"author":2573,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"topics":[3,149,25,28,29,36,116,121,122,2910],"class_list":{"0":"post-17054","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-uncategorized","7":"topics-accessibility","8":"topics-behavioral-science","9":"topics-customer-experience","10":"topics-design","11":"topics-design-theory","12":"topics-empathy","13":"topics-usability","14":"topics-ux-education","15":"topics-ux-magazine","16":"topics-ux-world-changing-ideas","17":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building Delight in Your Design System - UX Magazine<\/title>\n<meta name=\"description\" content=\"There seems to be a pervasive idea that using systems to help your work will lead to everything being a homogenous, grey, functional, meh experience. But delight is important! So, how can we design our processes to make sure that delight is a key part in what makes your MVPs \u2018viable\u2019?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Delight in Your Design System\" \/>\n<meta property=\"og:description\" content=\"There seems to be a pervasive idea that using systems to help your work will lead to everything being a homogenous, grey, functional, meh experience. But delight is important! So, how can we design our processes to make sure that delight is a key part in what makes your MVPs \u2018viable\u2019?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system\" \/>\n<meta property=\"og:site_name\" content=\"UX Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxmag\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-30T14:37:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-30T14:37:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png\" \/>\n<meta name=\"author\" content=\"Luke Murphy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxmag\" \/>\n<meta name=\"twitter:site\" content=\"@uxmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luke Murphy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#article\",\"isPartOf\":{\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system\"},\"author\":{\"name\":\"Luke Murphy\",\"@id\":\"https:\/\/uxmag.com\/#\/schema\/person\/6dfd45a14c4271969cce75b4edd6ff48\"},\"headline\":\"Building Delight in Your Design System\",\"datePublished\":\"2022-11-30T14:37:17+00:00\",\"dateModified\":\"2022-11-30T14:37:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system\"},\"wordCount\":3065,\"publisher\":{\"@id\":\"https:\/\/uxmag.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#primaryimage\"},\"thumbnailUrl\":\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system\",\"url\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system\",\"name\":\"Building Delight in Your Design System - UX Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/uxmag.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#primaryimage\"},\"image\":{\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#primaryimage\"},\"thumbnailUrl\":\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png\",\"datePublished\":\"2022-11-30T14:37:17+00:00\",\"dateModified\":\"2022-11-30T14:37:20+00:00\",\"description\":\"There seems to be a pervasive idea that using systems to help your work will lead to everything being a homogenous, grey, functional, meh experience. But delight is important! So, how can we design our processes to make sure that delight is a key part in what makes your MVPs \u2018viable\u2019?\",\"breadcrumb\":{\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#primaryimage\",\"url\":\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png\",\"contentUrl\":\"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/uxmag.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customer Experience\",\"item\":\"https:\/\/uxmag.com\/topics\/customer-experience\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Building Delight in Your Design System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/uxmag.com\/#website\",\"url\":\"https:\/\/uxmag.com\/\",\"name\":\"UX Magazine\",\"description\":\"UX Magazine is a central, one-stop resource for everything related to user experience. We provide a steady stream of current, informative, and credible information about UX and related fields to enhance the professional and creative lives of UX practitioners and those exploring the field. Our content is driven and created by an impressive roster of experienced professionals\",\"publisher\":{\"@id\":\"https:\/\/uxmag.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/uxmag.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/uxmag.com\/#organization\",\"name\":\"UX Magazine\",\"alternateName\":\"uxmag\",\"url\":\"https:\/\/uxmag.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uxmag.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png\",\"contentUrl\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png\",\"width\":2440,\"height\":428,\"caption\":\"UX Magazine\"},\"image\":{\"@id\":\"https:\/\/uxmag.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxmag\",\"https:\/\/x.com\/uxmag\",\"https:\/\/www.linkedin.com\/company\/ux-magazine\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/uxmag.com\/#\/schema\/person\/6dfd45a14c4271969cce75b4edd6ff48\",\"name\":\"Luke Murphy\",\"url\":\"https:\/\/uxmag.com\/contributors\/luke-murphy\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building Delight in Your Design System - UX Magazine","description":"There seems to be a pervasive idea that using systems to help your work will lead to everything being a homogenous, grey, functional, meh experience. But delight is important! So, how can we design our processes to make sure that delight is a key part in what makes your MVPs \u2018viable\u2019?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system","og_locale":"en_US","og_type":"article","og_title":"Building Delight in Your Design System","og_description":"There seems to be a pervasive idea that using systems to help your work will lead to everything being a homogenous, grey, functional, meh experience. But delight is important! So, how can we design our processes to make sure that delight is a key part in what makes your MVPs \u2018viable\u2019?","og_url":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system","og_site_name":"UX Magazine","article_publisher":"https:\/\/www.facebook.com\/uxmag","article_published_time":"2022-11-30T14:37:17+00:00","article_modified_time":"2022-11-30T14:37:20+00:00","og_image":[{"url":"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png","type":"","width":"","height":""}],"author":"Luke Murphy","twitter_card":"summary_large_image","twitter_creator":"@uxmag","twitter_site":"@uxmag","twitter_misc":{"Written by":"Luke Murphy","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#article","isPartOf":{"@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system"},"author":{"name":"Luke Murphy","@id":"https:\/\/uxmag.com\/#\/schema\/person\/6dfd45a14c4271969cce75b4edd6ff48"},"headline":"Building Delight in Your Design System","datePublished":"2022-11-30T14:37:17+00:00","dateModified":"2022-11-30T14:37:20+00:00","mainEntityOfPage":{"@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system"},"wordCount":3065,"publisher":{"@id":"https:\/\/uxmag.com\/#organization"},"image":{"@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#primaryimage"},"thumbnailUrl":"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system","url":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system","name":"Building Delight in Your Design System - UX Magazine","isPartOf":{"@id":"https:\/\/uxmag.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#primaryimage"},"image":{"@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#primaryimage"},"thumbnailUrl":"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png","datePublished":"2022-11-30T14:37:17+00:00","dateModified":"2022-11-30T14:37:20+00:00","description":"There seems to be a pervasive idea that using systems to help your work will lead to everything being a homogenous, grey, functional, meh experience. But delight is important! So, how can we design our processes to make sure that delight is a key part in what makes your MVPs \u2018viable\u2019?","breadcrumb":{"@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#primaryimage","url":"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png","contentUrl":"https:\/\/zeroheight.com\/blog\/content\/images\/2022\/09\/hierarchy-of-needs.png"},{"@type":"BreadcrumbList","@id":"https:\/\/uxmag.com\/articles\/building-delight-in-your-design-system#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/uxmag.com\/"},{"@type":"ListItem","position":2,"name":"Customer Experience","item":"https:\/\/uxmag.com\/topics\/customer-experience"},{"@type":"ListItem","position":3,"name":"Building Delight in Your Design System"}]},{"@type":"WebSite","@id":"https:\/\/uxmag.com\/#website","url":"https:\/\/uxmag.com\/","name":"UX Magazine","description":"UX Magazine is a central, one-stop resource for everything related to user experience. We provide a steady stream of current, informative, and credible information about UX and related fields to enhance the professional and creative lives of UX practitioners and those exploring the field. Our content is driven and created by an impressive roster of experienced professionals","publisher":{"@id":"https:\/\/uxmag.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uxmag.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/uxmag.com\/#organization","name":"UX Magazine","alternateName":"uxmag","url":"https:\/\/uxmag.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uxmag.com\/#\/schema\/logo\/image\/","url":"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png","contentUrl":"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png","width":2440,"height":428,"caption":"UX Magazine"},"image":{"@id":"https:\/\/uxmag.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxmag","https:\/\/x.com\/uxmag","https:\/\/www.linkedin.com\/company\/ux-magazine\/"]},{"@type":"Person","@id":"https:\/\/uxmag.com\/#\/schema\/person\/6dfd45a14c4271969cce75b4edd6ff48","name":"Luke Murphy","url":"https:\/\/uxmag.com\/contributors\/luke-murphy"}]}},"_links":{"self":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/posts\/17054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/users\/2573"}],"replies":[{"embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/comments?post=17054"}],"version-history":[{"count":0,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/posts\/17054\/revisions"}],"wp:attachment":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/media?parent=17054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/categories?post=17054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/tags?post=17054"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/topics?post=17054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}