The Glacier Design System library can be viewed on Figmayo
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
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
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
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.
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.
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.
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.
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.