B2B SaaS for corporate travel management
Situation
A redesign challenge for a corporate travel management software. The goal was to modernize the main home/dashboard to reduce friction between users and management actions on the platform.
The original product had a confusing architecture, low visual hierarchy, and a lack of basic design standards.
Task
Actions
The project went through 6 non-linear stages. The entire project reflected not only a market-level experience but also a competitive product at the international level. We will go through each of these stages in this case. If you want to see the results, click here.
Creation of core tokens and global UI styles
I researched B2B platforms and UI patterns for dashboards and approval workflows. I used market references and "vibe-coding" tools (GPT + Lovable) to accelerate iterations and validate visual directions.
Style guide
I mapped font patterns, spacings, grids, recurring effects, and iconography to define the foundation of the UI Kit, ensuring consistency across screens and flows.
Primitive tokens
I defined primary and secondary color tokens, documenting state and contrast variations. I based it on WCAG readability and accessibility standards.
I built the first atoms of the system — buttons, inputs, toggles, and selects — defining spacing, radius, and typography variables to facilitate scalability.
Major components
I evolved into composite components (cards, tables, modals, and sidebars), ensuring standardization of layers, tokens, and visual hierarchy within Figma.
Why?
I noticed visual inconsistencies and a lack of standardization in the system components, which made alignment between teams difficult and increased the delivery time of new screens.
For what?
The goal was to build a solid design system foundation, with tokens and reusable components, ensuring scalability, visual consistency, and greater efficiency in development.
What did it result in?
With the atoms and components consolidated, I reduced the iteration and prototyping time, as well as increased visual consistency and clarity between the product flows.
Definition of core workflows
I mapped and built the main flows of the application, defining steps, rules, and interactions to represent the actual functioning of the system and support product decisions.
Set up approving members
Defined the travel approval process, indicating which members needed to authorize requests before the reservation.
Set travel policies
I established the rules that determine which trips could be booked without approval and which required prior validation (e.g., flights above a certain value limit).
High-fidelity prototyping
Current policies screen
TO BE
Home - Dashboard projetado
Tela de políticas projetada
Final validation
I conducted a round of tests focused on visual harmony, consistency, and functional clarity of the product.
In addition to reviewing standards and tokens, I validated critical flows with the product manager to ensure alignment between usability, feasibility, and business objectives.
The result was a scalable visual system that reduced rework and increased the team's confidence in the upcoming iterations.
Results
The new visual language has reduced ambiguities between screens and strengthened the consistency of the experience in complex flows.
With validated tokens and components, the team was able to develop new screens in a more agile and predictable manner.
The style guide served as a framework for future expansions and journey optimizations, facilitating A/B testing and iterations on new features.