top of page

Unified Experiences: Crafting the EGS Design System

EGS Sistemas

Design System

15.png

Duration

3 months

My Role

Ux / Ui Design

Resposabilities

Research 
Interface design

Tools

Figma, Notion

User-Centered UI/UX Framework

We focused on implementing user experience-based components and comprehensive documentation in Notion. Our goal was to streamline the user interface design and improve consistency across all EGS Sistemas platforms.

The Problem: Time-Consuming Development Process

Before this initiative, each project at EGS Sistemas required building new components from scratch for every app, website, or system. This repetition led to extended development times and inconsistencies across products. Recognizing this inefficiency, we sought a way to standardize the design approach, allowing faster implementation and ensuring cohesion across the board.

image.png
image.png
image.png
image.png

Solution: Structuring the EGS Design System

To resolve these issues, we built a structured design system. Each component was organized into dedicated pages, providing detailed explanations and guidelines for EGS developers. This ensured that the team had a clear, documented reference when building interfaces, reducing ambiguity and development time.

imagem_2024-10-19_161335855.png
image.png
image.png
image.png

Style Guide Implementation

The visual identity of EGS Sistemas formed the foundation of the style guide. We prioritized intuitive actions and usability best practices, ensuring users could navigate smoothly across all interfaces, from apps to websites to enterprise systems.

image.png
image.png

Component Structure & Documentation

  • Unique Component Naming: Every component was given a distinct name, minimizing the chance of miscommunication between designers and developers.
     

  • State Variations: We established default states and outlined how each component should behave under different scenarios, allowing for flexible yet consistent interactions.
     

  • Annotations & Descriptions: Each page included notes and detailed descriptions to clarify the component’s purpose and functionality.
     

  • Responsive Design & Breakpoints: Developers were provided with precise breakpoints and size indications, enabling components to adapt seamlessly across different screen sizes.

bottom of page