The R3 tooling design system is an ecosystem of guidelines, architecture principles, components, patterns, and processes that satisfy the needs of R3 and the Corda developers. It enables teams to collaborate and build, guided by the same standards and principles. It’s a cross-disciplinary platform that streamlines the development process.
The Client
- Objective: To design and develop the R3 design system in order to unify the look and feel of the corporate website, partner and community websites, different presentation and communication materials.
- Services: UX design, Front-end development, Testing and User adoption.
- Results: R3 tooling design system ensures a functional and well-structured interface with consistent UI through different projects and applications, accessible and intuitive with well-performing in high-risk scenarios components.
- Industry: Technologies, Blockchain
- Year: 2020
The Challenge
R3 is a global technology company focused on the Corda blockchain platform and solutions development. Addressing the need for a unified solution for all its corporate and partner resources, including websites, different presentations and communication materials, we dedicated our knowledge to developing a client-centralised design system satisfying the needs of R3 and the Corda developers without compromising any of them.
The Solution
- Ecosystem of guidelines.
The R3 tooling design system is an ecosystem of guidelines, architecture, components, patterns, and processes to satisfy the needs of R3 and the Corda developers. The cross-disciplinary platform simplifies the development process enabling teams to build exceptional products faster by using clear reusable designs. - Ensure scalability and efficiency
Design debt is the overabundance of non-reusable and inconsistent styles and conventions, and the impossible task of maintaining them. By ensuring a scalable and efficient design tooling system we not only cut down the weight that slows growth but also let R3 products expose their full potential. - Optimise processes
Optimising development processes lead to a reduction of cost, effort, and resources required to build a new product. One of the best pros of the design system is the reduction of lines of code to scantly a few characters. Standardising naming conventions, accessibility requirements, and file structure help teams work consistently and prevent errors. - Create consistency
The consistent usage of standardised components ensures the creation of more predictable and convenient applications. Not only that but favors the developers in the creation of quality-assured products.
The process behind the system
- Research and analyse
Defining the R3's priorities and the desired outcome of the solution. - Set principles and standards
Defining accessibility, scalability and consistency standards. - Inventory list
Defining the final list of components, their variations, styles and applications. - User experience and interface
Defining and designing the user experience and interface with the design toolkit. - Front-end development
Developing the solution library and components by meeting all standards and expectations.
Agile approach
By using an agile approach, we separated the project into one or two weeks sprints. The design and development stages ran simultaneously, ensuring the delivery of ready components at the end of each sprint.
Technologies
- HTML 5
- CSS 3
- JavaScript
- Python
The Results
As a result, the design system ensures that:
- Interface is functional, well structured and logically organised.
- UI is consistent through different projects and applications.
- Applications are accessible and easy to use.
- Interface development is fast and frictionless.
- Components behave well in high-risk scenarios.
Explore R3
Аn enterprise blockchain software company developing Corda, an open-source blockchain platform, and Corda Enterprise, a commercial version of Corda for enterprise usage.
