Change runs on ease of use
A design system is never just a design system. For Neste, it is an opportunity for true cross-functional design collaboration – first time ever. It is a chance to break down silos and create a unified user experience vision across the organization. Neste Design System empowers teams to work together on digital experiences that are not only visually consistent, but also intuitive and user-centric. To support this, Neste Design System establishes both shared ways of working and an easy to use component library, which have been co-created with the people that use them.
From complexity to coherence
Neste determined that the company’s digital services were not appropriately reflecting increasing user expectations or Neste’s brand image as a technological forerunner. In addition, Neste’s digital services only partially reflected the company’s up-to-date visual identity.
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
STRATEGY & CREATIVE IDEA
The strategy for building the design system at Neste aimed at helping teams across the company deliver a better user experience with less effort. The central idea was that while design systems provide a solid baseline for user experience, 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
The work to build the Neste Design System began with a thorough analysis phase that included a design audit. This process involved examining the various digital user experiences that were being built across the organization and identifying the teams and individuals involved in their creation.
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
Even though a design system is never finished, great many things have been already accomplished. Neste Design System empowers designers to create on-brand and user-friendly designs with confidence, eliminating the need for excessive design reviews and guesswork.
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
Implementation: Solita, Futurice
Tools and technologies: Figma, Zeroheight, React