Eficode’s consultants had the right skillset to help build Vaisala’s Development and Design System: a system which makes the company more agile.
“Our Development and Design System makes us more agile through coded components and cooperation. It’s a way for product teams to supply UI atoms into the system, which means all of our teams save time by using building blocks that have been made in other projects.” - Sauli Laitinen, Vaisala Design Manager
Vaisala’s Development and Design System is a coordinated way of working which leads to a growing collection of ‘atoms’ – reusable and documented UI components. These components are simple enough to be useful to many different teams working on vastly different products. The system adds value to all teams as new projects come up with new components that can be reused elsewhere in the organization.
The system is owned by all the teams that contribute to it: the application teams that develop the components, the UX team, and the platform team. As an internal open source product, the system is created together, and there are only two coordinators needed to loosely organize the cooperation between teams.
Now that the system is in place, Vaisala is benefiting from less duplicate work, thereby saving time and allowing developers and designers to focus on creating application-specific solutions for their users.
Vaisala was ready for a Design System
Vaisala is a global leader in weather, environmental, and industrial measurement. Building on over 80 years of experience, Vaisala provides observations for a better world with approximately 1,850 professionals worldwide.
When it came to their UX capabilities, Vaisala had reached a level of working – with UI experts embedded in their product teams and a unified visual style – that gave the company a taste for more. How much of the design and development work done in one team could be used elsewhere within the company?
Some manner of reusable components were already in place, but the process for getting them made could be improved. A coder from the platform team would make components when asked by the design team, after which the component would wait to be used by an application team.
Vaisala was hungry for a better, more agile solution.
What is a Design System?
A Design System (or as Vaisala calls theirs, a Development and Design System) provided that solution for Vaisala. Design Systems are a cross-organizational way of working which significantly reduces duplicate work. It is a living system which produces UI components (or ‘atoms’) for designers, as well as React components for developers. Atoms are fed into the system as and when they are made in real-world scenarios by teams across the organization.
With the right skillset, Design Systems can be automated to save even more time.
How was Vaisala’s Development and Design System created?
Vaisala wanted the teams that would contribute to the system in the future to take ownership of the system as it was being built. One thing was crystal clear: the system would have to be created collaboratively.
Eficode’s consultant worked closely with a member of the Vaisala platform team over the course of the project. Together, they built the architecture of the system that would accept and store the components. Eficode’s consultants had the prior experience to complement the existing body of knowledge at Vaisala.
Workshops and hackathons
What was the best way to create agile Design System? This question became the driving force of a series of workshops that involved the design team, the platform team, and Eficode’s consultants. Between the workshops, the project was progressed using MS Teams and Jira.
Collaboration was encouraged further in hackathons with the teams that would form the beating heart of the system in its final form.
Light in the middle
The end result was a system that was very light in the middle, with two coordinators who are the best people for the job from the teams contributing to the system. The coordinators facilitate the process.
DevOps and the Design System
Vaisala already had a continuous delivery pipeline for software production, consisting of an integration of Jenkins, Bitbucket, and Jira. The Design System’s automation was built by Eficode’s DevOps consultant on top of that existing infrastructure.
Eficode’s consultant added to the existing integration, automating the following elements of Vaisala’s design system:
- Automated testing of components
- Automated updates of website documentation
- Automated publishing of the newest version of a component.
Today, new builds and new versions are automatically published by the Design System for developers to use.
Develop, Share, Gain: the benefits
The benefits of Vaisala’s Development and Design System had to be tangible for all the teams involved, as this would motivate people to contribute to the system. These benefits look different depending on who you’re talking to.
For product teams
- Unified branding and UX
- Products that work the same way
- Faster UI work at a higher quality
- UI components that keep getting better
- Faster beginning of projects
- Designs which are easy to use (as Node.js package manager dependencies)
- Bug fixes for components
- Write one component, get ten free
- Less writing in CSS
- Components that work well together
- Less work with pixel perfect UI specifications
- One source for the latest design
- Rapid prototyping with code/clickable prototypes
- Strengthens Vaisala’s shared design language
From an organizational perspective, the Design System shortens time to market, safeguards consistency, and helps teams to focus on the essential challenges of solving customers’ problems with the software they are creating.
Design systems are social creatures
Almost half of the work involved in the design system is bringing people together, getting them excited and making sure they enjoy working together. This has been the key to the great start to Vaisala’s design system.
It is a system that is owned and maintained by a cross-organizational group of active developers and designers, making it a recipe for greater agility.
Eficode also provides other design and UX services (and is Finland’s leading UX research house).
Thanks go to the following individuals, who together created Vaisala's Development and Design System:
Aine Aivi (Vaisala), Samuli Andelin (Eficode), Tomasz Dressler (Vaisala), Joona Enbuska (Eficode), Jarkka Kivikanta (Vaisala), Jarkko Polvi (Eficode), John Moscarillo (Vaisala), Juha Karttunen (Siili Solutions), Jukka-Pekka Luukkonen, Joonas Kallio (Kinetive), Marko Kankaanniemi (Goto 10 Software), Kari Heikkilä (Vaisala), Markus Koivisto (Vaisala), Heta Korvenranta (Vaisala), Heikki Kupiainen (Metamatic), Sauli Laitinen (Vaisala), Leena Pohjaniemi (Vaisala), Maiju Tompuri (Vaisala), Mikko Ala-Fossi (Vaisala), Miso Mikkilä (Iskos), Petteri Suontama (Eficode), Teemu Kujanpää (Vaisala), Teppo Rouvi (Vaisala), Toni Lehtimäki (Vaisala), Tuomas Lilja (Eficode), Tuomo Mäkelä (Vaisala), and Harald Jerger (Vaisala).