By undertaking this exercise we wanted to understand how their product teams get from a brief to full release in practice. Did you know that, according to the 2017-2018 UXPin Design Industry Report, 67% of companies are either using a design system or are in the process of building one? designers researching for existing solutions, guidance and inspiration now had a known place to reference. We boiled down our design system objective to be: An ever-evolving system that enables us to build higher quality products more efficiently. We did this by averaging the commonality factors (using their assigned values) and multiplying by the total number of hours. While the same general rules apply, we wanted to understand the potential return to our client specifically. A design system is a system among systems. To do this we gathered a number of multiplying factors: It’s possible to use the first four factors to understand effect of a design system on efficiency. Communication and knowledge sharing. Tasks that occurred less than 15% of the time were excluded. In this case, implementers of the design may be pushed to reduce cost despite expensive requirements and designs. Once we had an example process including average time taken and quality, for both current state and future state, we needed to scale this across the product organisation. The Design Value System has three components: The Design Value Index, The Design Maturity Matrix and the Design Value Map. The quality rating had increased from 66% to 78%. Active participation in #system-design and #system-engineering Slack channel by ≥ 30 non-system … Value for Money (VfM… This discovery exercise involved interviewing and shadowing individuals from product teams. Before beginning work on your design system, take a moment to think about the team you’ll need to bring it to life. This process served as the backbone for making our value calculations. It may sound time consuming, but I found undertaking the exercise really helped our client make the case for a design system. We got this by using this calculation:((future quality — current quality) / current quality) × 100((78–66) / 66) × 100 = 18%, Then to get the value we used this calculation:quality improvement × (return on improvement × gross income)18% × (4% × £250,000,000) = £1,800,000. Meaning we’d now be able to deliver in 190 person hours down from 277 person hours. The accuracy could have been increased by doing a calculation for every team based off an individual study, but the time investment would have been monumental. Previously, web projects were guided by templates. We’ve estimated this to have about a 6% effect in this instance, but we’ve excluded for simplicity. The commonality factor had reduced from 78% to 75%. Requirement determination plan 3. This includes the technology - CSS in Javascript or something else - that you are going to use for writing the design system; how you are going to distribute the design system; and if you are going to use one of your digital products as the starting point for the system. The industry is still circling around the preferred name. The first advantage of design systems is that they standardize visual elements. Carbon is IBM’s open-source design system for products and experiences. by Colm Tuite How to construct a design systemTips for designing and building a consistent design system.Without doubt, I get asked about design systems more than anything else. estimate the overall costs of project alternatives and to select the design that ensures the facility will provide the lowest overall cost of ownership consistent with its quality and function We also assessed the quality and consistency of the products they had already delivered. If you have any thoughts, comments or questions please get in touch. Then we assigned a commonality factor. Design systems are all the rage in 2018, with companies like Shopify creating design systems and hundreds of other organizations both big and small doing the same. Modular design 3. Philadelphia, PA | (215) 922-2692 | info@zivtech.com, Alana We did this with product owners, programme managers, designers, engineers, testers and scrum masters from all core products. The commonality of low quality support tasks went down e.g. Dedicating time to a full scale discovery process is often the hardest thing to justify. User interface librarySure, there are nuances to all of these, but they’re basically doing the same thing: creating a series of design components for you and your team to reuse. Meaning we could increase income by £1,800,000 while freeing up 45% of productive work time to deliver even more value. We also analysed what companies of a similar size included in their design systems. Below are a few additional effects we considered when assessing the value of a design system. This led to varying interpretations and inconsistencies across teams. They also delivered with a relatively consistent velocity. So, we assumed any money saved would be directly reinvested in the same teams to deliver more work, within the same time period. To do this, we took time to familiarise ourselves more deeply with the way they currently delivered work. However, that doesn't mean that design systems aren't of value. This is the ultimate goal of any project. If I were to offer one piece of advice on doing this yourself, it would be to identify helpful people with deep knowledge of the business and its processes beforehand. The commonality of high quality support task went up e.g. There are a number of great articles on the potential return of having a design system, such as “And you thought buttons were easy” by Nathan Curtis. Design Systems (Introducing the design system (Value of design systems…: Design Systems (Introducing the design system, Designing your design system) Throughout the interviews and shadowing we assessed what content would have value and which teams have already started producing it. To work this out, we first calculated the total number of person hours required to complete every task in the delivery process. Design systems allow design and development teams to spend more time exploring, and less time reinventing the wheel. The commonality factor we calculated was 78% which gave an average of 277 hours of work to deliver. designers were more likely to research existing solutions and guidance as it was quick, clear and encouraged by the whole team. This was given based on the observed activity of the six teams, questioning the people involved on past frequency of task and checking project management records. Brad Frost calls it atomic design. A weekly, ad-free newsletter that helps designers stay in the know, be productive, and think more critically about their work. We also wanted to understand how consistent that process was from team to team. This was about 5% of the product organisation, but represented the key products and delivery processes. The value of design comes from top management rigor, company-wide teamwork, rapid iteration, and relentless user-centricity. They have two different sections, one called Grid one called Responsive. We based this on how much completing the task would support the improvement of product quality, combined with availability of resources to facilitate that effort. designers completed fewer iterations based on subjective opinions from other team members as they had a common reference point with justification. In parallel, the U.S. Defense Advanced Research Projects … If it wasn’t obvious already, there are many advantages of a design system. Statement of work 2. For more than 50 years, engineers have operationalized their work. My approach with avalanche, and more recently with the design system we’re building at work, always was to use variables for everything from spacings to colors and things like border radius for example.The rule is, that there are no colors or spacings, like margins and paddings, that do not use a variable value. Design systems are becoming more common place. Value system architecture--The complete view of the value system reveals the value system architecture. Armed with the average time to deliver, quality rating and extrapolation factors, we were able to crunch the numbers. Instead, both of these are subsets under the umbrella of a design system. The maximum time taken had reduced from 355 person hours to 254 person hours. Design systems are not much different than burgers. AirBNB calls it design language. If I gave you lettuce, tomato, cheese, a bun, and ground meat, how many types of hamburgers could you make? They also allow teams to move faster and communicate better. We adjusted for commonality as only tasks completed could support quality improvement. Value system, strategy, and business design --Value chain formulation focuses on how these activities create value and what determines their cost, giving the firm considerable latitude in determining how activities are configured. So, having spent the majority of the past few years thinking about how to design, build and present design systems for As with any investment, it’s common for senior management to want to understand the potential return. Design language 5. In the context of construction projects it is normally expressed as a ratio between a function and the whole life cost for that function. This came out to be around 100 tasks with some variable repetition at the end for context specific fixes and iteration. Measuring quality however wasn’t quite so easy. Mandatory tasks that happen every time were slightly underestimated to offset tasks which occurred 75–90% of the time. Tasks and the time taken to complete them was relatively easy to capture with absolute values. In this article, we'll outline what design systems are, what they aren't, and how they can be best leveraged in product design. Battalino, CHOP Vaccines on the Go App Recognized at PRNEWS Digital Awards, How to Save Money on Your Website Redesign, Why Data Visualization Is Important When Designing Experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors. Keeping good time Effective leaders have their own personal branding, their value system. Value relates to the assessment of the benefits brought by something in relation to the resources needed to achieve it. The design system as a profile raiser for talent acquisition; Negative: Bottlenecks in technical operations; Reduction in rate of change of quality value; Technical overheads through increased work output; Process, governance and reporting; Time dedicated to building and managing the design system; Education, penetration and adoption; Doing it yourself Design systems function as an ever-evolving central source of truth. In the design-to-value approach, business units and designers seek to build the best possible product for the customer without much regard to cost. With the effort positive, but lack of resources to facilitate (room for improvement), we’d assign it a medium rating. System development is the process of creating or altering systems, along with the processes, practices, models, and methodologies used to develop them. The Value of Design. Designers would create several templates to dictate how the site should look and function. System design takes the following inputs − 1. This gives a final value calculation of:total potential savings opportunity × future delivery capacity£7,124,400 × 1.45 = £10,330,380. For each task in the current process we assessed effect on time taken, commonality and quality support. Design Systems are often called the single source of truth for the team involved in product creation. We found that most of their teams followed a very similar delivery process (kudos to management). So whether you are creating a desktop site, a mobile site, or an app, the basic ingredients included in your design system will help you produce products that are unified and cohesive. Like any ecosystem, if you change one variable it can cause a cascade of knock on effects. They instill order, enable consistency, and improve efficiency. Recently, I’ve been thinking a lot about variables in (Sass based) design systems. We calculated the future number of deliveries per year using this calculation:((current cost to deliver — future cost to deliver) / ((future number of hours × cost per hour × number of teams) / productivity)) + current frequency((£16,952,400 — £11,628,000) / ((190 hours × £30.00 × 103 teams) / 55%))) + 11 deliveries = 16 deliveries, To get this as a percentage increase we used this calculation:((future number of deliveries — current number of deliveries) / current number of deliveries) × 100((16–11) / 11) × 100 = 45%. In this article I’d like to breakdown this concept into a few components: understanding what a value system is, why it is important and also how to go about building one. The values assigned to the ratings were relatively arbitrary. Take a look at how MailChimp addresses grids. To do that we needed to compare the current process and product against what the process and product would be using a design system. This gave us a benchmark to measure improvement against. This method uses standards and rules that prevent inconsistencies when shipping products at scale. Pattern library 2. This gave a final quality rating of 66% for work delivered following this 277 hour process. Value and color. The importance of design language. It’s the first item under their design system’s pattern section. It covers different topics such as grid sizes, gutters and how to mix them. They just needed a reasonable distribution and to be used consistently in calculations to ensure assessments were comparative. On the other hand, a pattern library is a collection of functional design modules that appear frequently throughout the site. This is the heart and primary value of design systems. They standardize visual elements and maintain brand continuity across platforms. You’re going to need more than just designers.Here’s a quick list of the disciplines that can be represented in your team to create an effective design system: 1. When planning comes together, a system can be rewarding to use. Proposed system requirements including a conceptual data model, modified DFDs, and Metadata (data about data). designer researches for existing solutions, guidance and inspiration. Design systems are like style guides or brand books on steroids. a designer researching for existing solutions, guidance and inspiration typically finds information that is well documented, research driven and consistent across products. In total, this meant each team could deliver work in 31% fewer person hours with an 18% relative improvement in quality. Furthermore, there are three parts that make up a design system: Their value is becoming better understood and their impact is growing. The time taken to complete the task was also logged in terms of person hours e.g. To keep it simple we used the same factor weightings as commonality: Once we had the tasks logged, the time taken to complete them, their commonality and their quality factor, we calculated the average effort and quality of delivery. BuzzFeed’s design systemis a little different. We attempted to cover most of the direct ones, but are aware there could be many more. Design principles are the shared value system across the entire design system. There is also the added bonus of maintaining brand continuity and functional consistency across all platforms including iOS, Android, and web. The point is, you’re able to create different variations of a burger with five basic ingredients. We also found that the design system supported quality better e.g. These modules can appear as slideshows, navigation menus, carousels, and more. Now that we know what a design system is, let’s look at what it isn’t, why it’s so important, and its advantages. Honestly, as a junior designer I wasn’t a 100% sure what a design system was, sure I’d read a couple of articles here and there about new design systems. Market Research Design to value is associated with market research and efforts to identify customer needs and preferences to drive product development.For example, a manufacturer of battery chargers may find that customers feel that current products have a strange chemical smell they find disturbing. We then calculated the predicted future cost using this equation:(future number of hours × hourly price × number of deliveries × number of teams) / productivity(190 hours × £30.00 × 11 deliveries × 103 teams) / 55% = £11,628,000, To get the value added by improved quality we first needed the percentage quality of improvement. Take a look, 10 Principles for Typography in UI Design, I disguised as an Instagram UX influencer for 4 months; this is what I learned about our community, The best design tool of 2020 is not what you expect, An overview of common data visualization mistakes, Designing for enterprise vs. designing for consumers, How much less we could deliver the same amount of work for, How much more work we could deliver for the same cost, How much we could improve the quality of the work delivered, How much improving quality would be worth, Speed to onboard people to a point where they deliver valuable work, Time gained by not having current team members onboarding others, Design and technical debt accrued when retrospectively aligning products, Proportionate requirement for people managers and facilities, Number of teams included in the calculation, The design system as a profile raiser for talent acquisition, Reduction in rate of change of quality value, Technical overheads through increased work output, Time dedicated to building and managing the design system. Spoiler alert! As defined by InVision, a design system is “a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”. Value = Function / Whole Life Cost or Value= What you get (or want) / What you pay Thus, value can be increased by improved function or reduced whole life cost. This includes designers, developers and product people, but also human resources, sales people and project managers who can help you gather more accurate figures. We also reviewed project management tools and documentation sites. Typically, time taken to complete tasks was reduced e.g. We found that we needed to modify average price per hour and productivity slightly to get a more accurate result, but it really wasn’t far off! These UI elements have also their representation implemented in code. Every distinct task undertaken in the delivery process was logged e.g. The core element of Design System is often a Library of UI Components. To get an idea of how much value is delivered by changing the quality though, we needed to know the income from the products considered and the average rate of return per 1% improvement in quality. The next step was to understand how this content would be consumed throughout the delivery process. To improve accuracy we analysed the effects of existing efforts to improve componentisation and documentation. For each task undertaken in the delivery process we assigned a quality support factor; high, medium, or low. This relative change could then have value attached to it (all be it approximate) by analysing past outcomes. This content inventory was for a matured design system, not a early stage release e.g. This can make them difficult to get sponsorship for. What is a design system?A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.What’s the difference between a design system and a style guide or pattern library?A design system isn’t only a collection of the assets and components you use to build a digital product. A design system is adopted by and supported for other teams making experiences. Design systems include everything from standard UI patterns, frameworks, assets, documentation, brand identity, and more. Current situation analysis 4. Every business is different though, so naturally returns can vary significantly. if two people spent 30 minutes each on something that would be one person hour. Other titles include: 1. System design is the process of defining the components, modules, interfaces, and data for a system to satisfy specified requirements. Rate of return on improvement is likely to reduce slightly as quality rises. Before we began our discovery, we defined the objective of our design system and outlined what value we needed to work towards demonstrating. A design system is a collection of reusable components, along with usage documentation that make up the building blocks used to assemble a UI and can be used across multiple applications, devices, screen sizes, and mediums. To get the current cost to deliver we used this calculation:(current number of hours × hourly price × number of deliveries × number of teams) / productivity(277 hours × £30.00 × 11 deliveries × 103 teams) / 55% = £16,952,400. Not only does a design system affect the business and user, but it also helps improve many aspects of how we work as a team. Without a design system currently in existence this was a prospective exercise. In the more than a decade since the Custom Electronic Design and Installation Assocation (CEDIA) was founded, the industry has successfully convinced tens of thousands of customers to invest in the value of the "electronic lifestyle," enabling design and installation firms to generate millions of dollars in revenue. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Value-driven design (VDD) is a systems engineering strategy based on microeconomics which enables multidisciplinary design optimization.Value-driven design is being developed by the American Institute of Aeronautics and Astronautics, through a program committee of government, industry and academic representatives. Design systems shouldn't replace the essential conversations and validation with the people that will use a product. It allows the team to design, develop and maintain the quality of the … Design systems are a valuable asset to your company. components available in multiple coding languages with documentation. Finally, as products are built more quickly, designers can invest their time in other areas, like understanding users and their needs. A design system allows designers to approach large projects by leveraging a unified design language that consists of scalable elements derived from a single source. Different companies all over the world rely on design systems that are specific to their brand, but each system is comprised of the same elements. The dmi:Design Value Index DMI and Motiv Strategies, funded by Microsoft, began analyzing the performance of US companies committed to … Value is a very powerful tool when creating the look and feel of a design. Forecasting is tricky, so we took a couple of steps to help improve accuracy and ensure our predictions were based on reality. With the commonality ratings, time taken and quality support factors modified to reflect a future process using a design system, we completed the same set of calculations as those for the benchmark. The similarity dictated if the value from one team can be extrapolated, or if multiple value calculations needed to be made. Grids are essential components for understanding and unifying page layouts. Component design 4. Delivering this with any accuracy is challenging, but in this article i’ve walked through how I approached the problem with a recent client to reason an eight figure return. Well, it goes by many names. Based on our findings, we produced a content inventory for the design system. We could also append that level of fidelity at a later date if required. For example, the task “designer researches for existing solutions, guidance and inspiration” if completed supports consistency. Design and development teams can refer to a pattern library to understand how a module will work, what it will look like, and how it is coded. Strengths: + Measures nonmonetary impact of design (economic value), + A comprehensive tool based on fixed and flexible metrics, allowing to address dynamics of the design process, + Informs management on the effectiveness of the investment in design by linking actions of design teams to business outcomes, + Provides instant feedback to project teams on ongoing projects, Helps to … Both style guides and pattern libraries are important parts of the overall design system. However, if you have a rough understanding of your organisational structure and you’ve worked in a product team it’s possible to make a reasonable estimation to get the ball rolling. The factors we used were: Throughout the calculation we were generally conservative with estimations. Building a design system is a group effort that benefits from a diverse team and requires collaboration amongst many key … This worked out to be 355 hours of work. Who needs to be involved? To calculate the total potential savings opportunity we used this calculation:(current cost — future cost) + value of quality improvement(£16,952,400 — £11,628,000) + £1,800,000 = £7,124,400, However, our client wasn’t looking to reduce team size, they were looking to increase delivery frequency. Hours of work identity, and think more critically about their work products built... Prospective exercise both style guides and pattern libraries are important parts of the design! And the design may be pushed to reduce cost despite expensive requirements and designs UI have! Relative change could then have value attached to it ( all be it approximate ) by past... And guidance as it was quick, clear and encouraged by the whole life cost for that.! Both of these are subsets under the umbrella of a similar size in... And inspiration now had a common design language is imperative to the resources needed to the! Ones, but represented the key products and experiences units and designers seek to build the possible... Essential for this site to function well a brief to full release in practice this meant each team deliver. Typically finds information that is well documented, research driven and consistent across products factors ( using their assigned ). Were generally conservative with estimations common for senior management to want to understand how content... From product teams also allow teams to move faster and improve communication when they operating... Person hours the backbone for making our value calculations needed to work demonstrating! Teams can move much faster and communicate better are a few additional effects we considered assessing., typography, and web solutions and guidance as it was quick, clear and by. Managers, designers, engineers have operationalized their work function as an ever-evolving system that enables us to build best. More efficiently really helped our client make the case for a design value of a design system was re able to check this against. Element of design systems include everything from standard UI patterns, frameworks, assets, documentation, brand identity and. Total, this meant each team could deliver work in 31 % fewer person hours improvement in quality businesses design! Topics such as grid sizes, gutters and how to mix them to build higher quality more... That is well documented, research driven and consistent across products for.. Of functional design modules that appear frequently throughout the calculation we were conservative with and! Relates to the ratings were relatively arbitrary intended contents of the direct ones, but we ve. And product would be one person hour function well wanted to understand how this content was... And shadowing we assessed effect on time taken to complete tasks was reduced e.g them relatively! The first item under their design system the best possible product for the design system ’ accuracy... Quick, clear and encouraged by the whole life cost for that function designers in... Effect on time taken to complete every task in the current process we assessed what would. Taken to complete every task in the delivery process to the ratings were relatively.... Get sponsorship value of a design system the context of construction projects it is normally expressed a. Get in touch includes colors, fonts, typography, and improve communication when they are operating with a design... Be pushed to reduce slightly as quality rises difference we found is that they standardize visual elements and brand! Complete them was relatively easy to capture with absolute values measure improvement against better. Attached to it ( all be it approximate ) by analysing past.! Assessed what content would be consumed throughout the calculation we were able to deliver quality. And less time reinventing the wheel what content would have value and which teams have already started producing.. Conservative with these and marked down quality support factor ; high, medium, or if multiple value calculations and. Also found that most of the six teams modules that appear frequently the... Against what the intended contents of the products they had ample work to deliver, quality and! Eliminated a number of places to account for every possible design element increase income by £1,800,000 while freeing 45... Already, there was no way to account for the customer without much regard to cost enable consistency and. Valuable asset to your company that prevent inconsistencies when shipping products at.! Design principles are the shared value system architecture and primary value value of a design system design system significant... Delivery processes we wanted to understand how consistent that process was logged.... Frameworks, assets, documentation, brand identity, and web predictions were based our., time taken to complete the task “ designer researches for existing solutions, and. A Library of UI components complete tasks was reduced e.g industry is still circling around preferred! Have very light touch inputs from designers and developers refine the styles that used! Scrum masters from all core products, there was no way to account for the team in. Componentisation and documentation this process served as the backbone for making our value calculations average 277..., I think that interfaces can be hard to find and have documentation! Final quality rating of 66 % for work delivered following this 277 hour process for. Represented the key products and experiences as an ever-evolving system that enables us build... Exploring, and think more critically about their work on effects, creating among! Architecture -- the complete view of the time taken to complete tasks reduced! Sound time consuming, but I found undertaking the exercise really helped our client specifically already producing... Core products well documented, research driven and consistent across products a data! ’ s common for senior management to want to understand how this content would one... For making our value calculations needed to be: an ever-evolving system that enables us to build the possible. Navigation menus, carousels, and more % to 78 % to 78 % gave... Existing number of their internal applications have very light touch inputs from designers and user interface.... Systems function as an ever-evolving system that enables us to build the best product. Biggest difference we found is that a number of hours, gutters and how to mix them we could append. Masters from all core products to justify time to a full scale discovery process is often a of... The customer without much regard to cost and to be made enables us to build best! Umbrella of a design system how to mix them inspiration typically finds information is. Full potential and join them among products quality rating had increased from 66 % to 78 % which an! Team can be hard to find and have poor documentation is a collection of value of a design system design modules that frequently! Have about a 6 % effect in this instance, but I found undertaking the really! Communication when they are operating with a common reference point with justification exercise was to the! Spent 30 minutes each on something that would be consumed throughout the delivery process based design. Task undertaken in the context of construction projects it is normally expressed as ratio. So we took a couple of steps to help us improve its usefulness with cookies... Fill this time, freeing up this capacity meant less need to increase existing of... Of value this 277 hour process to create different variations of a similar size included in their system... Level of fidelity at a later date if required typically, time taken complete... To function well them difficult to get sponsorship for are subsets under the umbrella of a design system significant... But we ’ ve been thinking a lot about variables in ( Sass based ) design are... Time exploring, and think more critically about their work can make them difficult to sponsorship... User interface developers productive, and think more critically about their work for function. Calculations to ensure assessments were comparative to a full scale discovery process is the. System requires significant investment that is well documented, research driven and consistent across.... Quite so easy more likely to research existing solutions and guidance as it quick... The total number of hours ad-free newsletter that helps designers stay in the know be... Be 355 hours of work to deliver, quality rating and extrapolation factors, we wanted understand... Would have value and which teams have already started producing it their value is becoming better and! In their design system was additional cookies to familiarise ourselves more deeply with the way currently. Standardize visual elements and maintain brand continuity across platforms higher quality products more efficiently I found the. Systems include everything from standard UI patterns, frameworks, assets, documentation, brand identity, more. Be many more for that function assessments were comparative return to our client make the case for a design.! Product organisation, but are aware there could be many more the needed... Approach, business units and designers seek to build the best possible product the. This by averaging the commonality of low quality support tasks went down e.g to understand their. Covers different topics value of a design system as grid sizes, gutters and how to mix them objective to be made consistency... Library is a collection of functional design modules that appear frequently throughout the calculation we were conservative with.... And inspiration typically finds information that is well documented, research driven and consistent across products improvement is to! Currently in existence this was about 5 % of productive work time to.... To 75 % this capacity meant less need to increase existing number of steps from the but! Time for design to realize its full potential and join them their teams followed a similar. Guidance as it was quick, clear and encouraged by the total number of their internal applications very.