Navblue, an Airbus subsidiary specialized in developing software solutions for aviation, entrusted me with the technical responsibility of the Kite Design System for over 2 years. In close collaboration with a Lead UX/UI designer, I designed and evolved this system collaboratively, allowing each Navblue OnBoard project to contribute to it, like an internal open source project.
Kite was developed to unify and accelerate user interface development across all Navblue products. With over 100 components used by 50 developers distributed internationally, this Design System harmonized user experience while significantly reducing development time.
This experience taught me enormously about Design Systems, creating tools to facilitate team work, as well as about the autonomy and decision-making I benefited from as the sole technical expert in this domain.
Table of Contents
A Design System serving aeronautical excellence
Kite is much more than a simple component library: it’s a complete ecosystem designed to meet the critical requirements of the aeronautical domain. Its technical design reflects a modern and rigorous approach, adapted to the constraints of an environment where consistency, reliability and efficiency are paramount.
Technical architecture: QML Plugin and integrated ecosystem
Kite was architected as a hybrid QML plugin:
- Hybrid QML plugin: Optimal architecture combining C++ power for complex processing and QML flexibility for user interfaces.
- Over 100 components: An exhaustive library covering all interface needs, from basic elements to specialized business components.
- Integrated showcase: Standalone application allowing real-time visualization, testing and documentation of all components, facilitating discovery and adoption by teams.
Contribution process: A mastered collaborative approach
I implemented a structured contribution process inspired by open source best practices, adapted to industrial environment constraints.
- Decision diagram: Guidance tool for project teams, allowing quick identification of whether a new component should be created or if an existing solution meets the need.
- Definition of Done (DoD): Rigorous criteria ensuring the quality of each contribution (unit tests, example page, documentation).
- Double review process:
- Technical review: Validation of code quality, performance and integration by myself.
- Design review: Validation of UX/UI consistency by the Design System Lead UX/UI.
- Organizational flexibility: Depending on team bandwidth, development either by the project team or by myself.
Quality and testing: A rigorous approach
With reliability being crucial in aeronautics, I implemented a comprehensive testing strategy:
- Systematic unit tests: Each component has its own automated UI tests, guaranteeing non-regression.
- Documented example pages: Each component comes with concrete usage examples, facilitating adoption and reducing implementation errors.
- Continuous validation: Integration of tests in the CI/CD chain for automatic validation at each contribution.
CI/CD and deployment: Complete automation
The Design System also benefited from an automated deployment infrastructure:
- GitLab CI: Automated pipeline for building, testing and deployment
- Conan: Dependency management and Design System distribution as a package
- Automatic Showcase deployment: Immediate availability on client iPad for validation
- Release notes: Evolution documentation at each version
Training and support: An international dimension
My role extended well beyond technical development, including a strong pedagogical dimension at international scale.
International technical training
- French team training: Regular support of local project teams in using the Design System through formal and informal presentations, support, etc.
- International QtQuick/QML training: Video conference sessions with Canadian teams to strengthen their technical skills
- Indian team support: Face-to-face training of Indian developers who came to France to develop skills on Mission+
- Continuous evangelization: Animation of regular sessions to present innovations, best practices and promote Design System adoption
Technical challenges and growing autonomy
This experience confronted me with a major challenge: being the sole technical expert in a critical domain. This situation forced me to develop strong technical autonomy and advanced problem-solving capabilities, as in case of blocking issues, no external support was available.
Impact and adoption: From resistance to success
Progressive adoption strategy
Design System adoption didn’t happen naturally. I had to develop a political and pedagogical approach:
- Initial resistance: Development teams were not initially enthusiastic about using the Design System
- Influence strategy: Implementation of a progressive approach combining benefit demonstration, training and personalized support
- Successful homogenization: Widespread adoption and practice harmonization across all Navblue projects
Concrete results
- 50 developers active users of the Design System
- UX/UI consistency guaranteed across all Navblue OnBoard products
- Development acceleration through reuse of proven components
- UI bug reduction thanks to tested and validated components
- Maintenance facilitation through component centralization
Image gallery
