Increased speed to market by providing a solid foundation of UI components to designers, developers and product managers.

Design System

With an ever growing pressure to iterate and release products fast, product teams benefit from shared components so that they can focus on problems and solutions rather than UI details.
We carefully craft every design element to express the product brand vision, from colour and button states to illustration and motion.
Brand expression
Beyond basic UI, there are higher level components that are unique to a product. We streamline these components to the product's purpose and behaviour.
Aligned to product experience
Design and Code
A strong alignment between design and code is key to making design systems effective.

Design

Stage 1
Identify patterns
We audit the UI to find patterns, common behaviours and shared elements.
Create UI components
All UI components are carefully defined, including states, transitions and usage guidelines.
Test the product UI
Once the components are defined we rebuild the original product UI with the components from the design system to make sure they are robust and enable the intended product experience.

Build

Stage 2
Handover to development
Component definitions are handed over to development teams, with specific guidelines on how each component may be adjusted to different platforms
Review and alignment
We review and test component implementation to ensure alignment between design and code.

Evolve

Stage 3
Assess
The goal of the design system is to stay lean and expressive. We look for opportunities to remove unnecessary elements or replace them with more expressive ones.
Iterate
The key to success is iteration. We constantly push design forward to be a robust platform for excellent product experience.
82
reduction in design and development time
%
By creating and adhering to a design system we were able to significantly reduce costs for Leica in bringing the Leica FOTOS app onto a new platform.