top of page

Luan Pinto

Group 663.png

UI/UX Adaptation and Visual Governance in Complex Contexts

My Role

Product Designer

Core Focus

UI Designer responsible for visual recreation, Design System application, and adaptation for diverse usage contexts.

Key Tools

Figma

Photoshop

Illustrator

Adobe XD

Key Outcome

Strong reinforcement of brand visual consistency, interfaces successfully adapted for complex contexts (legacy, touch, high-density data).

Challenge and Task

The Challenge: The primary challenge was ensuring visual governance and coherence across products with vastly different constraints: from a legacy system (MEURH) with technical limitations to high-visibility touch interfaces for live events and dense management dashboards.

​

The Task: My task as the UI Designer was to strategically apply and extend the company's Design System across multiple platforms, solving specific UI/UX frictions and ensuring the final visual experience was modern, accessible, and functional in every context.

 
Visual Recoding of MEURH (Legacy System)

  • Challenge: Visually update all screens of the MEURH legacy system while working within the TOTVS platform constraints, balancing native standardization with the need for modern design.

​

  • Actions: Applied the Design System rigorously; creatively adapted components to circumvent technical restrictions; maintained constant alignment with the engineering team.

​

  • Visual Outcome:

image (13).png
image (14).png
Landing Page and Interactive Event Interface (Touch Context)

  • Desafio: Adaptar soluções jurídicas convencionais para apresentação impactante em uma feira de tecnologia, usando smart TV touch. A interface precisava ser clara, interativa e altamente visível em grande escala.

  • Soluções:

    • Redimensionamento de elementos e reorganização de componentes para facilitar a interação por toque.

    • Criação de pontos focais e hierarquia visual adaptada para alta visibilidade à distância.

    • Testes de visibilidade e usabilidade com o time de Marketing e Eventos.

  • Resultado:

Jurimetria itens selecionados.png
Frame 26087059.png
Tela de sucesso legal ops 6.png
Erro.png
Managerial Dashboard Indicators (High Data Density)

  • Challenge: Create a visually intuitive and customizable tool to monitor dense operational results, ensuring readability without visual clutter.

  • Actions: Utilized dynamic charts and semantic colors to translate KPIs into clear visuals; developed a modular interface supporting user customization; established clear visual hierarchy.

  • Visual Outcome:

2.png
Landing Page – Integrated Platform (Strategic Communication)

  • Challenge: Communicate a complex, integrated legal ecosystem through a fluid visual experience, strongly aligned with the brand's positioning.

  • Actions: Implemented a modular structure; used a clear visual hierarchy (titles, subtitles, highlights) to guide the user through complexity; applied strategic use of color and iconography to reinforce clarity.

  • Visual Outcome:

001.png
002.png
Conclusion and Learnings

Key Learnings:

This compilation proved that while the Design System is essential for speed, the true value of the UI Designer is in contextual adaptation. Whether dealing with legacy constraints or high-density dashboards, the ability to translate complexity into visual clarity using hierarchy, color governance, and responsive design is the key driver for project success and brand consistency.

Next Steps:

  • Contextual Guidelines: Formalize guidelines within the DS for adapting components to non-conventional contexts (e.g., touch, data density), ensuring scalability across the design team.

bottom of page