Change runs on ease of use

From complexity to coherence

It became evident that it was high time to focus on developing brand and user experience within and across digital platforms, and the ways of working behind the scenes. Thus, work began in November 2021 to build the Neste Design System. The goals of the work mirrored both the internal and external opportunities identified:

• Enabling a unified brand image and seamless user experience across Neste’s digital services
• Promoting a common understanding of the value of design
• Making development teams’ work easier and more efficient – especially if the design resources are low
• Coherently steering towards sustainability, inclusivity and accessibility in design
• Enabling working together and developing the design system across business units and functions

Design systems don’t build anything – people do

Therefore, the focus was on getting people to align on and discuss design first, before getting lost in technical minutiae of component libraries. The design system was seen as a bridge between the brand identity and digital services, and it was determined that it was important to align on Neste-level design principles from the perspective of teams working on different kinds of Neste digital services.

It was considered equally important to create solid structures for collaboration and governance as it was to build a functioning and on-brand component library. Both of these had to take into account how the organization works in terms of tools, technologies, people, structures, processes and user interface needs. To support this, qualitative methods such as interviews and workshops were selected.

For building the component library, the heterogeneity of Neste's services and business needs meant it was important to start small and scale up. At the same time, it was important to make sure that the design system was applicable to more than one team's work. This approach allowed for a gradual implementation of the design system, while still ensuring it met the needs of all stakeholders.

Thorough groundwork for a sustainable solution

Common patterns and themes emerged, providing valuable insights into Neste’s design needs and priorities. To further understand the requirements and gather input from key stakeholders, a participatory process was applied, including interviews and workshops with front-end developers, designers, project managers, product owners, brand team, and other relevant stakeholders. The analysis phase played a crucial role in ensuring the design system was tailored to the specific needs of Neste and its design system’s internal and external user groups.

Key findings from the analysis:

• Transparency and lines of communication were lacking between brand and digital user experience roles.
• Roles and ownership related to company-level digital user experience were hazy, and aligning UX design practices across teams had not been anyone’s priority.
• Vendor-managed tools made it hard to share UX outputs or visibility within Neste.
• Understanding of the value and role of design varied across teams.

Based on the findings:

• A highly centralized design system team would not be feasible due to how teams were organized and how their needs differed. Instead, a smaller core team was established to facilitate a design community that shared responsibility for the design system.
• New forums were needed to enable design community alignment on a practical level, and a chat group and biweekly meetings were launched during 2022.
• Emphasis was placed on enablement rather than building design constraints, as limiting teams’ autonomy would have hindered design system adoption.
• Efforts were also made to build organizational awareness and buy-in by illustrating the value of the Neste Design System for different stakeholders and user groups.

A key step in implementing the design system was the creation of a Figma UI component library, which was then documented in Zeroheight. The library was based on data insights and the most recent digital brand implementations at Neste. During this process, the team also focused on designer experience, refactoring Figma components to take advantage of newly introduced Figma features. This work helped to ensure that the design system was built with ease of use for designers in mind and was utilizing the most up-to-date tools and features available. Overall, these actions were crucial in ensuring the design system was built in a way that would be relevant and easy to use for teams and sustainable and maintainable for Neste.

To support development teams, design tokens were defined and established as part of the first phase. Design tokens are a way to encapsulate design-related information, such as colors, typography, and spacing, into a format easily integrated into software development. This ensures consistency across elements and implementations, and makes it easier to make changes to design properties in the future. Work is ongoing to build the design system in React code that developers can leverage directly.

A huge leap towards design as a practice

This allows teams to focus their expertise and creativity on delivering high-quality designs with minimal investment, resulting in a greater return on their efforts. Neste Design System is a powerful tool that enables teams to work smarter, not harder, to deliver exceptional results.

Neste Design System has brought unity not only through a common visual language, but also by creating an arena for discussing and aligning on design. The tools that Neste Design System promotes, such as Figma, have been adopted even in projects that are not directly linked to the design system, which has created transparency that did not exist before.

So far, Neste Design System has been utilized by 10+ different development teams across the organization. This is no surprise, as special care was put into making the onboarding and using of the design system effortless, thus supporting teams and individuals to adopt new ways of working. Change runs on ease of use, after all.

“Using the Design System for design and prototyping has also been enjoyable as it reduces the need to start from scratch. Whether it is a color, component or a drop shadow - I know I’ll have good resources in the Design System. Especially as a newcomer, knowing that the components I drag and drop to the file are in line with the brand image reduces stress and saves loads of time. The components are really well made and can be customized to fit the needs I’ve encountered.” - Front-end developer

“The combination of Neste Data Platform and the Neste Design System makes building things a lot easier and faster, and at least for me it’s clear that this is the best way to build new, data-intensive applications. And I’ve been telling this to my project manager colleagues.” - Development team project manager

Client: Neste

Design: Solita

Implementation: Solita, Futurice

Tools and technologies: Figma, Zeroheight, React