This project focused on creating a comprehensive design system for Direção Concursos, a leading EdTech platform specializing in preparatory courses for government positions. The goal was to equip the development team with standardized and reusable components, enhancing development efficiency and ensuring a consistent user experience across the platform.
We began by conducting a thorough analysis of the existing platform, mapping out its core components. Particular emphasis was placed on elements with the most significant impact on the student's learning experience, such as:
• Grid System: Establishing a clear and flexible grid system provides a structured foundation for laying out various UI elements.
• Color Palette: Defining a cohesive color palette ensures visual consistency and reinforces Direção Concursos' brand identity.
• Button Styles: Standardized button styles create a familiar and intuitive interaction experience for users.
• Module Navigation: A well-designed navigation system allows students to effortlessly navigate between learning modules and resources.
Following the identification and prioritization of key elements, we developed a library of reusable components. These components incorporated various design patterns and standard variations, including:
• State Variations: Defining states such as default, disabled, hover, focus, and error for interactive elements like buttons ensures clear communication with users.
• Light/Dark Mode: Implementing light and dark mode variations caters to user preferences and allows for a more comfortable viewing experience in different environments.
By establishing this design system, we aimed to empower the development team with a robust set of tools to build a user-friendly and visually appealing platform for Direção Concursos' students.