top of page

Design System

Complete design system with visual and functional fundamentals, including colors, typography, spacing, grid, elevation, and component states.
Delivery focused on consistency, scalability, efficiency, and a strong visual identity in the development and evolution of Vision Portal's digital interfaces.

ENTERPRISE

ISH Technology

YEAR

2024

PAPER

UX/UI Designer

PRODUCT

Vision Portal
cover.png

OVERVIEW

Vision was growing as a platform, but without a consistent visual foundation. There was no design system, style guide, or unified visual identity: components varied between screens, visual decisions were made on an ad-hoc basis, and the experience depended heavily on who was developing it at the time.
This resulted in:

  • visual inconsistency between modules,

  • increased cognitive effort for users,

  • low design and development efficiency,

  • The difficulty of scaling new features while maintaining quality.

THEN...

How do you create consistency, identity, and efficiency in a product that's already in operation, without interrupting deliveries, and without time for in-depth branding research, while still ensuring defensible, scalable visual decisions aligned with the target audience?

INVESTIGATION

  • Assessment of the current state: mapping of inconsistencies in UI, colors, typography, and interaction patterns;

  • Demographic analysis: users are predominantly between 25 and 40 years old, have a technical profile, handle a high volume of information, and are involved in decision-making.

  • Desk research focused on visual and cognitive cues that generate: a sense of control, clear data interpretation, and confidence in complex environments.

RESTRICTIONS

  • Product in active use (without "visual reset");

  • Limited time for in-depth qualitative research;

  • Technical B2B audience, but not designers (security/cybersecurity);

  • The need to create something quick, but durable;

TRADE-OFFS

  • I prioritized consistency and a solid foundation before aesthetic variations;

  • Focus on reusable components, even if they are less "customized" initially;

  • Aesthetics in service of legibility and scale, not decorative branding.

SOLUTION

With no time for traditional branding, the decision was made to anchor the visual system in a strong and coherent concept.
Chosen concept: Functional retrofuturism . An aesthetic that combines:

  • Technology and a vision for the future;

  • Familiar visual references (reduces unfamiliarity);

  • Strong clarity, contrast, and hierarchy for data interpretation.

From this, I created the Vision Design System from scratch , including:

  • Visual identity (concept, principles and application);

  • Color palette (primary, secondary, semantic and state colors);

  • Typography (hierarchy, legibility, and use in dense data);

  • Grid and spacing;

  • Basic components and compounds;

  • Interaction patterns and states;

  • A documented style guide, explaining the rationale behind each decision.

EXAMPLES

Click on the images below to enlarge them.

IMPACT

  • Significant acceleration of deliveries: prototyping and development began to follow clear standards, reducing repetitive decisions and ambiguities.

  • Faster design: new screens and flows are now being prototyped much faster, with consistent reuse of components and layouts.

  • Faster development: standardized components facilitated handoff and implementation, reducing rework and discrepancies between design and code.

  • Consistency at scale: new features could be created without "breaking" the existing experience.

  • Single basis for decision-making: design system as the source of truth for UI, interaction, and visual identity of Vision.

  • Product designed for growth: more deliveries, more modules, and more complexity without losing coherence.

LEARNINGS

  • The importance of defining solid fundamentals (colors, typography, spacing, and states) to ensure visual consistency and reduce rework in design and development;

  • How a well-documented design system improves product scalability, facilitating the creation of new screens and collaboration between designers and developers;

  • The value lies in considering accessibility, component states, and variations from the outset, creating clearer, more inclusive, and resilient interfaces for different usage scenarios.

bottom of page