A single source of truth guiding design decisions, for superior user experience and greater efficiency
As Keller Williams is moving fast, it is becoming crucial for the company to maintain consistency across multiple products. The company aimed to have an even more efficient production process, without losing its speed to market. This is why the team started building an entirely new Design System from scratch.
A design system is essentially a collection of guidelines, principles, and repeatable components that form a company’s definitive approach to designing and building digital products. When multiple teams work on different parts of a product, or entirely different products, inconsistencies in the look and behaviour of these products become inevitable over time. The adoption of a design system aims to solve this by allowing teams to create better digital products that provide users with a consistent visual and interactive experience across the whole suite.
As well as enhancing the end-user experience, the building blocks and standards in a good design system also substantially improve the lives of design and development teams, delivering a range of efficiency and productivity benefits.
Let me introduce you to some basic terms around design systems:
Pattern library, style guide, code snippet - this Holy Trinity of product design makes up a design system.
The main difference between a style guide and design system is the scalability and dynamism of the latter.
While style guides are static and closed, design systems are dynamic and expandable. As opposed to handing off a style guide at certain point in time, in design systems the collaboration between designers and developers is ongoing. It bring us down to the simple conclusion: design systems support agile methodology, whereas style guides seem to make for a better match with the waterfall approach. In consequence, it allows companies to save a lot of time and money.
It is important to know that a design system is far more than just a style guide or a pattern library created at a single point in time. It is a living, breathing ecosystem that evolves with a company, building a bridge between the design and development teams, as well as the end-users. To be a complete system, it must include both a design elements library and documentation.
Design systems are usually built from scratch and are created differently, bespoke to the needs of the organization. There are, however, common pieces that are present in all successful design systems:
UI/pattern library. The largest and one of the most important elements, is a pattern library. This is made up of page templates, UI components, and reference files such as Sketch files.
Code. These are the corresponding code snippets that create an implementation of the components in the pattern library. Teams are then able to pull this code into their products from a central repository. Coding standards plus guidance on versioning, and supported browsers and devices, should also be included.
Guidelines and principles. These are the foundations and design principles, such as accessibility targets, how animations should be handled, and rules on scaling and grids.
Branding. This is similar to a traditional style guide and covers elements of brand identity such as logo usage, fonts, the use of color, visual language, and marketing materials. Publishing guidelines may also be included to cover the brand voice, along with grammar and formatting preferences.
One of the most important things you should look for when selecting an agency is their experience and expertise in building design systems. A good agency will be able to show you examples of previous projects and their outcomes.
Cost is an obvious factor, but bear in mind that cheapest may not be best. Consider aspects such as quality of work, standards of communication, and how well they understand your business.
Finally, consider your relationship with the agency. You will be working closely with them so you need to know that you’re on the same page. Choose an agency that you feel comfortable with.
Asking what a role a design system plays is important, but the value of a design system is truly seen when you ask why.
According to the enterprise UX industry report, one of the greatest challenges is lack of design consistency which leads to expensive design debt.
From the same report, we also learn that collaboration becomes more difficult as developers outnumber designers. It probably sounds familiar to you if your company has not developed a proper solution yet. A well-crafted design system serves as single source of truth and provides the following types of business value:
1. Consistency across products
Want your brand logos to be echoed through into the default user avatars of your app? Your design system will take care of that. It will outline the process that a designer should take when designing something, and the standards to which he or she must work. The end result is your user having a smooth and consistent experience through all parts of your product
2. Clear guidelines
Regardless of the role in the company, a documentation enables comprehension for everyone. If you have ever wondered how to get product managers, designers and engineers on the same page, now you know the secret.
3. Design systems create a good working environment
Using a design system means that if your wonderful designer’s creative mind to goes off into some magic world and forgets the relevant font size, he or she will know how to find it. Your designers won’t be lost. They have an up-to-date play book to refer to if something isn’t clear. This in turn increases productivity and the happiness of your designer’s creative mind.
4. More efficient production process
Similar to our first point here. Whether your design team is you, one other person, or a team of 45, ensuring that they’re all on the same page is going to make the process much smoother. It not only helps prevent errors, but shows what to do in the event of an error - be it minor or colossal.
Long story short: Make your design system proactive to avoid a problem, rather than reactive, in order to fix one.
Now let’s focus on 3 primary roles that are present while shipping a digital product.
We have product managers, designers and developers. Each of them have different requirements and expectations. Let’s take a closer look from three different perspectives.
Finished product is a contribution of entire team
For a product manager, the most important thing is to deliver a working product with all the features that the customers want. They hate moving slowly, so the less time is spent on design and development, the better and healthier for the business.
From a designer standpoint, the wish list starts from having consistent designs by keeping track of the changes when more than one designer works on the same project. Being able to make some adjustments quickly isn’t less important, though. On the other hand, they hate seeing their designs disrupted by neglectful development. Even small things matter, because the difference between an excellent and a very good product lies in the details. As the product team gets bigger, the contributions generate inconsistencies. Centralized design version control might be a remedy.
Finally, the developers expect to get thoroughly documented designs, ideally with no further changes. They don’t want to guess what the designer’s intention was. They hate moving pixels back and forth. They want to work with mockups smoothly. However, often times it’s more like a struggle than a pleasant process.
Does it sound familiar to you? There’s no silver bullet for every problem a product team faces, though. However, based on our experiences, knowledge and our customers’ successes, having a design system is worth the initial investment. A design system is supposed to address those pains and reduce the friction in the process.
Think about your product and company for a while with the following questions in mind:
It takes only 5 steps to get started:
Do an audit - check all the designs that you’ve made so far and try to extract basic repetitive elements.
Organize the elements that you’ve extracted - build all three repositories I’ve mentioned earlier and create subcategories in every repository to make everything searchable and easy to use.
Put all of the elements in one place, easy to access for everybody engaged in the product design process - every designer, coder, and marketing specialist involved in the process needs to have equal access to all parts of the design system simply to work effectively.
Sell the design system to everybody in the organization - internal communication is vital to making good use of the system. If nobody knows about it and how to use it they simply won’t.
Always update your repositories - evaluate your stash every once in a while and make sure that if any new elements appear they are included in your repositories
As a design and software partner for Keller Williams, we know for a fact that they are moving incredibly fast in their transformation efforts. Our collaboration started in a modest way in late 2017: we designed a feature in one of KW’s projects.
Fast forward to 2019, and we’ve successfully onboarded a 50+ team to support Keller Williams with its transformation and new initiatives.
Netguru has been the best agency we've worked with so far. The team is able to design new skills, features, and interactions within our model, with a great focus on speed to market.
I’ve had a long-lasting partnership with Netguru. Happy that it works so well and hopeful that we can cooperate on more projects in the future. Netguru always tries to make things possible.
I know from my experience that Netguru is used to working in remote settings, where your clients trust that you will try to build things the way they like to have it, even when you're not present in their offices. I’m happy to say that so far it has worked tremendously well for solarisBank.
15+
400+
2500+
73
$47M Granted in funding
$20M Granted in funding
$28M Granted in funding
$5M Granted in funding
By now, you should have a good idea of what a design system is and how it can be of benefit to your business:
Design system maintenance is a crucial aspect of ensuring the longevity and effectiveness of your design system. At Netguru, we follow a comprehensive approach to design system maintenance that seamlessly integrates with your brand strategy and visual elements.
Our maintenance process begins with regular audits to assess the alignment of your design system with your evolving brand strategy. We conduct thorough reviews to ensure that visual elements remain consistent and cohesive across all platforms and touchpoints. This involves evaluating color schemes, typography, iconography, and other key design components to guarantee a unified and on-brand experience.
Updates to the design system are implemented with precision, taking into account any changes in your brand strategy or visual identity. Our goal is to enhance the design system's adaptability and scalability, allowing it to evolve alongside your brand.
Additionally, we offer ongoing support to address any emerging design challenges or opportunities. Our team is committed to staying at the forefront of design trends, ensuring that your design system remains contemporary and impactful.
By entrusting your design system maintenance to Netguru, you can be confident that your brand's visual elements will consistently reflect your unique identity and effectively engage your audience across various channels.