Deliverables

Competitive Analysis, DS Evolution, Design–Dev Collaboration, Accessibility, Documentation

Roles

UX Research, UI Design, Design System

Tools

Figma, Zeroheight, Jira

Project Context

Mobile & Desktop

Client

Volotea

Rebuilding Volotea’s DS to achieve visual consistency, faster development, and a smoother collaboration across teams.

Volotea cover
Volotea cover
Volotea cover

Rebuilding consistency across digital experiences

Volotea’s digital ecosystem had grown rapidly over time, resulting in duplicated components, inconsistent visuals, and fragmented documentation. My goal was to help unify and scale the existing Design System: improving the efficiency, accessibility, and collaboration between design and development teams.

Volotea img presentation
Volotea img presentation
Volotea img presentation

Problem & Opportunity

The existing Design System (Legacy) lacked structure and cohesion. Components were outdated, design tokens weren’t standardized, and multiple Figma libraries caused friction among teams. This presented an opportunity to rebuild the system: bringing together design and development under a shared visual language, ensuring scalability and alignment across platforms.

Solution

Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1

Visual aesthetic with minimalistic design and consistent branding

Visual aesthetic with minimalistic design and consistent branding

Visual aesthetic with minimalistic design and consistent branding

Each component was refined to reflect Volotea’s visual identity: attention to detail in spacing, typography, and contrast improved both usability and aesthetics, aligning digital touchpoints with the brand’s approachable tone.

Each component was refined to reflect Volotea’s visual identity: attention to detail in spacing, typography, and contrast improved both usability and aesthetics, aligning digital touchpoints with the brand’s approachable tone.

Each component was refined to reflect Volotea’s visual identity: attention to detail in spacing, typography, and contrast improved both usability and aesthetics, aligning digital touchpoints with the brand’s approachable tone.

Intuitive documentation and scalable structure

Intuitive documentation and scalable structure

Intuitive documentation and scalable structure

The new Zeroheight documentation provided a clear, intuitive reference for designers and developers. Every element was described with visual states, implementation notes, and best practices for accessibility and responsiveness.

The new Zeroheight documentation provided a clear, intuitive reference for designers and developers. Every element was described with visual states, implementation notes, and best practices for accessibility and responsiveness.

The new Zeroheight documentation provided a clear, intuitive reference for designers and developers. Every element was described with visual states, implementation notes, and best practices for accessibility and responsiveness.

Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #2
Large Project Gallery Image #3
Large Project Gallery Image #3
Large Project Gallery Image #3
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1

Enhanced collaboration and product quality

Enhanced collaboration and product quality

Enhanced collaboration and product quality

The redesigned system streamlined the design: development workflow, enabling faster updates and easier maintenance. Teams now work with shared foundations, ensuring visual consistency and reducing delivery time across projects. This evolution not only strengthened Volotea’s brand presence but also improved product quality and user trust.

The redesigned system streamlined the design: development workflow, enabling faster updates and easier maintenance. Teams now work with shared foundations, ensuring visual consistency and reducing delivery time across projects. This evolution not only strengthened Volotea’s brand presence but also improved product quality and user trust.

The redesigned system streamlined the design: development workflow, enabling faster updates and easier maintenance. Teams now work with shared foundations, ensuring visual consistency and reducing delivery time across projects. This evolution not only strengthened Volotea’s brand presence but also improved product quality and user trust.

Long-term scalability and continuous evolution

Long-term scalability and continuous evolution

Long-term scalability and continuous evolution

To ensure the Design System could evolve alongside Volotea’s digital products, every component and foundation element was documented with clear usage rules, version tracking, and direct code references, making updates and onboarding effortless. By aligning Figma, Zeroheight, and development environments, the system became a living ecosystem: scalable, transparent, and ready to adapt to new business needs.

To ensure the Design System could evolve alongside Volotea’s digital products, every component and foundation element was documented with clear usage rules, version tracking, and direct code references, making updates and onboarding effortless. By aligning Figma, Zeroheight, and development environments, the system became a living ecosystem: scalable, transparent, and ready to adapt to new business needs.

To ensure the Design System could evolve alongside Volotea’s digital products, every component and foundation element was documented with clear usage rules, version tracking, and direct code references, making updates and onboarding effortless. By aligning Figma, Zeroheight, and development environments, the system became a living ecosystem: scalable, transparent, and ready to adapt to new business needs.

Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Large Project Gallery Image #4
Large Project Gallery Image #4
Large Project Gallery Image #4

From chaos to clarity: turning a fragmented system into a unified experience for teams and users alike.

What started as a fragmented collection of components evolved into a scalable, well-documented system that unified design and development. By aligning Figma, Zeroheight, and code, the process became transparent and collaborative, empowering teams to build faster and more consistently. The result: a living design ecosystem that strengthened brand coherence, improved accessibility, and set a solid foundation for future growth.