{"id":35726,"date":"2024-10-29T04:40:15","date_gmt":"2024-10-29T11:40:15","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=35726"},"modified":"2026-05-08T22:20:01","modified_gmt":"2026-05-09T05:20:01","slug":"adopting-design-system","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/","title":{"rendered":"Design System Adoption \u2013 3-Step Strategy"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero-1024x512.png\" alt=\"Adopting Design System with Delivery Hero\" class=\"wp-image-35727\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p><em>&#8220;The success of a design system hinges on its adoption. Until you have users using your product, it&#8217;s not successful.&#8221; &#8211; <\/em>Amber Jabeen. A while back, UXPin hosted Amber Jabeen, DesignOps Director at Delivery Hero MENA (talabat), for a webinar titled: <a href=\"https:\/\/www.uxpin.com\/studio\/webinars\/enterprise-design-system-webinar\/\" target=\"_blank\" rel=\"noreferrer noopener\">Enterprise Design System \u2013 How to Build and Scale<\/a>. This article covers the second half of Amber&#8217;s talk, which focuses on Delivery Hero&#8217;s <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a> adoption strategy.<\/p>\n<p>Achieve greater design system adoption, consistency, and cohesion with UXPin Merge. Sync your design system&#8217;s component library to UXPin&#8217;s design editor to create a single source of truth across the organization. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access<\/a> and experience Merge technology today.<\/p>\n<section class=\"discover-merge\">\n<div class=\"discover-merge__container\">\n<div class=\"discover-merge__left\">\n<p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n<p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n<p>            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\"><br \/>\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button><br \/>\n            <\/a>\n        <\/div>\n<div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n<\/p><\/div>\n<\/section>\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}<\/p>\n<p>.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}<\/p>\n<p>.discover-merge__left {\n    width: 50%;\n}<\/p>\n<p>.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}<\/p>\n<p>.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}<\/p>\n<p>.discover-merge__button:hover {\n    cursor: pointer;\n}<\/p>\n<p>.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}<\/p>\n<p>@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}<\/p>\n<p>@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }<\/p>\n<p>    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}<\/p>\n<\/style>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">What is Design System Adoption?<\/h2>\n<p>Design System Adoption is the process by which a design system is accepted, implemented, and actively used by an organization&#8217;s design, product, and development teams. A design system is a comprehensive collection of reusable components, guidelines, and standards that ensures consistency and efficiency in product design and development.<\/p>\n<p>Adoption involves making sure that these components, patterns, and guidelines are integrated into daily workflows and are embraced by everyone involved in the product lifecycle.<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-delivery-hero-s-three-component-adoption-strategy\">Delivery Hero&#8217;s Design System Adoption<\/h2>\n<p>After trying many initiatives, Amber and her team developed a three-component design system adoption strategy for Delivery Hero:<\/p>\n<ul class=\"wp-block-list\">\n<li>Gamify<\/li>\n<li>Socialize<\/li>\n<li>Celebrate<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\" id=\"h-a-consistently-delightful-vision\">A <em>&#8220;Consistently Delightful&#8221;<\/em> Vision<\/h3>\n<p>Amber&#8217;s team recognized that they had to treat their design system like any other product to increase adoption. The first step was defining a vision\u2013a Northstar to guide their strategies.<\/p>\n<p>Using input from stakeholders and team members, the team came up with: <em>&#8220;Deliver a <\/em><strong><em>consistently delightful<\/em><\/strong><em> user experience across all platforms.&#8221;<\/em>&nbsp;<\/p>\n<p>The design system team emphasized <strong><em>consistently delightful<\/em><\/strong> to highlight the vision&#8217;s motto and principles.<\/p>\n<p><strong>Consistently (motto):<\/strong><\/p>\n<p><em>&#8220;Always&#8230;without exceptions. Don&#8217;t make me think.&#8221; <\/em>The idea is that design consistency creates a more intuitive user experience where users don&#8217;t need to learn the UI or its features.<\/p>\n<p><strong>Delightful (principles):<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li><strong>talabat cares:<\/strong> Product experiences must show we care about our users\u2013both design system users and the product&#8217;s end-users<\/li>\n<li><strong>Made for me:<\/strong> A personalized experience<\/li>\n<li><strong>Fast:<\/strong> As a delivery company, they want to deliver fast<\/li>\n<li><strong>Simple:<\/strong> Intuitive user interfaces<\/li>\n<li><strong>Fun:<\/strong> An enjoyable user experience<\/li>\n<\/ul>\n<p>With a clear vision, Delivery Hero&#8217;s design system team developed its three-component adoption strategy.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-component-one-gamify\">Step #1 Gamify DS Adoption<\/h2>\n<p>One of the team&#8217;s successful strategies was gamification. They realized to adopt the new design system; many team members would have to abandon their existing templates and start from scratch. So, Delivery Hero&#8217;s gamification strategy made switching to the design system fun and competitive.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-adoption-tiers\">Adoption Tiers<\/h3>\n<p>The design system team designed gamified adoption tiers aligned with the system&#8217;s vision. The aim was to get team members to start small and scale their usage. Once they completed a &#8220;level,&#8221; the DS team encouraged users to pursue the next target\u2013as you would in a video game.<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Bronze:<\/strong> Foundations (design tokens)<\/li>\n<li><strong>Silver:<\/strong> Consistent and cohesive (<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">components<\/a>)<\/li>\n<li><strong>Gold:<\/strong> Delightful experience (voice &amp; tone, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microinteractions-for-protypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">microinteractions<\/a>, haptics, transitions)<\/li>\n<li><strong>Platinum:<\/strong> Premium experience (motion, dark theme, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/voice-user-interface\/\" target=\"_blank\" rel=\"noreferrer noopener\">voice UI<\/a>)<\/li>\n<\/ul>\n<p>The team created a poster of the design system&#8217;s tiers and associated UI patterns and posted them around workspaces to remind people of the &#8220;game&#8221; and its &#8220;levels.&#8221;<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-design-system-dashboard\">Design System Dashboard<\/h3>\n<p>It was important for team members to visualize their progress to know what they had to do to progress. The DS team created a <em>Discovery Squad<\/em> dashboard to visualize the user&#8217;s adoption and progress towards the next tier.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-component-two-socialize\">Step #2: Socialize to Boost Adoption<\/h2>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/designops-increasing-collaboration-talk.png\" alt=\"designops increasing collaboration talk\" class=\"wp-image-35079\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/designops-increasing-collaboration-talk.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/designops-increasing-collaboration-talk-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>The second component of the design system&#8217;s strategy was <em>&#8220;socializing the design system with community-driven initiatives to keep people invested and interested.&#8221;<\/em><\/p>\n<p>You&#8217;ll notice a consistent theme of fun and inclusion with Delivery Hero&#8217;s socialize initiatives, which aligns with the design system&#8217;s vision.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-design-system-naming-competition\">Design system naming competition<\/h3>\n<p>Amber&#8217;s team invited everyone to take part in naming Delivery Hero&#8217;s design system. They sent out a company-wide mailer asking team members to submit names.<\/p>\n<p>They narrowed the options down to two and voted for the<em> &#8220;Marshmallow Design System.&#8221;<\/em> Delivery Hero employees feel a sense of ownership for Marshmallow because they were part of the naming process.<\/p>\n<p>The strategy was a success for the design system team because they immediately had team members invested and engaged.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-marshmallow-s-avatar-hashtag-and-emoji\">Marshmallow&#8217;s avatar, hashtag, and emoji<\/h3>\n<p>To solidify Marshmallow&#8217;s identity and raise further awareness, the DS team created an avatar, hashtag, and emoji, which they use across internal communications.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-open-design-system-showcase-event\">Open design system showcase event<\/h3>\n<p>The team hosted events to engage with users and asked questions to encourage live feedback and discussions:<\/p>\n<ul class=\"wp-block-list\">\n<li>How are we [design system team] doing?<\/li>\n<li>How do you find working with the design system?<\/li>\n<\/ul>\n<p>The aim was to gather new insights and ideas from users to improve the design system. When people feel they&#8217;re being heard and see their contributions added to the design system, they take ownership and become advocates, ultimately leading to further adoption.<\/p>\n<p><em>They even served marshmallows to team members to keep events lighthearted and fun.<\/em><\/p>\n<h3 class=\"wp-block-heading\" id=\"h-feedback-surveys\">Feedback surveys<\/h3>\n<p>The DS team used surveys to engage further and gather feedback about different parts of the design system.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-design-system-guild\">Design system guild<\/h3>\n<p>The Marshmallow Design System Guild included team members across Delivery Hero&#8217;s brands to discuss challenges and share ideas. The aim is to learn from each other and grow the Marshmallow community.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-newsletter\">Newsletter<\/h3>\n<p>A Marshmallow email newsletter helped the design system team share updates and information with users while keeping stakeholders informed and part of the conversation.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-component-three-celebrate\">Step #3: Celebrate the Adoption<\/h2>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/webinars\/enterprise-design-system-webinar\/\" target=\"_blank\" rel=\"noreferrer noopener\">In her talk<\/a>, Amber says celebrating process is the most important adoption strategy component. The Marshmallow team acknowledges and celebrates every small win as a symbol of progress towards 100% adoption.<\/p>\n<p><em>&#8220;We celebrated our small wins, which led us to really big wins.&#8221; &#8211; <\/em>Amber Jabeen.<\/p>\n<p>The team was <em>&#8220;very good at celebrating,&#8221;<\/em> as Amber puts it. When they reached an important milestone, like completing 70% of Marshmallow&#8217;s design language, they celebrated. They gave acknowledgments for various achievements across company channels. They used photos and videos to share celebratory moments across the organization.<\/p>\n<p>Amber notes in her presentation:<\/p>\n<ul class=\"wp-block-list\">\n<li>We celebrated adoption tiers for each of our squads in monthly newsletters, All Hands, Slack channels, etc.<\/li>\n<li>Celebrating adoption tiers motivated teams to keep making progress towards bigger goals and encouraged contribution.<\/li>\n<li>The next step is to start rewarding contributions to the design system. For example, making it part of the organization&#8217;s performance reviews would encourage adoption and contributions.<\/li>\n<\/ul>\n<p><em>&#8220;You can build a design system, but you can&#8217;t scale it without a healthy dose of organic contributions. A great way to do that is by rewarding people who contribute to the system.&#8221; &#8211; <\/em>Amber Jabeen.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-showing-impact\">Showing Impact<\/h2>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/designops-efficiency-person.png\" alt=\"designops efficiency person\" class=\"wp-image-35075\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/designops-efficiency-person.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/designops-efficiency-person-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>Marshmallow&#8217;s team measured growth and used graphs to present the results to team members and stakeholders. Some of the DS team&#8217;s key wins include:<\/p>\n<ul class=\"wp-block-list\">\n<li>Marshmallow reduced design debt by approx. 20% month over month. The DS team was able to measure this impact from their initial experiments. Read about getting buy-in for Delivery Hero&#8217;s design system here.<\/li>\n<li>By designing 80% of the product&#8217;s component library, the DS team left room for creativity and new components. Marshmallow&#8217;s component library reduced front-end effort by approx. 40% in new features.<\/li>\n<li>Component adoption = consistent and coherent experience. Developers reach out to the Marshmallow team when they notice a component not in the library, asking for advice, which drives conversations around <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">scaling the design system<\/a>.<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\" id=\"h-marshmallow-s-successful-strategies\">Marshmallow&#8217;s Successful Strategies<\/h3>\n<ul class=\"wp-block-list\">\n<li><strong>It takes a tribe to build and run a design system. Build cross-functional partnerships.<\/strong> Even with a dedicated design system team, you can only achieve success with help and advocacy from stakeholders, leaders, and team members.<\/li>\n<li><strong>A sustainable adoption strategy is community-driven.<\/strong> When you want to scale a design system, find ways to include the organization by designing strategies that rally everyone around its growth and success. Always be available. Reach out to team members. Deliver five-star service to your design system users.<\/li>\n<li><strong>Give recognition and celebrate small wins.<\/strong> As we outline in &#8220;Component Three,&#8221; celebrating small wins leads to bigger wins and wider adoption. People like to be recognized, so celebrate and encourage progress.<\/li>\n<li><strong>Quantify success and communicate 360.<\/strong> Base success on your value proposition and what you set out to achieve. Use metrics to showcase progress towards achieving your design system&#8217;s goals. Communicate this progress 360 degrees to everyone in the organization, including stakeholders, partners, sponsors, team members, etc.<\/li>\n<li><strong>Rinse and repeat!<\/strong> Amber says it&#8217;s crucial to find what works and repeat this strategy to scale adoption across the organization.<\/li>\n<\/ul>\n<p>Watch Amber Jabeen&#8217;s talk, <a href=\"https:\/\/www.uxpin.com\/studio\/webinars\/enterprise-design-system-webinar\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>&#8220;Enterprise Design System \u2013 How to Build and Scale,&#8221;<\/em><\/a> for the complete story about Delivery Hero&#8217;s journey to creating the Marshmallow Design System.<\/p>\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n<div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Enterprise Design System \u2013 How to Build and Scale Webinar\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/in4axiKk-uE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div>\n<\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-scaling-a-design-system-with-uxpin-merge\">Scaling a Design System With UXPin Merge<\/h2>\n<p>As we&#8217;ve learned from Delivery Hero&#8217;s story, scaling a design system and achieving organization-wide adoption is a challenge.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-comparison-1.png\" alt=\"uxpin merge comparison 1\" class=\"wp-image-33988\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-comparison-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-comparison-1-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>The DS team must encourage designers to use a UI kit and engineers to use a component library. No matter how good your design system is, designers and engineers still speak different languages. <a href=\"https:\/\/www.adalo.com\" target=\"_blank\" rel=\"noopener noreferrer\">Adalo<\/a>, a no-code app builder, demonstrates how visual design tools and developer-friendly systems can coexist in modern product development, though a truly unified approach is essential for design system success.<\/p>\n<p><strong>With <\/strong><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>UXPin Merge<\/strong><\/a><strong>, designers and engineers use the exact same component library.<\/strong> Merge syncs components from a repository to UXPin&#8217;s editor, giving design teams the same interactive code components to build prototypes as engineers use for the final product.&nbsp;<\/p>\n<p>The design system team can program each component&#8217;s props (or Args for our <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook integration<\/a>), including interactions, so designers only have to focus on building products. An easier workflow and less work mean greater enjoyment and wider adoption.<\/p>\n<p>Find out how to scale your design system while enhancing cross-functional collaboration with the world&#8217;s most advanced code-based design tool. <a href=\"https:\/\/uxpin.com\/merge\">Request access to Merge<\/a>.<\/p>\n<div class=\"wp-block-buttons\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;The success of a design system hinges on its adoption. Until you have users using your product, it&#8217;s not successful.&#8221; &#8211; Amber Jabeen. A while back, UXPin hosted Amber Jabeen, DesignOps Director at Delivery Hero MENA (talabat), for a webinar titled: Enterprise Design System \u2013 How to Build and Scale. This article covers the second<\/p>\n","protected":false},"author":3,"featured_media":35727,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,174],"tags":[],"class_list":["post-35726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-enterprise-ux"],"yoast_title":"","yoast_metadesc":"Get to know Delivery Hero's adoption strategy for their design system called Marshmallow. See the 3 components of successful strategy.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.7 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Design System Adoption \u2013 3-Step Strategy | UXPin<\/title>\n<meta name=\"description\" content=\"Get to know Delivery Hero&#039;s adoption strategy for their design system called Marshmallow. See the 3 components of successful strategy.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design System Adoption \u2013 3-Step Strategy\" \/>\n<meta property=\"og:description\" content=\"Get to know Delivery Hero&#039;s adoption strategy for their design system called Marshmallow. See the 3 components of successful strategy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-29T11:40:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-09T05:20:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Design System Adoption \u2013 3-Step Strategy\",\"datePublished\":\"2024-10-29T11:40:15+00:00\",\"dateModified\":\"2026-05-09T05:20:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/\"},\"wordCount\":1675,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Adopting-Design-System-with-Delivery-Hero.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Enterprise UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/\",\"name\":\"Design System Adoption \u2013 3-Step Strategy | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Adopting-Design-System-with-Delivery-Hero.png\",\"datePublished\":\"2024-10-29T11:40:15+00:00\",\"dateModified\":\"2026-05-09T05:20:01+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Get to know Delivery Hero's adoption strategy for their design system called Marshmallow. See the 3 components of successful strategy.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Adopting-Design-System-with-Delivery-Hero.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Adopting-Design-System-with-Delivery-Hero.png\",\"width\":1200,\"height\":600,\"caption\":\"Adopting Design System with Delivery Hero\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/adopting-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design System Adoption \u2013 3-Step Strategy\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design System Adoption \u2013 3-Step Strategy | UXPin","description":"Get to know Delivery Hero's adoption strategy for their design system called Marshmallow. See the 3 components of successful strategy.","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:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/","og_locale":"en_US","og_type":"article","og_title":"Design System Adoption \u2013 3-Step Strategy","og_description":"Get to know Delivery Hero's adoption strategy for their design system called Marshmallow. See the 3 components of successful strategy.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/","og_site_name":"Studio by UXPin","article_published_time":"2024-10-29T11:40:15+00:00","article_modified_time":"2026-05-09T05:20:01+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Design System Adoption \u2013 3-Step Strategy","datePublished":"2024-10-29T11:40:15+00:00","dateModified":"2026-05-09T05:20:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/"},"wordCount":1675,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero.png","articleSection":["Blog","Design Systems","Enterprise UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/","name":"Design System Adoption \u2013 3-Step Strategy | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero.png","datePublished":"2024-10-29T11:40:15+00:00","dateModified":"2026-05-09T05:20:01+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Get to know Delivery Hero's adoption strategy for their design system called Marshmallow. See the 3 components of successful strategy.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Adopting-Design-System-with-Delivery-Hero.png","width":1200,"height":600,"caption":"Adopting Design System with Delivery Hero"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Design System Adoption \u2013 3-Step Strategy"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=35726"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35726\/revisions"}],"predecessor-version":[{"id":59629,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35726\/revisions\/59629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/35727"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=35726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=35726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=35726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}