Context

In our endeavor to preserve the high standards of the Qonto app and foster team collaboration amidst rapid expansion, the introduction of a design system enabled us to achieve significant milestones:

• Enhance Consistency: We elevated the user experience by simplifying navigation and comprehension across our offerings.

• Boost Efficiency: We streamlined the design-to-development workflow, significantly cutting down the time and resources required for launching new products and features.

• Foster Collaboration: A common language and guidelines were established for all team members, enhancing communication and teamwork across different disciplines.

Deliverables

App Inventory

A thorough review of our current components, including UI elements, typography, and color schemes, was conducted. This helped us determine which components could be reused or needed updates or redesigns.

Usage Analysis

We analyzed how current components were utilized within our app to pinpoint any design inconsistencies or gaps that our system needed to address.

Figma UI Libraries

We developed a user-friendly and adaptable system by organizing our library into smaller, more manageable collections.

• Foundations: We set digital branding guidelines that would inform the creation of components, patterns, and screens.

• Components: We crafted reusable and versatile UI building blocks, linked to the Foundations styles library, to facilitate interface design.

• Templates: These components were assembled to create generic screen templates for the product.

System Documentation

We meticulously documented our system, including components, styles, patterns, etc., utilizing zeroheight and notion. This ensured a cohesive and dependable reference for designing and developing features.

Implementation & Maintenance

Our design system was applied across all products and services, with comprehensive training provided to all teams to ensure effective usage. Regular updates and maintenance were established to keep the system current and effective.