{"id":44644,"date":"2023-05-10T00:21:37","date_gmt":"2023-05-10T07:21:37","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=44644"},"modified":"2023-05-11T04:19:36","modified_gmt":"2023-05-11T11:19:36","slug":"fintech-design-system","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/","title":{"rendered":"FinTech Design System \u2013 How to Start it?"},"content":{"rendered":"\n<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\/2023\/05\/fintech-design-system-min-1024x512.png\" alt=\"fintech design system min\" class=\"wp-image-44645\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>FinTech design systems help product teams solve fundamental usability issues while moving fast to stay ahead of the competition. But, building a FinTech design system requires significant resources to create, scale, and mature.<\/p>\n\n\n\n<p>Create a single source of truth for your FinTech app with the world&#8217;s most advanced design and prototyping tool. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page for more details<\/a> and how to request access to this revolutionary technology.<\/p>\n\n\n\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            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\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    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.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}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.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}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-a-design-system-must-guarantee-consistency\">A Design System Must Guarantee Consistency<\/h2>\n\n\n\n<p>Consistency is one of the primary reasons organizations <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">build a design system<\/a>. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design consistency<\/a> <em>&#8220;ties UI elements together with distinguishable and predictable actions,&#8221;<\/em> which increases trust, adoption, and usage\u2013<em>vital for successful <\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>financial products<\/em><\/a><em> and banking apps!<\/em><\/p>\n\n\n\n<p>Consistency doesn&#8217;t only benefit the user experience. It also creates more efficient workflows while reducing front-end and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/3-step-guide-erasing-ux-debt\/\">UX debt<\/a>.<\/p>\n\n\n\n<p>Creating a single source of truth means product teams, user experience designers, and engineers all work with the same components, increasing cross-functional collaboration, streamlining <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">design handoffs<\/a>, and reducing time-to-market.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-more-than-a-style-guide\">More Than a Style Guide<\/h2>\n\n\n\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\/2021\/12\/design-system-1.png\" alt=\"design system 1\" class=\"wp-image-32621\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>A FinTech design system must be more than a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">style guide<\/a>. A <strong>true<\/strong> single source of truth is a design system where designers and engineers use the same component library\u2013<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">what Iress refers to as &#8220;fully integrated&#8221;<\/a> or stage four of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system maturity<\/a>.<\/p>\n\n\n\n<p>While style guides solve many foundational design challenges and inconsistencies, they lack <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-prototype-setting-user-interactions-without-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactivity<\/a>, and functionality. Design teams can create beautiful user interfaces, but image-based prototypes don&#8217;t provide accurate testing or meaningful feedback.<\/p>\n\n\n\n<p>In the highly competitive FinTech landscape, designers must deliver high-quality customer experiences with UIs that enable users to complete tasks effortlessly. The only way to achieve quality outcomes is through high-fidelity prototypes and testing\u2013beyond the limitations of an image-based style guide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-from-style-guide-to-component-driven-prototyping\">From style guide to component-driven prototyping<\/h3>\n\n\n\n<p>This <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">component-driven prototyping<\/a> workflow allows FinTech UX design teams to build prototypes that look and feel like the final product\u2013<em>something that&#8217;s usually only possible with the help of <\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-engineer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>UX engineers<\/em><\/a><em> or front-end developers.<\/em><\/p>\n\n\n\n<p>Merge syncs a design system from a repository to UXPin&#8217;s design editor, so designers use an interactive component library instead of a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">style guide or UI kit<\/a> to build prototypes.<\/p>\n\n\n\n<p>Merge prototypes look and feel like the final product, enabling FinTech product design teams to go beyond the limitations of traditional design tools and style guides. These immersive, dynamic prototype experiences solve usability issues and pain points while identifying opportunities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-don-t-overcomplicate-your-system\">Don&#8217;t Overcomplicate Your System<\/h2>\n\n\n\n<p>Organizations must view their design system as any other product. It must be user-friendly and solve user problems\u2013in this case, product development member problems.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/codifying-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Codifying a design system<\/a> into a searchable hub with guidelines, principles, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a>, tutorials, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" target=\"_blank\" rel=\"noreferrer noopener\">governance procedures<\/a> makes it easy to use while providing design teams with clear guidance about using components and building products.<\/p>\n\n\n\n<p>One of our favorite design systems is <a href=\"https:\/\/stackoverflow.design\/product\/guidelines\/using-stacks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">StackOverflow&#8217;s Stacks Design System<\/a>. Stacks uses four categories for its guidelines:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/stackoverflow.design\/product\/guidelines\/using-stacks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Product<\/strong><\/a><strong>:<\/strong> software development and individual component guidelines<\/li>\n\n\n\n<li><a href=\"https:\/\/stackoverflow.design\/email\/guidelines\/getting-started\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Email<\/strong><\/a><strong>:<\/strong> email-specific instructions with templates<\/li>\n\n\n\n<li><a href=\"https:\/\/stackoverflow.design\/content\/guidelines\/principles\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Content<\/strong><\/a><strong>:<\/strong> principles, voice, tone, grammar, etc., for written content across StackOverflow touchpoints<\/li>\n\n\n\n<li><a href=\"https:\/\/stackoverflow.design\/brand\/principles\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Brand<\/strong><\/a><strong>:<\/strong> how to represent StackOverflow through design, including logo usage, typography, color, data visualization, etc.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/stack-overflow-design-system-min-1024x524.jpg\" alt=\"stack overflow design system min\" class=\"wp-image-44653\" width=\"750\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/stack-overflow-design-system-min-1024x524.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/stack-overflow-design-system-min-586x300.jpg 586w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/stack-overflow-design-system-min-768x393.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/stack-overflow-design-system-min-1536x786.jpg 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/stack-overflow-design-system-min.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>When a design system is easy to use, it creates many benefits for the organization and its customers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Simplifies workflows for faster time to market<\/li>\n\n\n\n<li>Streamlines onboarding<\/li>\n\n\n\n<li>Increases output consistency and reduces errors<\/li>\n\n\n\n<li>Gives designers more time to focus on users<\/li>\n\n\n\n<li>Improves cross-functional collaboration and handoffs<\/li>\n\n\n\n<li>Ensures design projects meet deadlines (within budget)<\/li>\n\n\n\n<li>Facilitates scalability<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prioritize-accessibility\">Prioritize Accessibility<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/accessibility-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">Accessibility<\/a> is crucial for any digital product, especially <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">FinTech design<\/a>, where users make critical financial decisions. Designers must consider how design decisions impact users from many backgrounds, including those with disabilities.<\/p>\n\n\n\n<p>One of the challenges with accessibility is it requires attention to detail, adding time to design projects. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design system accessibility<\/a> allows organizations to solve foundational issues at the component level, reducing the time and effort to make products accessible for <strong><em>all users<\/em><\/strong>.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.lightningdesignsystem.com\/accessibility\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Salesforce&#8217;s Lightning Design System<\/a> includes detailed accessibility guidelines for content, interaction design, and patterns to ensure every product meets <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">W3C standards<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/salesforce-design-system-min-1024x523.jpg\" alt=\"salesforce design system min\" class=\"wp-image-44655\" width=\"750\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/salesforce-design-system-min-1024x523.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/salesforce-design-system-min-588x300.jpg 588w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/salesforce-design-system-min-768x392.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/salesforce-design-system-min-1536x784.jpg 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/salesforce-design-system-min.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong><em>Further reading:<\/em><\/strong><em> Our <\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>web accessibility checklist<\/em><\/a><em> and <\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>design system accessibility<\/em><\/a><em> resources provide an overview of where to start.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-build-a-system-that-serves-the-entire-organization\">Build a System that Serves the Entire Organization<\/h2>\n\n\n\n<p>Your FinTech design system must serve the entire organization. Not only will this help with collaboration, but it&#8217;ll help with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/business-case-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system buy-in<\/a> from stakeholders.<\/p>\n\n\n\n<p>Delivery Hero&#8217;s product team built a solid <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/business-case-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system business case<\/a> by demonstrating its value for engineering teams and solving <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/\" target=\"_blank\" rel=\"noreferrer noopener\">front-end debt<\/a>. The team proved that Marshmallow wasn&#8217;t just a system to make the design team&#8217;s lives easier; it had business value and would generate a positive ROI for the organization.<\/p>\n\n\n\n<p>A good design system encourages feedback from every department to ensure it generates maximum value while encouraging <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system adoption<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-leverage-an-existing-design-system\">Leverage an Existing Design System<\/h2>\n\n\n\n<p>Building a design system is expensive and time-consuming. Many FinTech startups (and large organizations) lack the resources to <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a design system from scratch<\/a>.<\/p>\n\n\n\n<p>Adopting an existing themeable, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">open-source design system<\/a> is a fantastic way to overcome the expense of building from scratch while delivering an on-brand, high-quality user experience.<\/p>\n\n\n\n<p>Open-source design systems aren&#8217;t just for startups.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-a-design-system-must-serve-a-purpose\">A Design System Must Serve a Purpose<\/h2>\n\n\n\n<p>Think of a design system like any other digital product or feature\u2013<em>does it serve users&#8217; needs?<\/em> Are your motivations for building a design system based on solving core product development issues?<\/p>\n\n\n\n<p>You won&#8217;t get stakeholder buy-in or adoption if you don&#8217;t identify these needs and demonstrate the design system&#8217;s value.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How will your design system solve workflow bottlenecks and roadblocks?<\/li>\n\n\n\n<li>Do you suffer from design drift and inconsistencies? How will your design system solve these?<\/li>\n\n\n\n<li>What is your current time to market? Can you conduct experiments to demonstrate that a design system will reduce this and what are the cost benefits?<\/li>\n<\/ul>\n\n\n\n<p>Metrics and KPIs matter when pitching a design system to stakeholders.<\/p>\n\n\n\n<p>Amber Jabeen of Delivery Hero <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/business-case-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">failed to secure buy-in for the Marshmallow design system several times<\/a> before getting approval. Amber&#8217;s six key takeaways from this process include the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Start with a real pain point: <\/strong>what problem will you solve? More importantly, what is it costing the company? Stakeholders take notice when they see <em>actual, provable numbers<\/em>.<\/li>\n\n\n\n<li><strong>Build a value proposition:<\/strong> how will your design system solve this problem? Be realistic!<\/li>\n\n\n\n<li><strong>Identify your biggest supporters and sponsor:<\/strong> finding leaders and stakeholders who believe in your solution will give your argument merit and weight.<\/li>\n\n\n\n<li><strong>Show before you tell:<\/strong> prove your solution&#8217;s effectiveness with results from a case study or experiment.<\/li>\n\n\n\n<li><strong>Talk business metrics:<\/strong> show what this problem costs the company and how a design system will fix this.<\/li>\n\n\n\n<li><strong>Don&#8217;t go alone \u2013 build your network:<\/strong> get input and support from multiple team members and departments impacted by the problem(s) you&#8217;re trying to solve and confirmation that they support your idea.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-track-and-report-your-design-system-s-success\">Track and Report Your Design System&#8217;s Success<\/h2>\n\n\n\n<p>A design system is not a &#8220;one-and-done&#8221; solution. You will have to continually prove its positive benefits and ROI to secure the resources necessary to maintain and scale the design system.<\/p>\n\n\n\n<p>Stakeholders want to see that their investment creates a positive change and, more importantly, that team members use it!<\/p>\n\n\n\n<p>In <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/launching-design-system-checklist\/#h-6-using-kpis-to-measure-value\" target=\"_blank\" rel=\"noreferrer noopener\"><em>What to Do After Launching a Design System<\/em><\/a>, we highlight three critical KPIs for getting continuous buy-in and support:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Team efficiencies:<\/strong> how long does it take to deliver design projects with vs. without a design system? How does this figure improve with increasing adoption?<\/li>\n\n\n\n<li><strong>Speed to market:<\/strong> does the design system improve delivery from concept to final release?<\/li>\n\n\n\n<li><strong>Effect on code:<\/strong> how does the design system improve design handoffs and reduce designer\/engineer friction? Does the design system reduce technical debt?<\/li>\n<\/ul>\n\n\n\n<p>The design system team must also collect data and feedback on other areas of the business, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Increase sales\/conversions<\/li>\n\n\n\n<li>Reduced tech support calls<\/li>\n\n\n\n<li>Brand satisfaction<\/li>\n\n\n\n<li>Reduced rework or errors<\/li>\n\n\n\n<li>Employee retention<\/li>\n\n\n\n<li>Labor cost savings<\/li>\n<\/ul>\n\n\n\n<p>Identifying areas where your design system creates positive benefits and efficiencies are vital for its long-term success.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-system-adoption\">Design System Adoption<\/h2>\n\n\n\n<p>Adoption is another vital metric for a design system&#8217;s success. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Delivery Hero&#8217;s DS team used a gamification strategy<\/a> to increase organization-wide adoption. The three-step process included:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Gamify:<\/strong> awards for various adoption levels and usage<\/li>\n\n\n\n<li><strong>Socialize:<\/strong> included team members in naming the design system, designed an internal emoji, hosted events, surveyed users regularly, and kept everyone updated with a regular newsletter<\/li>\n\n\n\n<li><strong>Celebrate:<\/strong> Delivery Hero&#8217;s DS team made a point of celebrating adoption milestones and Marshmallow&#8217;s most prominent users<\/li>\n<\/ul>\n\n\n\n<p>Delivery Hero&#8217;s adoption strategy won&#8217;t work in every organization, but it demonstrates that increasing a design system&#8217;s usage takes time and effort.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-scaling-fintech-design-with-uxpin-merge\">Scaling FinTech Design With UXPin Merge<\/h2>\n\n\n\n<p>Design systems can create real impact in terms of process improvements. But the change won&#8217;t be sustainable unless you have the right tools that make it easy to share coded design system components, bring them to design, and hand over prototypes that behave like real products. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page to learn more<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>FinTech design systems help product teams solve fundamental usability issues while moving fast to stay ahead of the competition. But, building a FinTech design system requires significant resources to create, scale, and mature. Create a single source of truth for your FinTech app with the world&#8217;s most advanced design and prototyping tool. Visit our Merge<\/p>\n","protected":false},"author":3,"featured_media":44645,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199],"tags":[],"class_list":["post-44644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems"],"yoast_title":"","yoast_metadesc":"Find out how to start a design system for your fintech company and drive real process improvements. Follow our tips and increase productivity.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>FinTech Design System \u2013 How to Start it? | UXPin<\/title>\n<meta name=\"description\" content=\"Find out how to start a design system for your fintech company and drive real process improvements. Follow our tips and increase productivity.\" \/>\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\/fintech-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"FinTech Design System \u2013 How to Start it?\" \/>\n<meta property=\"og:description\" content=\"Find out how to start a design system for your fintech company and drive real process improvements. Follow our tips and increase productivity.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-10T07:21:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-11T11:19:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min.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=\"8 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\\\/fintech-design-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"FinTech Design System \u2013 How to Start it?\",\"datePublished\":\"2023-05-10T07:21:37+00:00\",\"dateModified\":\"2023-05-11T11:19:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/\"},\"wordCount\":1515,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/fintech-design-system-min.png\",\"articleSection\":[\"Blog\",\"Design Systems\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/\",\"name\":\"FinTech Design System \u2013 How to Start it? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/fintech-design-system-min.png\",\"datePublished\":\"2023-05-10T07:21:37+00:00\",\"dateModified\":\"2023-05-11T11:19:36+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Find out how to start a design system for your fintech company and drive real process improvements. Follow our tips and increase productivity.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/fintech-design-system-min.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/fintech-design-system-min.png\",\"width\":1200,\"height\":600,\"caption\":\"fintech design system min\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fintech-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FinTech Design System \u2013 How to Start it?\"}]},{\"@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":"FinTech Design System \u2013 How to Start it? | UXPin","description":"Find out how to start a design system for your fintech company and drive real process improvements. Follow our tips and increase productivity.","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\/fintech-design-system\/","og_locale":"en_US","og_type":"article","og_title":"FinTech Design System \u2013 How to Start it?","og_description":"Find out how to start a design system for your fintech company and drive real process improvements. Follow our tips and increase productivity.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/","og_site_name":"Studio by UXPin","article_published_time":"2023-05-10T07:21:37+00:00","article_modified_time":"2023-05-11T11:19:36+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"FinTech Design System \u2013 How to Start it?","datePublished":"2023-05-10T07:21:37+00:00","dateModified":"2023-05-11T11:19:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/"},"wordCount":1515,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min.png","articleSection":["Blog","Design Systems"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/","name":"FinTech Design System \u2013 How to Start it? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min.png","datePublished":"2023-05-10T07:21:37+00:00","dateModified":"2023-05-11T11:19:36+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Find out how to start a design system for your fintech company and drive real process improvements. Follow our tips and increase productivity.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/fintech-design-system-min.png","width":1200,"height":600,"caption":"fintech design system min"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/fintech-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"FinTech Design System \u2013 How to Start it?"}]},{"@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\/44644","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=44644"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/44644\/revisions"}],"predecessor-version":[{"id":44660,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/44644\/revisions\/44660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/44645"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=44644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=44644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=44644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}