DesignSystem - Fernanda Vera

Designing for Consistency

Reusable UI components for booking and passenger experiences.

Role

Product designer

Tools

Figma

Focus

Reusable components, variants and states

Overview

While working on digital products for passenger transportation, I designed reusable UI components to support different booking and registration flows.

My work focused on creating components and variants in Figma, refining interaction states, and making adjustments to existing components in Storybook.

Goal

Keep interfaces consistent without limiting their flexibility.

Different states, same visual language.

A ticket can be selected or cancelled. An input can be focused, filled, or display an error.

Each scenario has different requirements, but designing every state separately can lead to inconsistent interfaces and unnecessary duplication.

Challenge

Create flexible components that maintain a clear structure across different user flows.

One structure, three states.

I designed ticket card variants to communicate different booking statuses while preserving the same layout and information hierarchy.

Default: Standard information and available actions.

Selected: Visual indicators to highlight the active selection.

Cancelled: Clear status communication for cancelled tickets.

Consistency across every interaction.

For the Frequent Passenger registration experience, I worked on reusable inputs, selects, and tabs.

The components share consistent spacing, typography, and visual patterns, while their variants communicate different interaction states.

Inputs: Default, focus, filled, error, disabled.

Selects: Closed, expanded.

Tabs: Active, inactive.

From components to complete flows.

These components were used across login and registration screens, connecting different steps of the passenger experience through familiar interaction patterns.

Outcomes & Learnings

Small components, better consistency.

This work contributed reusable UI patterns for ticket management and passenger registration, supporting a more consistent experience across different interaction states.

Beyond Figma, I also made adjustments to existing components in Storybook, which helped me better understand technical constraints and how design decisions translate into code.

Key takeaways

Reusable components need both consistency and flexibility.
Clear interaction states make complex flows easier to understand.
Working closer to code helps bridge design and implementation.

ESP

ENG

Fernanda Vera