Design systems for tech startups

As an innovative user interface (UI) / user experience (UX) design agency based in London, we’re all about bringing rigour and intentionality to all of our work to ensure the applications, experiences, websites, and innovative content we develop are high-performing.   This approach always starts with a deep understanding of the intended outcomes and the ideal scenarios for how users engage with an application, experience a brand, and consume content.  One of the most important elements in our approach is establishing a design system – bringing together engineering and design functions in a structured way.  We’re sharing the what, how, and why of creating design systems for tech startups. 

What are design systems?

While the core concepts of a design system are sophisticated, the design system itself can be described in very simple terms – a roadmap for how a product will come together across all of the teams and component deliverables that form the end product.  An effective design system is comprehensive, covering everything from visual identity to a library of code objects to a governance model and everything in between.  Unlike traditional brand guidelines, a design system is not a series of well-intended instructions and rules that end up in a binder – it’s an active framework for how a product is built and the contributing teams work together.  Specifically, an effective design system will include:

• Visual design of the product as well as the architecture for how information is integrated, processed and stored.  

• Library of symbols, styles, and components that are used to ideate, prototype, and design experiences that will ultimately be part of the end product

• Javascript code components that can be reused across a single product and in other, related products

• A testing “sandbox” where individual components can be tested on a standalone basis

• Instructions for how the design system should come together

• Orchestration model for how all of the functions contributing to the end product should work together, make decisions, track and align their work

Why tech startups need a design systems

While a design system may appear to be unnecessary “overhead” for a small, agile tech startup, our experience is the opposite – a design system helps new product development move faster because there is a framework for how collaboration should happen.  The design system replaces one-off handoffs from one function to another, which often require rework because the output of one function wasn’t fully anticipated by the receiving function.  Without a design system, it’s easy for well-intended work to result in a UI that is full of inconsistencies.  For example, two UI/UX designers may each create pages or screens of a product that have similar elements such as buttons and menus.  In an effort to keep a fast pace, it’s commonplace for both designers to have slight variations in the button and menu styles.  When those designers hand off their work to a developer, suddenly the product is coming together with a series of inconsistencies that can ultimately degrade the user experience.  

Steps for creating a design system for a tech startup

We recommend the following steps to create and deploy a design system for your organisation:

• Establish a baseline of current practices and tools.  This step will identify elements and processes that need to be created and those that can be repurposed in an efficient way

• Extend the current brand guidelines to cover aspects of product design

• Map the UI elements that will be developed to ensure there can be consistency in the design and deployment of each element

• Agree on performance objectives, user workflows, and design principles

• Create a library of UI components such as buttons, images, and forms to ensure consistency 

• Agree on a governance model and cadence for how progress is tracked and decisions are made, including who is the final decision maker and how feedback is considered

• Build a communications model and begin collaborating as work gets underway

We are confident you’ll find that working through these steps will actually accelerate the work of the team.  

Conducting user research prior to creating design systems for tech startups

Few steps are more important to bringing successful new products to market than user research. We know that many tech startups are concerned about the time and effort that may be required to conduct user research, especially when they feel significant pressure from investors to get their products to the market quickly.  We’ve covered user research in more detail in our article on 5 common mistakes in UI/UX design for tech startups and how to avoid them. Still, here are some fast, inexpensive, and effective ways to conduct user research:

• There is a growing number of user research firms who will quickly find relevant users, based on your ICP, to test UI/UX and other product design attributes for a low cost per user and a very fast time to research insights

• Tech startup investors are very well connected and can help recruit relevant users from their networks to participate directly in research

• It’s increasingly easy to crowd-source feedback through online channels and communities

• Increased competition from these research methods is also lowering the cost of traditional market research agencies, who can also move faster than you may expect with bespoke primary research

Defining the principles of your design system

Our experience is that effective design principles are rooted in a clear and shared understanding of the value proposition, outcomes, and intended workflows of the application or solution to be developed.  Up front, you should bring all stakeholders and functions together to decide and document the following:

• Who is the target user

• What outcomes are being enabled for this user

• How will these outcomes be realized by the user

• What differentiation will enable these outcomes to be realized in a way that is appreciated by the user

• How will this team come together to create the application or solution

It’s important to recognize that design principles are not the same as a go-to-market strategy or plan, which focuses on how the company will engage and win committed, paying customers once a product is in the market.  

Creating a design language

The design language guides the overall look and feel of the solution or application.  While the design language is informed by a company’s brand guidelines, it is not the same and is not meant to be a series of documented guidelines that sit in a binder on a shelf for occasional reference.  

We recommend creating a design language in a visual framework that will be easy for designers to follow.  In many ways, creating your design language will result in an “infographic-like” document.  The design language should document the following:

• Overall look and feel of the application or solution, in the context of the company’s brand guidelines

• Design of controls, menus, buttons, and other navigation elements of the application that may appear once or multiple times

• Visual mapping of the intended user workflow to ensure an immersive experience that is easy, fast, and compelling

Designing reusable components in design systems for tech startups

Even the simplest of applications or solutions will likely have several elements used multiple times.  These may include buttons, navigation prompts on screen, forms, fields, and menu formats.  A key part of an effective design system is designing and coding these elements once to ensure consistency and create efficiencies for the design and engineering teams.  

As part of creating a design system, the teams should identify and document as many of these shared elements as possible, enabling an efficient process for designers to create the specifications for each element in alignment with the design language.  Engineering teams can then code the elements and post them to the design system library.  

Implementing the design system

We believe that the implementation of the design system is as important as the design system itself.  It starts and ends with a shared commitment from every stakeholder to contribute to and adhere to the design system, and there should be an open and focused discussion up front to secure this commitment.  It’s important to reinforce that a wide body of research validates that a design system doesn’t reduce the ability to innovate or be creative or slow down the process of bringing a new application or solution to market.  

An effective design system is not static, so it’s important to regularly review what is working, what needs to evolve, and ways to improve collaboration.  One of our best practices, which we highly recommend, is to appoint a design system orchestration leader for each project and to rotate this assignment across projects to keep the engagement level high for all team members.  

Conclusion

Tech startups are celebrated for reimagining, reinventing, and disrupting existing markets and creating new ones.  The risk-taking founders who start new companies and the teams they recruit are energized by the opportunity to ideate and innovate without boundaries or constraints.  Although the rigour and process associated with creating a design system may seem like a potential barrier to creativity and innovation, the opposite is actually the case as proven by research and the breakthrough applications delivered by thousands of startups who underpin their work with design systems.

As a startup ourselves, we are convicted about the value and importance of running every project around a design system, and the compelling work we’ve delivered to clients proves this.  Whether you work with Solace Digital, another agency, or an in-house team, we encourage all tech startups to adopt design systems as the “operating system” that will accelerate their progress, growth, and growth in brand value.