During late 2017, Aditya Birla Capital had relaunched its brand as a family of four verticals : Protecting, Investing, Financing and Advising. Each vertical had multiple lines of businesses and most of these businesses had built reputable, lasting brands for themselves. Additionally, these brands looked fairly different from each other and naturally had varyingly different customer experiences. A fusion exercise like this typically aims at unifying all sub-brands under the same umbrella of principles, culture, customer experiences and brand promise.

It shouldn’t matter which part of the business you are engaging with, the customer should believe she is experiencing the same brand through its impeccable delivery of promised experiences, digital or otherwise.

While the rebranding exercise built a comprehensive visual communication system for all verticals establish comprehensive Marketing Communication Guidelines, there wasn’t any definitive digital product guideline created to allow differently-abled and distributed product teams to build cohesive and synchronised digital customer experiences. There were a total of over 20 different major products on the web, android and iOS platforms owned by the 11 different Lines of Businesses that ABC was unifying under one brand Aditya Birla Capital. The products felt different in usage and more often than not, weren’t individually optimised for modern digital experiences.

Across the group ABC’s lines of businesses work with upwards of 25 different development partners on various products, on and off. This perpetuated inconsistencies in user experience standards, with established practices for validations, error states, button states, image usage, typography etc falling through the cracks.

A lack of a standard showed and was that became the need of the hour for various partners to refer from as a single source of truth.

Clearly, the group needed a unified, standardised rulebook of digital product design to lead them with one guiding beam. They needed a Design System to help them build consistent digital experiences that were stylistically coherent and kept up with the evolving patterns in consumer behaviour and expectations from modern digital ecosystems.

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.

Faster iterations towards prototyping, research and release. Reproducibility of work. Having prebuilt design components that can be used to build various units and modules right from atomic elements like buttons and textbooks to features like login, contact, Maps etc

Access to pre coded components that take care of design execution uniformly and consistently across different product. No cross checking for details like color codes, shadows, text hierarchy, error states and validations. Consistency driven by a predefined standard. Code components out of the box.

Faster GTM for product features, adherence to unified brand and continuous adherence to modern digital experience expectations. Additionally reproducibility of components and guides meant significant reduction in third party developer and designer costs.

Gathering requirements from stakeholders across teams at ABCL – such as platforms they use, technologies they rely on, patterns in interactions they exhibit while building products and an exhaustive list of issues they face while in the process of doing the above. The process also involved auditing all major ABCL digital properties in production or deployment across Web & Mobile.

Interviewing stakeholders to understand and establish business logic, existing tech and design debts, prevailing issues and identifying commonalities across teams and products. Over the course of 20 days, Canvs sat down with multiple teams daily and dived deep into the issues being faced by the teams at the front lines of product development and implementation – from Digital Marketing teams all the way to Development teams.

Canvs’ team procured access to over 20 different mature products from 12 different businesses and understood the various decisions that went into building them the way they were. Additionally, UX audits were done to find patterns in pitfalls in design execution across the board. Finding these patterns illuminated the common areas of design that troubled most teams across the group. They were hence one of the critical problems to solve.

We conducted multiple workshops ranging from the foundations and best practices of User Experience Design to the basics of Design Systems and how to use them to accelerate the pace of product development and reduce their Go-To-Market times. With significant help from the central Digital Products team at ABCL, we managed to schedule teams & stakeholders from across the organisation to participate & share their insights.

Having done our extensive groundwork with all the companies under the ABC umbrella and their relevant teams, our next steps were to assess the data and synthesise insights out of it. These learnings helped us to understand the most fundamental requirements from the Design System we were building and everything that has been desired but forgotten due to a lack of expertise or resource strength.

Based on the issues we identified we followed up with individual team members on certain teams to hear their personal stories from the front lines. They shared insights with us such as the confusion that stems from the lack of a common vocabulary to the file formats they should work with when engaging with development teams. This allowed us to synthesise insights and identify must-solve issues.

Having understood the rampant problems in taking builds to market we figured out the main outputted of the design system and the most important components it would need to have. For instance common journeys in BFSi like eKYC, signups etc became evidently necessary to optimise and standardize.

Basis extensive interviews with teams and stakeholders, we identified issues such as persistent pain points and common issues being faced by most of the teams and individual stakeholders. Ranging from issues such as the permissible use of colors to the lack of guidelines concerning imagery and photography – we identified several common issues being faced across the organization.

Gathering requirements from stakeholders across teams at ABCL – such as platforms they use, technologies they rely on, patterns in interactions they exhibit while building products and an exhaustive list of issues they face while in the process of doing the above. The process also involved auditing all major ABCL digital properties in production or deployment across Web & Mobile.

Having identified the issues and with an extensive list of design assets and artefacts selected as deliverables, the Design team at Canvs dived into the minutia of designing each and every asset, icon, UI component, interaction element, animation & motion element. From the earliest scribbles to the polished UI elements, we strived towards following best practices wherever applicable and deeply thinking about the paradigms we were establishing.

Meanwhile the Engineering team at Canvs was at work translating the designs coming in from the Design team into semantic, efficient and clean code. The objective throughout this process was to ensure the code itself was not just reusable but also flexible enough to allow for modification and easy experimentation. Another hitch in their process was to ensure that the code relied as little as possible on third-party libraries and external packages – using only HTML, CSS & standards compliant JavaScript as much as possible.

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.

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.

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.

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.