Collaborative Excellence: Developing Orange's Unified Design System
UX/UI Design, Product Design, Design system
The problem
Orange required an overarching company design system that encompassed iOS, Android, and web platforms. The goal was to establish a unified and consistent design language across all digital products and services. This included addressing the fragmentation and inconsistencies found in various applications such as Orange Money, Orange Money Pro, and Orange Bank. Each application had unique screens and components for similar functions, complicating the development and maintenance processes, and resulting in a fragmented user experience.
The solution
To address this issue, we embarked on a project to create a comprehensive design system specifically tailored for Orange's fintech applications. The focus was on developing financial components that could be universally applied across various platforms (iOS and Android) and applications within the Orange ecosystem. The design system aimed to standardize components such as account screens, PIN pad screens, and common user flows like money transfer and top-up, while accommodating unique use cases through specialized components.
In depth case study below.
My role
In this extensive and collaborative project, my role was specifically focused on the fintech components of the design system. I was pivotal in creating and standardizing the financial components and modules. I worked on both Android and iOS platforms, leveraging Google Material 2 and Apple Human Interface guidelines to ensure platform-specific standards. I was responsible for:
Component Standardization: Cataloging and unifying components across different applications.
Icon Unification: Standardizing and creating a comprehensive library of icons.
Advisory Role: Providing advice on certain aspects of the design system beyond fintech components.
Collaboration: Working closely with designers, developers, and product managers to brainstorm and implement ideas.
My collaborative efforts helped in evolving the design system into a comprehensive toolkit.
Research
The initial phase involved thorough research and analysis of all existing fintech applications within the Orange ecosystem. Each application's components were meticulously cataloged based on their usage and appearance. This research revealed that while top-up screens across different products appeared similar, they employed unique components. By grouping these components into smaller, more manageable sets, we identified opportunities to create a unified style that could be seamlessly integrated into the design system. Unique components specific to certain use cases were labeled as "snowflake" components, ensuring they were distinctly identified and appropriately handled.
Goals
Consistency: Establish a uniform design language across all Orange fintech applications.
Efficiency: Streamline the design and development process by providing reusable components.
User Experience: Enhance the overall user experience by providing a cohesive and intuitive interface.
Scalability: Ensure the design system could easily accommodate new features and applications.
Pain points
Inconsistencies: Variations in design across applications created a fragmented user experience.
Maintenance: Managing and updating disparate components was time-consuming and prone to errors.
Collaboration: Coordinating design efforts across multiple teams and platforms was challenging.
Security: Ensuring secure and uniform PIN entry screens across different applications.
Ideation
We conducted brainstorming sessions and workshops with key stakeholders, including designers, developers, and product managers, to generate ideas for the design system. The ideation process focused on identifying core components that could be standardized and reused, as well as defining the visual and functional guidelines for these components. Special attention was given to the design of the secret code/PIN entry screens to ensure they met security requirements while providing a consistent user experience.
High fidelity design
The high fidelity design phase involved creating detailed, pixel-perfect mockups of the standardized components. These designs were rigorously tested across various devices and platforms to ensure they met usability and accessibility standards. The unified design included a comprehensive library of icons, ensuring consistency and clarity across all applications. Custom icons created for specific fintech projects were also included in the library, providing a robust and versatile set of design assets. Additionally, the design components for both Android and iOS were developed following the Google Material 2 and Apple Human Interface guidelines, respectively. This ensured that the design system adhered to platform-specific standards, enhancing the native experience for users.
Collaborative Work and Evolution
Our collaborative approach included weekly meetings where we discussed and analyzed components, categorizing them based on necessity and usage. Through my collaborative work on this project, the design system continued to evolve into a comprehensive toolkit that includes:
Components: Standardized UI components for both iOS and Android platforms.
Typography: A consistent set of typefaces, sizes, and styles.
Color Palette: A primary and secondary color palette for uniformity.
Spacing and Layout: Guidelines for margins, padding, and overall layout structure.
Interactive Elements: Standardized buttons, forms, and other interactive components.
Accessibility: Ensuring all components meet accessibility standards.
Documentation: Comprehensive guidelines for using the design system.
Version Control: A system for managing updates and changes to the design system.
As I left the project, the system evolved into a Zeroheight-managed website, several Figma libraries, and code snippets. This collaborative effort culminated in the Orange Design System winning a prestigious Red Dot Award, recognizing its excellence in design and usability.
Conclusion
The development of the Orange fintech design system successfully addressed the inconsistencies and inefficiencies present in the initial applications. By standardizing components and creating a unified design language, we enhanced the user experience and streamlined the development process. The design system not only improved collaboration among teams but also ensured that new features and applications could be integrated seamlessly. The success of this project underscores the importance of a well-defined design system in creating cohesive and scalable digital products.