Design Systems

A design system brings structure and clarity into your web application, from design process through to the frontend implementation.

All colors, spacing, and font-sizes that your designers use are specified and used consistently throughout the design files. Build a structured component library in your designs using these design tokens, then implement that in your frontend.

These design tokens and the component library built with them have a direect 1-to-1 relationship between the design files and the frontend implementation.

Working with design systems in this way improves workflows between your product, design, and frontend teams, and increases the consistency and speed at which you can build UI. You can ship new features faster, and with improved UI quality, keeping your customers happy.

Improve consistency and speed up implementation

Far from being busy work that adds overhead to every task, building with design systems actually results in faster implementation and higher quality UIs.

Building components with a fixed set of colors, spaces, font-sizes, border-radiuses etc. avoids inconsistent usage, and a web application with an ever-growing variety of colors and typography.

This simplicity makes it faster and less error-prone for your developers to build UI, and makes the review process quicker.

Using consistent components to build larger chunks of UI and entire pages brings greater consistency to the pages. Building UI becomes a surprisingly quick task. Developers can quickly assemble existing components into a complete layout, wiring them together with the relevant new behaviour and date, knowing the components will match the designs.

Quickly QA UI

With a component library built in modern UI design software using design tokens, and the same component library in your frontend implementation using something like Storybook, your UI becomes reliably QA-able.

When developers build new components, the design system gives them a comprehensive reference of the different states needed, and they can inspect to find out exactly which color and sizing variables have been used.

Once built, and with each state showcased in a frontend component library like Storybook, your design team can compare live UI components directly to the designs in their component library. This feedback loop boosts the quality and reliability of your UI.

No longer revisiting work already “done”, designers and developers will have more time to focus on pushing their work to the next level, adding polish and new features.

Collaborate with your design team

Even skilled design teams can lack the experience of building UI in this new way. Less pixel-based, and more like construction, it mirrors how things work in the frontend code. Adopting this new approach can be made smoother by following some ground rules and adopting new habits.

We can work with your design team to asses how you currently work, and introduce the new concepts in a way that will stick and form your new way of working.

Implement a component library

Existing apps are commonly built without a solid component library, perhaps because this was not a common part of the workflow when the project started, or maybe it wasn’t even technically possible in the language and frameworks you use.

this is not a problem. We have helped many clients add a new component library to their existing codebase, planning and managing the rollout to ensure a smooth experience for users.

During the process, your developer teams will learn new best practices, and be an invaluable part of the process. They know the codebase better than anyone, and their input is essential to ensure potential issues and edge cases are recognised and planned for.

Improve designer—developer workflows

Design systems present a great workflow for collaboration between your designers and developers. Perhaps you’re already working with a design system, but finding the process slower or more painful than you expected?

Our experienced design system engineer can work with your designers and developers to assess what’s happening right now, and find out what’s causing friction. In collaboration with you and your teams, we’ll propose an action plan for improvements to the workflow, and help you introduce the changes.