DK&Wärtsilä
Coding a timeless design system
How DK&A built a component library to support Wärtsilä’s software for the next 40 years.
Imagine the bridge of a vessel out in the middle of the sea.
It’s night: total darkness surrounds you. All you have to rely on is the skills of yourself and those around you – and the intricate, yet reliable software embedded into the bridge. The deck starts tilting forwards as your ship crests a massive wave. Your pulse is steady. The various UI surrounds you.
Services
- Bespoke digital products
Industries
- Marine
- B2B
The scope of the project was as massive as the ships it was serving. It wasn’t limited to the designing and developing of one product. The scope encompassed everything from navigation solutions to compiling operational information from the ship’s engine. Wärtsilä’s rapid innovation team was tasked with creating a design system to support this monumental undertaking.
After creating the initial designs for their aptly named Anchor Design System, Wärtsilä turned to DK&A for technical expertise to drive the development of the design system.
The goals of the first phase of the joint project were to develop the Anchor Design System into a user interface toolkit that would support:
Unifying Wärtsilä’s products across the whole bridge domain
Updating the bridge software to empower its end users
Creating enough modularity to adapt to any new needs for its end users.
In addition to these operational goals, the ultimate goal of the project was to keep designing and implementing the Anchor Design System into a solution that would support all of Wärtsilä’s digital product development.
What ensued was nearly two years of careful balancing and focused craftsmanship. DK&A’s developers worked as a direct extension of Wärtsilä’s rapid innovation team to develop the component library of the Anchor Design System. DK&A’s technical expertise and design consultation helped anchor Wärtsilä’s UI implementation and design.
Anchoring the design system
The first phase of the project focused on nailing down the design and implementation of the design system.
“We designed the Anchor Design System to be a toolkit for anybody who is actually building products at Wärtsilä,” Markus Mannevaara, Senior Director of Rapid Innovation, Wärtsilä, explains.
“We wanted to not only focus on the visual guidelines, but ensure the implementation is high quality as well.”
The Anchor Design System supports the designing and implementing of human-to-machine interfaces (HMI) for Wärtsilä’s software. It’s made up of a modular component library, a set of instructions on how to use the library, and a support network for its users. The Anchor Design System was purpose-built to fit into a curious duality: a careful balancing of the needs of a highly specific domain and the need for a generic, all-encompassing design system.
“We needed to build the design system to comply with the regulations and requirements of the operational maritime context,” Harri Seppälä, Head of Design, Wärtsilä, explains.
“This imposed some pretty serious restrictions and even directed the design to a large extent. At the same time, we needed to make sure the design system could be used in a more typical context, such as a traditional web page.”
An added challenge was presented by the ships’ long lifespans. In some vessels, bridge systems from the 80s are still in use, even though rarely. Twenty-year-old systems are common. Thus, the design system would need to support the building and upgrading of bridge software for the next four decades. Each design and implementation choice needed to be justified as a working solution for not only today but also for any given day in forty years time. Current design fashions and trends could not be blindly relied on. The design and implementation needed to be timeless.
Building the components was akin to the careful laying of foundational bricks. If the components didn’t work exactly as needed, the software built upon them would be flawed. As such, Wärtsilä’s rapid innovation team created a detailed design and experiment roadmap to guide the implementation of the design system.
Each individual component was then hand-crafted by DK&A in a process of multiple iterative cycles to best serve the bridge officers. Every time a component was finished, it was shipped off to the end users to verify whether it worked as intended. This tight feedback loop guaranteed that the new design system would ease and streamline their work and would not just be enforcing change for change’s sake.
“For instance, they often work in complete darkness in the bridge environment. And you think, well, dark is dark. We’ll just need to make less bright interfaces,” Dobrek Kropielnicki, Senior Developer at DK&A, remembers.
“But then we were put into total darkness to see what our interface actually looked like, and it was back to the drawing table.”
Following the completion of the initial component library after over a year’s worth of iteration, the team set out to implement a maintenance and support system. Debugging will always be necessary with a machine as intricately built as a design system. Likewise, new users of the design system will always need support in many different ways to get started. DK&A’s sweeping experience in building design systems helped streamline the creation of this support network.
The foundation of a faster and more unified design
The development and adoption of the Anchor Design System has increased the speed of development and the consistency of design at Wärtsilä. Meanwhile, the bridge personnel of maritime vessels are receiving a comprehensive ecosystem of software that can adapt to their needs – both today and over the next forty years.
“The proof is in the pudding,” says a proud Markus Mannevaara.
“When our other internal teams have a choice on what they want to use as a human-to-machine interface – especially if it is web-based – there is practically a 100% conversion rate that they use Anchor Design System.”
The components DK&A’s developers have meticulously built for the design system’s library have also been well received by Wärtsilä’s developers.
“They’ve said it’s really nice to have ready-made components that handle a lot of common cases. And if they don’t fit the specific requirements of some cases, we’ve received feedback that it’s a relatively simple matter to extend the component to cover any need,” Harri Seppälä says.
Following the first phase of the project, Wärtsilä has extended DK&A’s involvement into its second phase: DK&A is currently helping build new Wärtsilä products from the components of the design system.
“We’ve been so happy with Dobrek and Bartosz that we’ve continued our engagement with DK&A beyond the first project,” Markus Mannevaara states.
“The collaboration has just been really smooth. DK&A’s developers take ownership of their work and have had a very proactive stance in supporting our developers in using the Anchor Design System.”
Wärtsilä and DK&A continue to develop the Anchor Design System in close collaboration, building timeless, value-adding solutions for Wärtsilä’s customers.
