{"id":16661,"date":"2018-12-17T11:02:28","date_gmt":"2018-12-17T11:02:28","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=16661"},"modified":"2020-11-30T10:25:34","modified_gmt":"2020-11-30T10:25:34","slug":"how-design-systems-can-help-build-and-prototype-better-digital-products","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/how-design-systems-can-help-build-and-prototype-better-digital-products\/","title":{"rendered":"How Design Systems Can Help Build and Prototype Better Digital\u00a0Products"},"content":{"rendered":"

Design systems, design systems everywhere.<\/h2>\n

I\u2019m pretty sure that you have heard that term a thousand times last week, and more than you will, design system is one of the trends in product design particularly, that big companies such as Airbnb, Uber, Lyft, and others are adapting and putting into practice when building their products and seems that has come to stay.<\/p>\n

There isn\u2019t a real definition of what design systems are<\/a>, other than the fact that the name is quite self-descriptive enough to give a clue of what they are. Some people will define them as a set of elements that combined between them, can make easier build products, but it\u2019s more than just that, and the levels of complexity that it includes can be frightening.<\/p>\n

What are design\u00a0systems?<\/h2>\n

As I said before, there\u2019s no specific definition of what they are, especially if we apply the term to digital products, there\u2019s no real definition of what\u2019s a digital product, moreover depending on the approach you want to make of it, but in order to set a basic definition with what we can work:<\/p>\n

<\/div>
<\/svg><\/div>

\"A design system is a set of reusable elements, definitions and patterns that combined between can be used to build a product.\"<\/p><\/span><\/blockquote>\n

Let\u2019s be clear, design systems are more than UI components that put together can generate more complex designs, design components aren\u2019t templates either. Design systems are the DNA of organized digital products. This includes also the identity of the brand or product that is being built for, the information architecture, the tone and approach, and finally the criteria of usage of each of the components that form the design system.<\/p>\n

You can make a design system as complicated as you want, you set the level of fragmentation of the components, how in detail on each component you want to design and build from, that will set the rules for when using them on building or improving your designs.<\/p>\n

Why you should start using\u00a0them?<\/h2>\n

Design systems are an extension of templates, personalized tailored and detailed templates that take into account every aspect of a product and set the bases of the scaffolding of any piece of content that can be built with them, below there are some of the perks of setting up a design system when building a project.<\/p>\n

Almost effortless prototyping<\/h2>\n

A design system doesn\u2019t need to be a definition of the final components or modules on the final product per se, it could also be made from elements from a set of wireframes that need to be tested with users before coming up with the final solution. But when working with high fidelity prototypes, having a design system could mean that you could propose different solutions for the same problem and test it against users.<\/p>\n

\"Coming up with high fidelity defined prototypes would be as easy as creating a new page, calling the right components of your design system and connecting them with the different endpoints of your user journey.\"<\/span><\/p>\n

Initially, it will take some time to define each component and each variable and attributes that will form part of the design system, but once each element is in place, coming up with pages, screens or features will be a matter of arranging the specific components in a certain way and push it live.<\/p>\n

Improve iteration process<\/h2>\n

Good products are living and evolving things, they keep improving its features, adding new ones, removing some outdated or disused ones, always changing for good or bad, having the user as the main variable of the equation.<\/p>\n

Refactoring and improving components from a design system is easier as the components are self-contained and have already enough information and functionality by themselves that don\u2019t require additional elements to work on them.<\/span><\/p>\n

With a design system in places, it\u2019s easier to identify and work on those components that affect those features, working more effectively in improving the user experience of the product and also helping on the bug tracking and reducing the number of conflicts between the different parts of the product.<\/p>\n

Make design updates\u00a0easier<\/h2>\n

When working on collaborative projects where multiple people are in charge of different aspects of the project, and specially in the design, it\u2019s easier to update and validate design changes when they affect a specific component of the library that when updated is automatically updated across the whole product where it\u2019s being used, together with using a cooperative prototyping tool such as Figma or a version control software such as Abstract for Sketch files, it can make the live easier of multiple designers working on designing different aspects of a project at the same time.<\/p>\n

Handover projects between designers and developers<\/h2>\n

One of the steps in the process of building a product that creates more hassle is the process when designs become a reality, either it\u2019s by exporting designs from the prototyping tool or by building it from scratch by using the design specs from a shared prototype.<\/p>\n

With a design system in place is easier to assign the creation of each page and element from a product by breaking down each component and developing them individually and then, when the library is ready, call each component to each location on the final place of the product.<\/p>\n

It also helps on the QA testing of each component as by being isolated elements you can get access to the appearance of an element and provide feedback and update the code until it\u2019s valid and corresponds to the designs.<\/p>\n

Identify and replicate patterns<\/h2>\n

When coming up with user experience solutions, sometimes some problems are solved with recurrent solutions and these solutions most of the time involve similar interactions to be performed by the user, by using a design system, they can be easily identified and strip down the design so that the components used in one of these journeys can be easily replicated in different scenarios and therefore solve different problems in a more time effective way.<\/p>\n

Without going too deep into what too deep into what UI and UX patterns are, it\u2019s the next level into the interaction between components, therefore if we set up a design system defined not only by its more smaller components but also between screens, modules and interactions between them and stored and organized, when users require to make use of the same pattern in another section of a website, app or platform its easily reproducible by changing the IA and the endpoints of it.<\/p>\n

Documenting design and\u00a0code<\/h2>\n

Documenting a project is one of the most painful steps for any designer and developer working in a project since there needs to be a consistency in the process and the elements documented. Having a design system in place, both in the design stage and when it\u2019s being developed helps establish the bases of the documentation, since there\u2019s already a library of components available with its variations and different states.<\/p>\n

The fact that design systems are build based in a clear and easy structure they are accessible for developers new to a project, enabling developers to work on dependencies based in their task without having to know the whole application.<\/p>\n

In the same way, documenting products by defining the different elements of the design system makes it easier for designers to get a more clear overview of the style guides of the particular application and helping them get an idea of the approach, tone, and intention towards the end user.<\/p>\n

Make products more\u00a0unique<\/h2>\n

Let\u2019s be realistic, most of the products build nowadays start from a pre-defined framework that sets the bases, in some cases of the UI and styling of the elements, and therefore trying to create our own product means working on top of this set of rules and style guides that will eventually become the look and feel of your product. By creating a design system you will have the freedom to manipulate any component to adapt it to the requirements of your design, and ensuring that by mixing them together the final solution will have its own character, tone and approach that you as a designer wanted to give to the whole conjunction of elements.<\/p>\n

\"\"<\/a>

Design systems help you keep your projects tidy and organized.<\/p><\/div>\n

When should you use a design\u00a0system?<\/h2>\n

Usually, design systems are extensively used for online platform, applications or full websites, but even the smallest user experience could benefit from a design system, the facts stated above could make that even creating the simplest landing page could become an easier work for both designers and developers and add extra value such as facilitate the use of A\/B testing, prototyping<\/a>, iterating designs based in user behaviour or requirements and evolution from the brand or product perspective.<\/p>\n

There is no set rule on how much of a design system needs to be developed for every project, the briefing itself will define how complicated needs to be, but it\u2019s going to be always up to use to advice on to which level of complexity we want to build the design system, always keeping in mind that the final goal of it it\u2019s facilitate our task of building the final solution.<\/p>\n

How should you set up\u00a0one?<\/h2>\n

You will find tones of examples and guidelines online on how to start creating your design systems, but the truth is that based on my experience, each project is different and the way you can approach creating a design system for it is different as well.<\/p>\n

My only suggestion here is start from big to small, identify those modules that contain more small component, and break them down by functionality or element group, then break those ones into smaller pieces and then start building up the different states for them.<\/p>\n

I guess this would be the closest approach to Atomic Design<\/a>, something that can be applied to design systems, written by Brad Frost can give you some insights on how to better plan the creation of your design system.<\/p>\n

Conclusions<\/h2>\n

Even if design systems are not a mandatory feature of a project to make it successful, it should always be considered and think about all the advantages and extra value that adds to a digital product, and as trendy as it\u2019s becoming, every slightly digital product project should include it.<\/p>\n

There are plenty of different resources and pre-defined templates to work on that will help you define your design system, but that will only set the bases of a more complex organism that will become the scaffolding of your project, there\u2019s no reason to be afraid of making it complicated, as we will always be in charge of defining its complexity.<\/p>\n

More information<\/h2>\n