top of page

Titan Design System

Fugro’s existing components were inconsistent and lacked an atomic design structure, making them slow to use for both designers and engineers. Properties and variants were often missing or incorrect, causing confusion and extra rework during handoff. I rebuilt the design system from the ground up, introducing a clear atomic hierarchy, well defined properties, and responsive guidelines. The result is a scalable, easy to use toolkit that speeds up design, reduces development time, and keeps product experiences consistent across platforms.

ROLE

UX/UI Designer

UX Researcher

SKILLS

Interviews, UX Research, Design System, Delivery, Communication, Advanced Figma Skills

Your paragraph text.png

Summary

Designers experience

  • Components were inconsistent and overly complex.

  • Many had missing or incorrect properties and variants.

  • Simple edits often required detaching and rebuilding components.

  • Maintaining a consistent look across products was time consuming.

Engineers experience

  • Components were not built with an atomic design approach.

  • Large, combined elements had to be broken into smaller parts before coding.

  • Extra steps caused delays and increased the chance of errors.

  • Handoffs often required clarification and rework.

Why the Design System wasn’t working

  • Lacked a proper structure and clear naming conventions.

  • Properties and variants were not set up correctly.

  • Not a reliable single source of truth many teams avoided using it.

  • Using the system was slower than starting from scratch.

What we fixed

  • Rebuild the system using a true atomic design strategy.

  • Break components into smaller, reusable building blocks.

  • Assign correct properties, variants, and states.

  • Align structure with engineering’s codebase for seamless handoff.

  • Create a scalable, easy to use toolkit for both designers and engineers.

1. Understanding the Challenge

Before the new system, components weren’t built using an atomic design approach. This caused two big issues:

  • Inefficient for Engineers: Components were large and complex, meaning engineers had to manually break them into smaller elements during development. This slowed down delivery and created more room for mistakes.

  • Frustrating for Designers: Properties and variants were often missing or incorrectly set, so designers couldn’t quickly adapt components for different use cases.

The outcome?
Confusion, unnecessary back and forth, and hours of wasted time for both designers and engineers.
 

To confirm this, I:

  • Interviewed 2 designers and 3 engineers to collect real examples of pain points.

  • Audited every component in Figma to check for missing states, properties, and variant logic.

  • Reviewed how designs were being translated into code to see where the process was breaking down.

DS interview

2. Defining the Goal

After user interviews and audit Titan, we set a clear target.
Create a true atomic design system that:

  • Breaks designs into the smallest reusable building blocks (atoms, molecules, organisms).

  • Ensures every component has the correct properties, variants, and states.

  • Gives engineers clean, ready to use assets that transfer directly into code.

  • Provides a single source of truth so there’s no guesswork between teams.

3. Exploring Solutions

With the goal set, I started by looking at the components that caused the most pain. 

  • Sketched out how to break big components into smaller building blocks, so they could be combined in different ways.

  • Mapped out a new variant strategy, making sure one component could cover many use cases (different sizes, states, icons).

  • Drafted clear naming conventions to make components easier to find and use.

  • Thought about documentation and decided the best place for it was right inside Figma, so people wouldn’t have to hunt for a separate file.

DS comparison.png
properties comparison

4. Prototype – Building the New System

Using Figma, I rebuilt the system piece by piece:

To meet the business' timeline objectives,  I had to focus on the major components first.

Firstly, I​:

  • Refactored into flexible, reusable components.

  • Tested different variant setups to make sure one component could cover multiple use cases.

  • ​Created documentation inside Figma so the team didn’t have to look for guidance.

Your paragraph text (2).png

5. Validating that It Worked

I instructed engineers to try the new components with real tasks:

  • Designers could quickly adapt components to different screens and states.

  • Engineers could implement them without breaking them apart.

  • Feedback helped me tweak naming conventions and add missing edge cases.

6. The Impact

The impact was huge. Save so much time and no frustratioin.

  • The design system finally became a tool the team wanted to use, not avoid.

  • Designers worked faster, without frustration.

  • Engineers trusted the system and spent less time fixing broken components.

  • Delivery was smoother, faster, and more consistent.

Reflection

Stressful but manageable

This project taught me that a design system is more than just components, it’s about collaboration, trust, and flexibility.

I managed a huge workload under tight deadlines, and it was challenging. However, it was possible with careful time management and focus. I jumped into multiple high priority tasks at once which was intense, but I developed balancing quality with speed.

Next steps: Keep iterating on the system, maintain regular audits, and build a guidebook to help new team members onboard quickly.

bottom of page