The single source of truth which unifies all the building blocks and enables Product, Engineering & Design teams to design, develop and test any HighRadius platform/product and rapidly fulfil business requirements.

The kit comprised of sub-libraries(the building blocks of HiRa):

1. Tokens - Tokens are the base building blocks of HiRa and contain all the values needed to construct and maintain it — spacing, color, typography, elevation, etc. — represented as data. These can represent anything defined by design: a color as a HEX value, a spacing as a number.
2. UI Elements - Two or more Tokens together form a UI Element.
3. Components - UI Elements along with Tokens form Components.
4. Component Groups - Components, UI Elements and Tokens together to form a Component Group.
5. Icons - Icon set
6. Data Visualisation - Charts and graphs

The kit allowed not just the designers but also the product managers to quickly create product concepts/features as per the requirements. Earlier the PMs were creating rough mocks for concepts using Google Slides. Allowing the PMs to move around items with more confidence and explore newer features too.

This was a site shared across the org to provide access to HiRa component libraries(Code and Design). Developers could now find code snippets of components they want to consume and use them directly in their code or even customise the properties as per their needs. Every component and it’s variations were supported with detailed documentation of the properties and arguments.

• Table of Contents
• Description
• When and where to use
• Anatomy
• Properties
• Variations
• Building Blocks

A Roadmap of 2 years for the design system

The playbook is supported with instructional videos and ways of working for different teams. Success could be assessed by observing the following:

1. Familiarity - Complete knowledge of The HiRa Design System, their properties and delivery status
2. Contribution - Being able to create new HiRa artefacts or add new properties to the existing system.
3. Management - Updating HiRa with contributions made by the team.
4. Delivery Speed - Being able to rapidly create CRUD and Non-CRUD screens and components within.
5. Process - Workflow followed for using HiRa and delivering to engineering teams.
6. Iterating - Perform quick iterations to the Visual Design
7. Compliance - Test for the quality of HiRa adoption by product teams

To create and use human readable CSS tokens which leveraged the architecture of the design system. Allowing for override and removing dependency from the teams maintaining HiRa.

To create and use human readable CSS tokens which leveraged the architecture of the design system. Allowing for override and removing dependency from the teams maintaining HiRa.

1. Enable / Access / Explore HiRa (6m 51s)
2. Create Mockups using HiRa (7m 12s)
3. Build Custom Components using HiRa (7m 27s)
4. Adding Changelog (2m 51s)
5. Creating and adding Documentation (2m 28s)
6. Ideas and Suggestions ~ Crowdsourcing (1m 30s)
7. Versioning (2m 15s)
8. Audit Components (2m 15s)
9. Using the Wireframe Kit (5m 17s)
10. Branching & Requesting Review (4m 6s)
11. Approve, Merge, Publish updates (3m 25s)

Understanding what every team wanted to achieve while going about their day to day jobs was crucial to this project.

I started by setting up product walkthroughs from Product Managers of every product to understand their needs. We also had walkthroughs of existing design system libraries available in figma and code.

We then set out to list component groups that were crucial to every product and how these could be used as a starting point to bring the design system to life. These super 7(as they came to be known) component groups were made up of more smaller components and UI Elements, which gave us a first list of building blocks required to architect this service.

These set of initial components could be used to create a basic app shell and logic. This was to be built ground up, therefore giving us the opportunity to make the system not only consistent but also legible and self-explanatory by creating conventions for naming css tokens, components and maintaining change logs.

Identified the next set of components and variations to be built out in phases. We were able to create as well as test due to onboarding one of the products looking to take the first step in gaining consistent UX. We worked closely with the Product Managers and Engineers to recreate the user flows and product features using the new building blocks.

These components were then passed to the UX team for that particular product to study and understand design system usage, such that they could focus on exploring solutions rather than worrying about having a consistent button.

A walkthrough of the system was set up to familiarise the Product Management, Engineering and UX teams with the system and the required workflows.

Understanding how the Product managers worked with the teams and what different kind of assets and tools the engineering and design teams had access too helped in creating an accommodative workflow. A design system is a growing organism and this one would be built to scale and accommodate changes and updates.

A separate library of a wireframe kit for Product Managers and the UX team would also be needed such that designers can get consensus from all stakeholders by just using wireframes before jumping in to create Visual Design.

Guided design, product and engineering teams of different Highradius product to adopt and implement into their products.

A separate library of a wireframe kit for Product Managers and the UX team would also be needed such that designers can get consensus from all stakeholders by just using wireframes before jumping in to create Visual Design.

Guided design, product and engineering teams of different Highradius product to adopt and implement into their products.

Creates a unified design language within and between cross-functional teams.

A whole and a collection of parts at the same time using Tokens as intents.

Creates visual consistency across products, channels, and (potentially siloed) departments.

Flows and features need to be created at larger scale and higher speeds.

Design team needs to leverage a robust design systems to manage designs at scale.

Alleviates strain on design resources to focus on larger, more complex problems

All product experiences are WCAG AA conformant

Design and development work can be created and replicated quickly and at scale.