As part of my final project for the UI Design course at Coderhouse, I developed a comprehensive design system for MODO, a leading financial platform in Argentina. This project focused on applying Atomic Design principles to create a scalable and cohesive system, enhancing user experience and interface consistency across the application. The documentation encompassed detailed guidelines and reusable components, ensuring a unified and efficient design approach for MODO's digital products. Category: UX UI Design - Design System.

Client: Coderhouse

Year: 2024.

Developing a Design System for MODO is crucial for ensuring a consistent and efficient user experience. This system unifies all design elements, from interface components to style guidelines, facilitating collaboration among teams and maintaining visual and functional coherence across the application.

Visual and Functional Consistency.

Development Efficiency.

Product Scalability.

Enhanced Cross-Disciplinary Collaboration.

The primary challenge in creating the Design System for MODO was to meticulously document each visual element of the application. The objective was to build a comprehensive library in Figma, encompassing reusable components, text styles, color palettes, and usage guidelines. This documentation serves as a reference for designers and developers, ensuring consistency and efficiency throughout the design and development process.

Comprehensive Component Documentation: Recording each visual element with detailed information on its usage, variants, and behaviors, facilitating implementation and maintenance.

Development of a Figma Library: Creating an organized collection of reusable components in Figma, enabling quick adoption and adaptation in future projects.

Creation of an Interactive Prototype: Building a functional prototype that demonstrates the practical application of the Design System, validating its effectiveness and usability in real-world scenarios.

Developing the Design System for MODO provided me with essential knowledge that has been a key asset in my career as a UX/UI Designer. This practice enabled me to create pixel-perfect design components with precise application of auto-layout in Figma, optimizing consistency and efficiency in my projects. This experience not only enriched my technical skills but also provided a deeper understanding of the importance of consistency and efficiency in designing digital products.

Design Consistency: Implementing a Design System ensures uniformity across all visual elements, strengthening brand identity and enhancing user experience.

Development Efficiency: Having reusable and well-documented components accelerates the design and development process, allowing for faster delivery of features. 

Product Scalability: A well-structured design system facilitates the adaptation and expansion of the platform, ensuring new elements integrate coherently. 

Improved Collaboration: Clear documentation and organization of components in Figma enhance communication between designers and developers, reducing misunderstandings and improving team efficiency.