{"id":17304,"date":"2024-05-28T18:18:14","date_gmt":"2024-05-28T15:18:14","guid":{"rendered":"https:\/\/railsware.com\/blog\/?p=17304"},"modified":"2024-09-10T12:48:20","modified_gmt":"2024-09-10T09:48:20","slug":"establish-design-system-architecture-on-a-product","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/establish-design-system-architecture-on-a-product\/","title":{"rendered":"Establishing Design System Architecture on a Product\u00a0"},"content":{"rendered":"\n
Some believe that such a crucial part of a product as its design, solely depends on a product designer. However, creating a successful solution requires multiple specialists working together as a single unit. At the same time, collaborative work imposes a range of issues, such as a necessity to grant access to various specialists, a need to structure your work and all the materials and keep an eye on others\u2019 actions never to lose a thing.<\/div>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n

This is exactly the problem I faced 4 years ago when I joined the Coupler.io team. At first, working in a single file wasn\u2019t a problem. However, with the product growth, complications emerged. I saw the need to create a clear design system architecture that would allow the whole team to easily create and manage all the related design elements in Figma. And this is how I did it. <\/p>\n\n\n\n

The peculiarity of our work<\/h2>\n\n\n\n

Unlike many other teams, Railsware is built on collaboration and pair\/group work. We believe that this is the only way for all team members to know the context of a product, be able to share knowledge, and make decisions that would only benefit the product. <\/p>\n\n\n\n

In my case, I often collaborate with product owners, product managers, developers, QA engineers, marketers, and content writers \u2013 all to ensure the end users get a user-friendly, intuitive solution. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The product I work on has an ecosystem that consists of an application, various databases, dashboards, and other files that it can generate, a G-suite add-on, a marketing website, and other marketing materials. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The main problem<\/h2>\n\n\n\n

When several people are working on one matter without a clear design system architecture, things get complicated. And then, a day comes when you can\u2019t find an asset you need, see a lot of duplicates, or can\u2019t explain to a newcomer how and where to get a design asset.\u00a0<\/p>\n\n\n\n

Here\u2019s how our Figma looked before. As you can see, it was a pile of random files with vague names or without them at all, and a lot of trash files no one knew anything about. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

How we solved the problem by establishing a design system architecture <\/h2>\n\n\n\n

The brainstorm<\/h3>\n\n\n\n

Before you tackle any problem, you need to make sure you see the holistic picture of it. In my team, we use different instruments to collect, sort, and prioritize information. The one we use the most is BRISGeS – a decision-making framework<\/a> created by the Railsware team. BRIDGeS allows you to visually structure data and come up with the most optimal solution. <\/p>\n\n\n\n

I invited my team and initiated a BRIDGeS session. At first, we defined the Subjects – people who would benefit from solving the problem. In our case, these were specialists engaged in the design process – Product manager, Product designer, Marketer, Engineer, Vendor.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Bear in mind that at the time of that session, BRIDGeS was raw, and we didn\u2019t even have our fantastic BRIDGeS FigJam<\/a> yet to make the brainstorming process not only fruitful but also eye-pleasing. But let’s get back to the point.<\/p>\n\n\n\n

After that, we listed all the B (benefits the Subject can get from the future solution), R (risks that the Subjects may experience in the future), I (issues that the Subjects have right now), and D (domain knowledge, we need to keep in mind while resolving the main problem). <\/p>\n\n\n\n

Issues identification<\/h3>\n\n\n\n

Among the biggest identified Issues were:<\/p>\n\n\n\n

    \n
  • Figma loading time<\/strong>. As there was one file for everything, over time, it became so large that the loading time could take from several minutes to several days. <\/li>\n\n\n\n
  • Unclear flow\/screen statuses. <\/strong>When many people are working on different aspects of a product, it\u2019s hard to track all activities and even harder to understand if the screen is ready for development, or if it has been approved. <\/li>\n\n\n\n
  • Inability to find a necessary element quickly<\/strong>. In a single file, new entities appear every hour, making it hard to track changes even with a version control system. Imagine a marketer needing an icon for a new email campaign. If they cannot find it quickly, they will ask you to create it (again!).<\/li>\n\n\n\n
  • Every file contained a pile of rubbish<\/strong>. The design of an asset, like a landing page, requires brainstorming and several iterations. Each such session resulted in elements that were reworked, or rejected. If a responsible person isn\u2019t a participant in such an activity, they will find a pile of strange elements they have no idea what to do with. Comments in Figma are also worth mentioning. When non-resolved they cause more questions than answers. <\/li>\n\n\n\n
  • Difficult to onboard new team members<\/strong>. If you don\u2019t know the structure of your file system, how are you going to explain it to a newcomer?<\/li>\n\n\n\n
  • Inconvenience to test a certain flow<\/strong>. When you have everything piled up in one place, the only reasonable way to test a certain flow is to duplicate it somewhere else. This is exactly how you worsen the problem and create even more strange files with duplicated content. <\/li>\n\n\n\n
  • Problems with access for 3rd party vendors<\/strong>. There\u2019s a need to give your vendors different levels of access to different materials, which is impossible if you have one file for everything. <\/li>\n<\/ul>\n\n\n\n

    Coming up with the solution <\/h3>\n\n\n\n

    Once we had the holistic picture decomposed on the board, we started thinking about the solutions. Since there were numerous issues, we needed a list of actions to solve them all. Here are the steps we defined that helped us create a clear design system architecture for the Mailtrap.io team:<\/p>\n\n\n\n

    1. Upgraded Figma plan to make it more flexible for the team.<\/p>\n\n\n\n

    2. Made a list of the main activities on the product and created a separate folder for each of them.<\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n

    3. Reviewed and provided access to specific folders to each specialist\/vendor depending on the real necessity.<\/p>\n\n\n\n

    4. Created icon libraries, press kits, and presentation templates that marketers and other specialists could easily reuse.<\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n

    5. Made a specific UI-kit for data analysts who work with software like Looker, PowerBI etc.<\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n

    6. Created pages in files dedicated to each step of the workflow to:<\/p>\n\n\n\n

      \n
    1. separate ideas from approved materials <\/li>\n\n\n\n
    2. add clarity about the status of the materials.<\/li>\n<\/ol>\n\n\n
      \n
      \"\"<\/figure><\/div>\n\n\n

      7. Created spaces (playgrounds) for different projects to give teams the ability to brainstorm and experiment freely.<\/p>\n\n\n\n

      8. Established rules on naming in storybook and ui-lib (like “button_login.png” for a button and “logo_company.png” for a company logo).<\/p>\n\n\n\n

      9. Established color-coding principles to mark different parts and processes of the product.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      10. Scheduled regular syncs with designers and other team members to maintain and improve the design system architecture.<\/p>\n\n\n\n

      11. Ran workshops for data analytics, marketers, and other specialists when necessary.<\/p>\n\n\n\n

      Wrapping up<\/h2>\n\n\n\n

      If you are alone dealing with a product design and a single Figma file works for you, then that is fine. However, be ready as over time, this approach will cause more and more complications, and you\u2019ll need to reconsider the approach at some point. <\/p>\n\n\n\n

      This is why I highly recommend you create rules and conventions for naming, color-coding, and folder covers from day 1. Don\u2019t hesitate to create new folders when the product grows, and upgrade your Figma plan when your team expands. <\/p>\n","protected":false},"excerpt":{"rendered":"

      Read how we established a scalable design system architecture on a Coupler.io product.<\/p>\n","protected":false},"author":85,"featured_media":17295,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[51],"tags":[],"coauthors":["Daria Roshchyna"],"class_list":["post-17304","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"acf":[],"aioseo_notices":[],"categories_data":[{"name":"Design","link":"https:\/\/railsware.com\/blog?category=design"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2024\/05\/design_system_architecture_image.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/17304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=17304"}],"version-history":[{"count":10,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/17304\/revisions"}],"predecessor-version":[{"id":17550,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/17304\/revisions\/17550"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/17295"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=17304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=17304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=17304"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=17304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}