Sunscreen Design System

Enabling FTI's product teams to work efficient & consistent while aiming for scalability

Role

Design System Designer

Industry

Tourism

Background

As a Design System Designer at FTI Touristik, I was tasked with creating a cohesive and comprehensive design system. When I joined FTI, the UX/UI department only had a rudimental sketch file with some defined Design patterns, colors, icons, and typography styles in place. The absence of consistency in our user interfaces across web and mobile platforms resulted in a fragmented user experience, making it challenging to convey our brand identity effectively.

Therefore the Design System Team was established:

3 Design System Designers
2 Developers
product owner

Tools used: Figma, Zeroheight, Zeplin, Confluence, Jira

Goal

Establish a comprehensive design system that encapsulates a unified, intuitive, and delightful user experience across all digital touchpoints, ensuring consistency and efficiency.

Process

Discovery

The first step in our journey was to understand the current state of our design and development processes. We met with stakeholders from various departments, including design, development, marketing, and customer support. These sessions provided valuable insights into the challenges and pain points faced by each team.

Defining the Core Principles

We collaborated with our designers to define the core principles of our design system.

Foundation

With the principles in place, we began building the foundational elements of the design system. This included:

Color Palette: We defined a color palette that matched our brand identity and guaranteed accessibility.
Typography: New typography, its scale and line height were defined to ensure readability and consistency.
Iconography: We introduced a new, consistent set of Icons, that matched our brand identity.
Spacing: We established the 4px spacing system in the design system.
Elevation: We defined a set of elevation effects (e.g. for cards) with various elevation levels & directions.
Grid System: A responsive grid system was created to support various screen sizes. We defined breakpoints based on our user's most commonly used devices.

Background

Therefore the Design System Team was established:

3 Design System Designers
2 Developers
product owner

Tools used: Figma, Zeroheight, Zeplin, Confluence, Jira

Goal

Establish a comprehensive design system that encapsulates a unified, intuitive, and delightful user experience across all digital touchpoints, ensuring consistency and efficiency.

Process

Discovery

Defining the Core Principles

We collaborated with our designers to define the core principles of our design system.

Foundation

With the principles in place, we began building the foundational elements of the design system. This included:

Color Palette: We defined a color palette that matched our brand identity and guaranteed accessibility.
Typography: New typography, its scale and line height were defined to ensure readability and consistency.
Iconography: We introduced a new, consistent set of Icons, that matched our brand identity.
Spacing: We established the 4px spacing system in the design system.
Elevation: We defined a set of elevation effects (e.g. for cards) with various elevation levels & directions.
Grid System: A responsive grid system was created to support various screen sizes. We defined breakpoints based on our user's most commonly used devices.

Components

Next, we designed a library of reusable components, such as buttons, checkboxes, tab navigation, switches and cards. Each component was build using Figma Variables (colors/spacing/border-radius) meticulously documented with usage guidelines, code snippets, and design specifications. We also developed design patterns for common interactions, such as the navigation header and quick search for the user's next destination search.

Documentation and Tools

To ensure the design system was accessible and easy to use, we created comprehensive documentation hosted on a dedicated platform (zeroheight). This included:

Design Tokens: Centralized variables for colors, typography, and spacing to ensure consistency.
Component Library: A collection of pre-designed components with implementation details.
Guidelines: Best practices and guidelines for using the design system effectively.

Collaboration and Involvement

Creating the design system was a collaborative effort that involved various teams across the company. Regular meetings and feedback sessions were held to ensure alignment and address any concerns. Key collaborations included:

Design Team: Worked closely to create and refine design components and patterns.
Development Team: Ensured the components were implemented correctly and provided feedback on feasibility and performance.
Marketing Team: Aligned the design system with our brand strategy and marketing materials.

Outcome

Creating the design system for FTI Touristik was a transformative journey that brought together various teams to achieve a common goal. By establishing a cohesive and scalable design framework, we were aiming to enhance the user experience, streamline our processes, and strengthen our brand identity. It was an enriching experience and I learned so much during that process and from my fellow teammates.