Design systems are essentially collections of rules, constraints and principles, implemented in design and code. These 3 attributes serve distinct functions and provide coherent, systemic order in systems from buttons to single page applications.
The purpose of design systems are essentially to allow cohesion and coherence across digital properties developed and owned by a brand. The existence of a single source of truth in terms of building blocks that make products like components, colors, fonts, imagery, brand tonality (and more) allows developers and designers to independently build products with minimum assistance while ensuring coherence across properties.
The need within Aditya Birla Capital : One Brand, Multiple Businesses
During late 2017, ABC had relaunched it’s brand as a family of four verticals : Protecting, Investing, Financing and Advising. Each vertical had multiple lines of business and given their through the years, their own brands in the eyes of their respective customers.
While the rebranding exercise built a comprehensive visual communication system for all verticals, there still was a visceral need to standardize all products owned by the Line of Business (LoBs). There were over 20 different products on web, android and iOS platforms under these LoBs.
The presence of all such products drove the need for a comprehensive and living design styleguide for digital products for the LoBs.
A shared language that Product Managers/Owners, Designers & Engineers across Aditya Birla Capital Limited (ABCL) can refer to when explaining objects and processes, thus reducing ambiguity and confusion.
A clear set of guidelines outlining the use of colours, type, imagery, iconography, motion & interaction with the objective of unifying and projecting the Aditya Birla Capital brand across all of its digital properties.
Shared design resources in the form of UI Kits – to quickly create designs & mock-ups that not only accurately reflect the guidelines, but also account for best practices from the fields of User Experience and Human Factors.
Shared code components and development resources to allow engineers to quickly build and re-use. A convenient and scalable way to build.
Over the course of 3 months of intense and focussed activity, Canvs Club translated an exhaustive set of Brand Guidelines into a modern, scalable and reusable Design System along with design assets and development resources to help accelerate the pace of product design and development at Aditya Birla Capital Limited.
The ABC Design System exists as a nuts-and-bolts-included toolkit of Design & Dev resources – designed and engineered for rapid prototyping and deployment.
This allows teams to go from idea to implementation much quicker than if every component and interaction pattern were to be created from scratch.
This has the added benefit of also unifying the look and feel of ABCL digital products – helping project the ‘One Brand for All Your Financial Needs’ philosophy behind Aditya Birla Capital.
As a fully responsive and mobile-native web application – the Wiki that hosts the Design System is 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.
A set of rules were laid down to explain to anyone starting off with the design system to understand basic principles and guides to stick to while using it. This established the goals for the design system, general principles for design like usage of images, visual hierarchy, responsiveness/adaptiveness, caching etc. The intention was to keep the guide as a method of execution as well as learning.
Brand guidelines for product
While the key components for marketing communications were set by the Brand team of ABCL, we set out to define brand adaptive guidelines for voice and tone, iconography, grid, typography 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 variations.
Fully Interactive Components with Code
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 standardization and completeness of state for all components necessary to build pages.
Wireframes to Establish Common product use cases guidelines.
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.
iOS and Android Components
Given the nature of the various businesses involved, certain product components like forms, multi stage onboardings, KYC authentications, navigation etc were a common occurence 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 which entity they are interactions with under ABCL.
Hear from the users
Sr. Chief Manager – Product Management & Digital Analytics | Aditya Birla Capital Limited
“Having worked closely with the team at Canvs right from the inception of the project all the way to hand- over and eventual implementation across ABC – I’m happy how the Digital Design System has allowed us to handle systemic UI issues and has also brought improvements in the User Experience across ABC.
The Design System allows digital teams across ABC to ideate on different UX journeys with the convenience of having access to a full library of UI components to piece together like LEGO blocks.
As our digital journey evolves over time, I’m looking forward to the possibilities and affordances it allows to design and deploy digital assets across ABC.”
Associate Vice President Marketing | Aditya Birla Sun Life Asset Management
“As a primarily digital business – ABSLAM or ABC Mutual Funds has invested significantly into deploying and scaling digital products. These products range from corporate websites to marketing and campaign driven micro-sites all the way to native & hybrid apps across both major mobile platforms (Android & iOS).
The ABC Design System, or Wiki as we call it internally, has allowed us to accelerate the speed at which ideas can go from inception to production ready. From mocking up simple wireframes to quickly creating new flows or sub- processes, the design assets and development resources contained in the Wiki allow us to move fast and experiment.
In addition it has brought in many small but critical optimizations to existing features and functionalities contributing to an improved user experience across digital products under the aegis of ABSLAM”