Back

Building the First GFP Design System

Year

2025

Timeline

5 months (Oct 2024 - Feb 2025)

Company

Green Future Project (GFP)

Website

greenfutureproject.com/en

B2B

Climate Tech

Responsive

End-to-end

Cross-functional collaboration

My role

As the solo Product Designer, I was responsible for planning, timeline definition, and end-to-end execution of the design system, from component architecture to engineering handover and subsequent testing.

The team

Product Designer (me): end-to-end process ownership and craft
Chief Technology Officer and Senior Developer: core end-to-end collaborators
Chief Product Officer: involved in key reviews
Marketing Team: brand oversight

Context

Green Future Project (GFP) is a Climate Tech company that offers B2B solutions for emissions measurement, supply chain analysis, compliant sustainability reporting, and environmental investments for businesses seeking support on their decarbonisation strategy. In October 2024, the engineering team initiated a full code refactoring of the website and product suite. This was the right moment to do something we hadn't had the chance to do before: build a design system from the ground up.

Problem

Without a Design System, every new page or feature required starting from scratch, creating inconsistencies across the product and slowing down both design and development. With a growing offer and an engineering refactoring on the pipeline, the lack of a shared visual and component language was becoming a real limitation.

Challenges

Tight deadline

The refactoring had to be shipped by early January 2025 and the design system was not the only project I was running at the time…
Spoiler: we took one more month!

Engineering autonomy

Time pressure meant engineers had to rebuild some pages without direct design involvement, introducing quality risks.

Accessibility gaps

GFP's color palette usage presented contrast issues that needed to be resolved. Laying the right foundations from the start was a step toward EAA (European Accessibility Act) compliance.

Language requirement

The previous design library and Figma projects existed exclusively in English, causing both the Design and Marketing teams to spend unnecessary time translating every new campaign asset into Italian.

Decisions & Tradeoffs

With limited time and bandwidth, I focused on building a solid, usable system rather than an exhaustive one.
Getting the core components right and enabling the team to work autonomously was more valuable than covering every edge case.

Adopting Google’s Material Design 3 as the foundation

Rather than designing every component from scratch, this approach gave engineering a familiar and well-documented foundation to build on, allowing us to focus energy on customizing components to fit GFP's brand rather than reinventing the wheel.

The trade-off: Some design decisions were constrained by MD3's structure, but the speed gains were definitely worth it.

Adopting Google’s Material Design 3 as the foundation

The trade-off: Some design decisions were constrained by MD3's structure, but the speed gains were definitely worth it.

Accepting partial engineering autonomy

Some pages were built by the engineering team without direct design involvement due to time constraints. This was a conscious decision to keep the project moving, with the understanding that a thorough design review would follow post-launch.

The trade-off: Important pages required a complete redesign after the engineering team implemented them autonomously, which became a significant issue for the marketing team after the design system launch. (Case study about this coming soon!)

Accepting partial engineering autonomy

Multilingual components by default

Leveraging Figma variables, I built frequently used components in both English and Italian from the start, enabling the Marketing team to create campaign assets autonomously without design involvement.

The trade-off: There was additional upfront effort required to set up and maintain the variables, but the long-term efficiency gains justified the investment.

Multilingual components by default

The trade-off: There was additional upfront effort required to set up and maintain the variables, but the long-term efficiency gains justified the investment.

Accessibility-first color revisions

Rather than keeping the existing palette as-is, I conducted a color accessibility audit and revised color combinations to meet contrast standards.

The trade-off: Updating the color palette required alignment with the marketing team and stakeholders, as it impacted the overall brand identity beyond the design system itself.

Accessibility-first color revisions

Rather than keeping the existing palette as-is, I conducted a color accessibility audit and revised color combinations to meet contrast standards.

The trade-off: Updating the color palette required alignment with the marketing team and stakeholders, as it impacted the overall brand identity beyond the design system itself.

Impact breakdown

The design system delivered measurable gains across the board. Here's what changed once the system was in place:
The following metrics reflect the impact on the creation of a new website page:

69%

Reduction in design effort:
From 4 days to 1.25 after Design System launch.

75%

Cut in development effort:
From 8 days to 2 days after Design System launch.

60%

Improvement in testing and iteration processes:
From 5 rounds to 2 rounds after Design System launch.