Rio Tinto
Design System

The Rio Tinto Design System became a need as the company's projects expanded in scope and complexity. With a growing array of products and services, there arose a demand for a cohesive framework that could ensure consistency and efficiency across all design endeavours. It was a methodology for designing digital products based on a hierarchy of complex components divided into stages, where a change at any stage will affects all subsequent ones. This system not only met the immediate requirements but also paved the way for future scalability and adaptability, becoming an integral part of Rio Tinto's design infrastructure.

The Design system was developed with the core intention of ensuring simplicity, familiarity, inclusivity, robustness, and momentum. These five guiding principles were meticulously crafted to lay the foundation for a user-centric approach, where every aspect of design revolves around ease of use, recognizability, accessibility, resilience, and forward-moving energy.

The Visual Language module comprehensively covered various crucial elements essential for effective design, including a detailed exploration of colors and their impact, the use of elevation to create depth and hierarchy, the importance of grids and spacing for structuring content, the role of icons in enhancing user experience, creating effective layout designs, optimizing the use of tables for data representation, and the significance of typography in conveying visual information.

Components

All the standard and UI components were meticulously created, with a keen focus on every detail to guarantee peak performance and effortless assimilation into the system, thereby establishing the bedrock of user interaction. Each component was exhaustively future-proofed, ensuring that they could function autonomously on diverse platforms, thus enabling effortless interlinking for unparalleled versatility. This adaptability empowers teams to leverage standard UI components to construct customized interfaces tailored to their unique project requirements.

Guidelines

After the core components had been carefully designed and developed, it was crucial to craft a comprehensive user guideline. This guide would enable teams to thoroughly review all the components and understand their optimal applications. The guideline also encompassed four essential standards, providing teams with clear insights into the appropriate utilization of each component.

When considering the appropriate circumstances for usage, it is crucial to determine the specific context in which the application is intended. Equally important is recognizing the situations in which it would be unsuitable or counterproductive to utilize the said application. Furthermore, understanding the expected behavioral norms and adhering to established writing guidelines are imperative for ensuring effective and professional communication.

UI Starter Kit

After the Design System was launched, comprehensive research was conducted to gather feedback from the teams regarding its effectiveness and usability. While the dev and UI teams found the Design System adequate, it was noted that product managers encountered challenges due to its extensive and complex nature. Consequently, the UI Starter Kit was developed as a streamlined version of the design system specifically tailored for product managers. This enabled them to efficiently review and initiate projects, facilitating rapid mockups and subsequent collaborative review with UX designers for further design refinement.