Design System @ South Pole

Leading a cross-functional task force to unite design libraries, creating a single source of truth for B2C and B2B products

Image alt tag

South Pole, a global leader in climate solutions, has a distributed and remote digital innovation team. Designers and engineers were responsible for maintaining two separate design libraries: one for external products and one for internal tools.

Keep reading the project summary, and get in touch if you want to hear more about it.

The team

  • 4 Designers

  • 1 Head of UX

  • 5 FE Engineers

My role

  • Lead Specialist, UX/UI Design

  • Workshop facilitator

Timeline

  • Started in April 2023

  • Ongoing

Timeline

  • Figma & Figjam

  • FigMayo

  • Confluence

Design System @ South Pole

The Glacier Design System library can be viewed on Figmayo

Problem

Having 2 design libraries made it difficult to maintain consistency across the company's digital products and created a burden for front-end engineers and designers.

Solution

To unify South Pole's design libraries, I proposed and led a cross-functional task force.

We defined design principles, tech stacks, and standardised documentation for design components.

The designers began creating the new library around July 2023, while development started in September 2023.

Design Process
A screenshot of a FigJam board with a workshop structure divided in sections, containing memes, many post-its and inspiration from existing public design systems

The first workshop, with a decent amount of GIFs.

First workshop & Audit

I planned and facilitated the first workshop with designers and engineers to discuss our pain points and requirements, and to conduct an initial audit.

We also looked at public design systems from other companies for inspiration.

Design System @ South Pole

Board of second workshop

Second workshop

For the second workshop, I asked participants to bring in their teams' roadmaps so that we could develop a high-level roadmap for the project, including key milestones and deliverables.

We also discussed the amount of time we could commit to every week and the structure of the task force.

Finally, we agreed on the structure of our components and design system library, following Atomic Design principles.

Design System @ South Pole

Documentation for typography

Progress

We defined design principles for the new system, including a focus on sustainability, while engineers agreed on tech stacks.

We conducted a full audit of the old design libraries, design projects, and GitHub to identify existing components, components that had been built, and components that had never been standardised.

As we split the design tasks, I created a Jira board to organise our work.

I was also responsible for integrating South Pole's new branding guidelines in Figma, including creating variables for Primitive colours and updating typography styles.

Figma's Variables release had perfect timing, and I was happy to demonstrate and share tutorials with the team.

Design System @ South Pole

Documentation for the button component

Accessibility and inclusive design

Following my workshop on accessibility with my Product team, I was also championing the topic while designing our components.

One of the examples was selecting colours from the new company branding guidelines to compose an accessible colour scheme and checking for contrast in our components.

When designing the new button component, I included accessible states, which were lacking in the old libraries.

A project plan written in the Confluence platform, outlining Problem Statement, Pain Points, Potential Benefits, links to presentations about the value of design system, and links to articles with studies of design speed increased with design system

Business case and Confluence project plan

Learnings

While I participated in sessions of Booking.com's design system team and contributed to Zalando's B2B design system, this project gave me the chance to drive a task force and create a new design system from scratch.

It developed my design and Figma skills through collaboration with my fellow designers and several online courses and materials about design systems.

I also learned a lot while documenting the project plan in Confluence and developing a persuasive business case that the Head of UX presented to leadership for buy-in.

Impact

The unified design system had several positive impacts on South Pole, including:

  • Improved consistency across our digital products: providing a single source of truth for design components, ensuring that products have a consistent look and feel.

  • More efficiency for front-end engineers: By reducing the number of design libraries to maintain, it became easier for front-end engineers to build and maintain new components.

  • Cohesive brand experience: By helping create a more unified digital presence for South Pole, providing a consistent look and feel for its customers and partners.

  • Increased adoption across the company: The new system was well-received by other teams, which started using it as well.