Digital Product Design System
Building a living design system for Aditya Birla Capital
Project and its problems
Solving the multi party challenge
The benefits for stakeholders
Team behind Execution
Phases of Execution
The ABC Design System
As a fully responsive and mobile-native web application – the Wiki that hosted the Design System is currently accessible from anywhere, using any device, running on any platform – ensuring stakeholders can always refer to and rely upon the resources contained within the System.
This product to make products allowed teams to bolt from idea to implementation much quicker than ever. Half the job was always ready to pick from.It had the added benefit of also unifying the look and feel of ABC’s digital products – helping project the ‘One Brand for All Your Financial Needs’ philosophy behind Aditya Birla Capital.
The system fulfilled the promise to adapt the existing new brand onto its digital products. How that translated were visible in the use of typography, proprietary images, icon styles, tone of voice, grid systems, color palette usage, support touchpoints, customer education etc.
As is customary for any living design styleguide, we designed and developed an extensive component library with Buttons, Text Fields, Tooltips, Accordions, Carousel, Data representations and many more, along with their interactive variations.
One of the motives behind building this living style guide was to enable the many different dev partners of ABCL and its LoBs to access it for component code snippets as a single source of truth. This allowed cross vertical standardisation and completeness of state for all components necessary to build pages.
In our case, the users were going to be a lot of developer teams with diverse background and product teams with various depths in product and design understanding. That made it plenty clear that the documentation needed to be crisp, non technical (as far as possible) and non ambiguous.
A major part of tying together all the rules, guides and constraints towards a coherent book of truth is actually writing all that down in the simplest possible format so the users of the system don’t need assistance while accessing the System.
Given the nature of the various businesses involved, certain product components like forms, multi stage onboardings, KYC authentications, navigation etc were a common occurrence across LoBs. This drove the need to establish singular, optimized usability guidelines for all such experiences for all LoBs, so users have a coherent experience irrespective of the entity they are interacting with, under ABCL.
The design system was built for web, android and iOS platforms. Since some of the teams within the group deployed their apps as hybrid products on Cordova, we made sure they were heard when the system was being built.
Implementation and Handholding
Having created the Design System, we demonstrated best practices on actual pages to show how design standards can be maintained using components off the System.
We redesigned the dashboard and landing experiences for major lines of businesses to assist them through the implementation of the systems and its guidelines keeping in mind standard modern user experience guidelines and the business needs.
It’s easy for a product’s design to go wrong if a team can’t simply apply the system in their work. Hence some basic guard-rails were important to execute as examples.
Most lines of businesses within ABCL frequently built and pushed landing pages for campaigns, new products, support etc. While the system gave them all the building blocks to build them we realised it’s actually critical to show examples of real usage of the system on full pages going well beyond widgets like signup, contact etc.
Expecting consistency in user experiences implied ensuring best practices on actually journeys and customer touch-points across the board.
We worked with the group’s brand team to execute well thought out experiences which served as guidelines for the respective businesses.
To make that happen we did additional interviews with all stakeholders across the LoBs and understood their business specific requirements from them.