Emmy Decoursière

emmydecoursière

Home

About

Home

About

emmydecoursière

Home

About

Design system and governance

Customer Space redesign with the implementation of a design system and harmonization of the Customer Space.

Project brief

Client

Canadian energy sector company

Role

Product designer

Year

2024/2025

This Canadian energy sector company is a major player in the energy field in Quebec, positioning itself as a leader in energy transition and innovation.

Following the vision and strategy workshops, the team chose to continue the Customer Space redesign with us. An agile process was implemented, starting with the creation of conceptual mockups, and extending to the implementation of a design system to ensure visual and functional consistency throughout the journeys, while anticipating future needs.

My role in this project is marked by strong involvement at each stage of the process. This allows me to have an overall view of the project and ensure consistency of the user experience. Alongside the team, I contributed to creating the three conceptual mockups, prioritized as a pilot project for design system development, as well as the different journeys that followed. In parallel, I am co-responsible for the design system: we defined its foundations and currently manage the development of different components, ensuring their modularity, reusability, and ability to evolve according to future needs.

Work/project process

This project aims to implement a structured process in three main phases: discovery of business issues, anticipation of needs, and proposal of structuring solutions. It allowed us to establish a clear and documented framework, with validation criteria, defined roles, and distinct design phases.

At each stage, key people validate concepts before moving to development, thus ensuring thoughtful and documented decisions. The integration of the design system and the smooth transition from Sketch to Figma enabled a methodology perfectly aligned with the team, ensuring optimal collaboration and rigorous follow-up at each stage, always with the goal of achieving their decarbonization objective.

From UI kit to design system

Facing consistency challenges between their different projects, we seized this opportunity to propose a pedagogical approach and educate them on the benefits of a design system, adapting it specifically to their maturity level and organizational reality.

Unification

Standardize components and styles to avoid duplication of behaviors in the Customer Space and elsewhere.

Productivity

Reduce development time by reusing ready-to-use components documented according to use cases.

Collaboration and documentation

Facilitate communication between design and development teams through a single source of truth.

Governance process

In an agile context with strong time constraints, current governance is based on the following principles:

Mockup prioritization

Creation of mockups validated by the Customer Space PO - pilot project around 4 screens (80% of components).

Alignment with the design system

Verification that each element of the mockups is a Design System component if it makes sense.

Components verification

Reusability, accessibility, presence of different states, behavior adapted to multiple use cases and documentation.

Development preparation

Validated components are marked as "ready to dev." and communicated during weekly meetings.

Maintenance and evolution

Design system branches are created for component updates/maintenance.

Development and Quality Assurance

Monitoring of components in production through QA to ensure their consistency.

Areas for improvement:

Systematically test components to detect and correct bugs upstream.
Improve the validation process to streamline component integration.
Optimize documentation to guarantee rapid adoption of new updates.

Areas for improvement:

Systematically test components to detect and correct bugs upstream.
Improve the validation process to streamline component integration.
Optimize documentation to guarantee rapid adoption of new updates.

Conceptual mockups

In collaboration with the team, we identified three key screens as priorities to establish the foundations for the customer space UI redesign, while respecting the existing brand. In parallel, we initiated the creation of the design system, structured around these different main screens: dashboard, consumption, and billing.

These three pages in desktop and mobile brought together most of the components likely to be reused across the entire platform. They therefore served to establish the foundations of a common source of truth, thus guaranteeing the consistency of the platform and different products.

Content intended for interview presentation, not intended for online distribution.

Design system structure

Structure du design system

Governance

Usage, maintenance and documentation

Accessibility

Editorial content

Visual asset

Design kit

Dev. kit

Com. kit

Fondations

In parallel with the mockups, we defined the design system foundations by adapting the brand identity to digital, via variables (primitives + semantics) such as colors, typography, radius, spacing, and visual effects.

Components

The components, designed to be modular and functional, guarantee a smooth experience while integrating technical constraints through close collaboration with developers.

Documentation

In tandem, I contributed to creating variables and components derived from mockups, in close collaboration with the development team. My role consisted of ensuring that these elements were integrated coherently into the design system, while documenting each step to ensure optimal use of the tool. This documentation is crucial for framing and guiding the team in implementation, ensuring visual homogeneity and consistency of user journeys, while respecting the company's brand image.

The objective was also to keep things simple and flexible to ensure they are actually used and scalable for future features to be integrated into the customer space.

Component creation

To create components, we first designed simple elements like buttons, tags, or icons, using the foundations defined beforehand. These elements were then combined to form more complex blocks, such as cards or tables, ensuring visual and functional consistency across the entire experience.

In a few numbers

32 components

We designed and integrated approximately 32 key components, ranging from buttons and forms to tables and cards, ensuring a scalable and consistent foundation for all interfaces.

9 flo redesigns

We updated key user journeys, such as the 3 priority screens, the moving in/moving out flow while developing vision flows for bioenergy and energy efficiency.

4 designers

In our team of 4 designers. Together, we define and maintain the design system, ensuring it is applied to mockups and guaranteeing consistent interfaces.

3 developers

We regularly collaborate with a team of 3 developers to ensure technical feasibility and guarantee the quality of developed elements before their final integration with users.

Summary and learnings

Summary of my missions:

Creation of prioritized conceptual mockups, serving as a foundation for the redesign of the Customer Portal user interface and for the implementation of the design system.

Adaptation of user journeys according to the new design, and integrating some experience improvements, in the short to long term.
Implementation of the design system by establishing foundations built through variables, while creating and updating components progressively, according to the project's evolution.
Development and management of clear and defined agile processes for concept validation with clients and for updating the design system internally.
Strong collaboration with developers to ensure efficient integration of the design system.

Summary of my missions:

Creation of prioritized conceptual mockups, serving as a foundation for the redesign of the Customer Portal user interface and for the implementation of the design system.

Adaptation of user journeys according to the new design, and integrating some experience improvements, in the short to long term.
Implementation of the design system by establishing foundations built through variables, while creating and updating components progressively, according to the project's evolution.
Development and management of clear and defined agile processes for concept validation with clients and for updating the design system internally.
Strong collaboration with developers to ensure efficient integration of the design system.

Learnings:

Understanding of validation processes within a large team, with structured priority management at each stage and for each feature.

Implementation of effective governance for the design system, including update management, component documentation and alignment with product and development teams.
Importance of continuous collaboration with developers to ensure feasibility, optimization and evolution of the design system.

Learnings:

Understanding of validation processes within a large team, with structured priority management at each stage and for each feature.

Implementation of effective governance for the design system, including update management, component documentation and alignment with product and development teams.
Importance of continuous collaboration with developers to ensure feasibility, optimization and evolution of the design system.

Next project

UX/UI REDESIGN

MULTI-DEVICES

UX/UI REDESIGN

MULTI-DEVICES

MEDICAL

UI REDESIGN

MEDICAL

UI REDESIGN

MEDICAL

UI REDESIGN

Let's work together

How about we start building something incredible together? If you identify with my projects, don't hesitate to contact me so we can arrange a meeting!

We can connect via

e-mail

Let's work together

How about we start building something incredible together? If you identify with my projects, don't hesitate to contact me so we can arrange a meeting!

We can connect via

e-mail

Let's work together

How about we start building something incredible together? If you identify with my projects, don't hesitate to contact me so we can arrange a meeting!

We can connect via

e-mail