Design System

At Sopra Banking Software, as a Product Designer, I was responsible for designing and managing a scalable design system tailored for the B2B platform.

Overview

The goal was to address inconsistencies, improve efficiency, and create a unified experience for complex user workflows in a professional banking environment.

Problem statement

The B2B platform lacked a cohesive design approach, leading to inefficiencies in development and inconsistent user experiences. As the platform grew, the need for a scalable, centralised system to streamline design and engineering collaboration became critical.

Product audit

I began by conducting a comprehensive audit of the existing platform, cataloguing UI components, design patterns, and user workflows. Partnered with stakeholders and developers to understand their perspectives.

Modals are inconsistent throughout the platform; Patterns identified.

Analysis

This audit highlighted redundancies and gaps, serving as the foundation for a streamlined design system. Industry analysis, best practice.

Styles and variables

Standardised foundational design variables, including colour palettes, typography, and grid systems, to establish a cohesive visual framework.

Components

Using the defined variables and styles, I designed modular, reusable components optimised for B2B workflows.

Documentation

I developed documentation for the design system, detailing how components should be used.
I also encouraged team members to contribute by sharing their use cases or suggesting improvements.

I developed documentation for the design system, detailing how components should be used. I also encouraged team members to contribute by sharing their use cases or suggesting improvements.

A11y

All components were created to meet WCAG 2.1 AA standards, ensuring sufficient colour contrast.

Testing

Conducted usability testing with iterative feedback loops, continuously refining components and styles to ensure the system effectively addressed real-world user needs.

Collaboration

I worked closely with developers to ensure smooth integration of the design system into the platform. Facilitated collaborative workshops and design reviews to align stakeholders and proactively address gaps during implementation.

Success metrics

Detachment of design instances was reduced by 80%, significantly improving Figma design specification consistency and accelerating delivery timelines. Development time decreased due to well-prepared documentation aligned with developers, eliminating ambiguities and assumptions.