Web Design System

Capgemini Design Library

Rebuilding design system components in a modern platform.

Overview

Capgemini chose to update their UI design software from Sketch to Figma to leverage its collaborative features, cross-platform compatibility, version control capabilities, prototyping tools, integrated design systems, plugin ecosystem, cloud-based collaboration, and performance advantages. Making the switch to Figma enhanced productivity, streamlined workflows, and improved the overall quality of UI design within the organization.

Approach

The Capgemini design system is the foundation for the website's user interface.he system standardizes components and styles, enhancing usability and user navigation. It provides pre-defined UI elements and patterns, accelerating the development process. The design system is intended to be scalable, which means it facilitates managing UI elements as the app evolves, ensuring coherence and continuity.

The maintenance and documentation of the design system and it's use cases, fosters communication and alignment among designers, developers, and product managers. Simplified maintenance of the app's UI and reduces the risk of inconsistencies.

No items found.

Results

Process

We migrated components to a new Figma design platform, in order to make the designs scalable and responsive. We also included extensive documentation, including the design specs and use cases. We used this migration as a time to evaluate the usability of design elements and reconsidered the design of certain elements to maintain a modern aesthetic and to adhere to WGAC guidelines.

Obstacles

We noticed some issues with the way some of the components interacted with other when placed into a design, and therefore needed to adjust the design accordingly so that the components fit a wide range of uses, and the design can use them with little to no difficultly.

Navigation and Usability

WGAC guidelines were consulted while creating accessible UI components, ensuring inclusivity. This design system promotes consistency, efficiency, scalability, collaboration, maintainability, brand identity, and accessibility, serving as a foundation for Capgemini's user-friendly interface.

Button design and it's variants.

Visual Appeal

The design system incorporates Capgemini's innovative, tech-forward brand identity by defining reusable visual elements. The consistently applied brand elements in the design system distinguish the app from competitors and enhance brand recognition. Leveraging predefined components from the Figma design library quickens development and deployment. From a brand perspective, the design system ensures uniform user experiences across devices and platforms.

Overall Impact

Capgemini's new user-friendly design system enhances navigation, transaction efficiency, and information access in the Capgemini website, boosting user satisfaction and retention. It's clear interface encourages frequent user interaction, potentially increasing bank revenue.

The design system allows for easy implementation of regulatory changes, maintaining WGAC compliance and user trust. The more robust design system for Capgemini is intended to business outcomes such as enhanced UX, user engagement, brand differentiation, cost reduction, faster deployment, cross-platform consistency, and regulatory adaptability.

View Live Project
Next Project

Financial Wellness