Rio Tinto
Design System
-
Introduction
Brief: Build a scalable design system to unify Rio Tinto’s digital products and speed up delivery.
Challenge: Inconsistent UI, rework, and slow prototyping across teams.
Goals: Consistency, efficiency, and a toolkit everyone actually wants to use.
-
Discovery Phase
Stakeholder interviews: Product, dev, and design leads flagged pain points with duplication and lack of standards.
Business requirements: Must scale, be easy to update, and support multiple brands/products.
User needs: Designers/devs want reusable components, PMs want quick-start kits, everyone wants clear docs.
-
Problem Framing
Problem: Teams waste time reinventing UI and struggle to keep things consistent.
Success: Anyone can build a new screen fast, and it always looks/feels “Rio Tinto.”
Constraints: Needs to support web/mobile, lots of legacy products, and changing branding.
-
User Research
User interviews: Designers/devs/PMs shared what works (and what doesn’t) in other systems.
Competitive analysis: Looked at other enterprise design systems for best practices.
Market research: Modularity, documentation, and starter kits drive adoption.
-
Synthesis
User personas: “The System Builder,” “The Reluctant Adopter,” “The Product Owner.”
Journey mapping: From new project kickoff to shipping a feature using the DS.
Key insights: Docs need to be dead simple, and components have to work out of the box.
-
Solution Development
Info architecture: Core principles → visual language → component library → guidelines.
Wireframes & prototypes: Multiple iterations on component structure and visual style.
Visual design system: Built for simplicity, flexibility, and accessibility.
-
Testing
Usability testing: Designers and devs tried building real screens—flagged missing states and unclear docs.
User feedback: Added a UI Starter Kit for PMs, improved docs, and made components more flexible.
Iterations: Refined visuals, added usage examples, and streamlined onboarding.
-
Implementation
Handoff: Provided a living style guide, code repo, and docs.
Dev collab: Weekly syncs with engineering to keep things in sync and squash bugs.
Go-to-market: Rolled out via team demos, onboarding sessions, and Slack support.
-
Results & Impact
Metrics: Faster project kickoffs, higher design consistency, and more teams using the DS.
User adoption: Designers and devs adopted the system for new and legacy work.
Business impact: Less rework, faster delivery, and a unified Rio Tinto digital brand.
Lessons learned: Docs and starter kits are just as important as the components themselves.
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.