ElevaSystem: desenvolvimento e consolidação de um design system para a empresa Media4All

Abstract

This work presents the development of a design system created to address the need for standardizing the graphical interfaces used in Media4all's systems, as the absence of unified visual guidelines had resulted in aesthetic inconsistencies, rework, and a negative impact on user experience. In this context, a Design System named ElevaSystem was developed to promote efficiency, coherence, and integration between design and technology. The main objective of this work is to present and analyze the development process of the Design System, from its conception to the implementation of visual components, highlighting the architectural decisions, methodology, and integration with the teams' workflow. The adopted methodology was based on the Double Diamond model, divided into four stages: Discover, Define, Develop, and Deliver, which guided the information gathering, identification of inconsistencies, construction of components, and delivery of the final documentation. The outcome was the creation of the first functional version of ElevaSystem, composed of color, typography, and iconography design tokens, as well as key atomic components such as buttons, input fields, and the sidebar menu. The visual decisions were supported by the Media4all brand guidelines and references obtained from the Mobbin platform, ensuring a modern and coherent design language. The implementation of ElevaSystem brought significant gains in productivity, consistency, and visual quality, strengthening the company's institutional identity and optimizing collaborative work between designers and developers. As a future proposal, the expansion of ElevaSystem is suggested, including new components and accessibility guidelines, in addition to the creation of an interactive documentation portal that enables real-time updates and supports continuous improvement of user experience and internal company processes.