Each brand has its own unique brand identity, resulting in different looks and feels across the various services. However, there is a pressing need for all brands to utilize shareable web components. Additionally, managing digital assets in a sustainable and efficient manner is crucial.

To address this challenge, I conducted desk research to explore how other organizations facing similar situations resolved the issue. I focused on two organizations, namely, The Volkswagen Group and the media company Advance Publications. Through this research, I identified commonalities in how they integrated a multi-brand design system. We end up with maintaining brand individuality while promoting consistency through shared web components.

The challenge arose when the UX team encountered frictions in utilizing the design components and determining when to create new ones. There were instances where designers opted to forego creativity and designed entirely new pages without considering using existing components. On the other hand, some designers felt that their creativity was restricted by always adhering strictly to the design system.

I collaborated with team members to develop a simple decision tree. This decision tree served as a valuable tool for the team, providing a structured approach to engaging in more meaningful design critiques and discussions related to the use of the design system. By implementing the decision tree, we were able to strike a balance between creativity and consistency, facilitating better collaboration and design decisions within the team.

The brand identity consists of four elements: color, typography, logos, and digital assets (images, illustrations, and animations). These elements are used as design tokens, cascading into reusable components and applied consistently throughout our designs. This approach preserves the brand's uniqueness while maintaining a consistent experience across all our products. More importantly, it has significantly improved our development efficiency.

Building upon the existing brand typography, I also contributed to defining the type scale for the Advance America Project. As the project progressed, for instance, we realized the need for specific type tokens, such as a distinct scale for the 'Terms and Conditions' of loans. Consequently, we later added these tokens to the brand identity.

To ensure consistent and effective use of typography across all our products, I took the initiative to add detailed specifications to the type usage in the brand identity documentation. These specifications include guidelines on font sizes, line spacing, and font weights for various headings, subheadings, and body text. By providing these specifications, we aimed to streamline the design process and maintain a cohesive visual language throughout our designs.

The button design is inherited from the Advance America design kit, with a focus on serving mobile-first design principles. Initially, four different button sizes and three visual emphasis styles were created to accommodate various needs across the project.

However, as more projects moved into development, the team realized that it would be more efficient to establish a flexible button width rather than maintaining four different sizes. This decision allowed for greater adaptability and consistency across all projects.

Form fields play a crucial role in the digital experience of financial service companies, as they heavily rely on them to facilitate user flows. Ensuring a clear and consistent data collection process is essential to establish trust with our users. To achieve this, the design of form field components was evolved, incorporating a lot of 'hint' components. The team realized that providing clear instructions is paramount in aiding users to make informed decisions and feel confident while interacting with our platform.

Carousels have been extensively utilized and are a familiar pattern in our legacy website - Advance America Homepage, primarily used to showcase testimonies. Following the PWA (Progressive Web App) project, we introduced three additional types of carousels to enhance the mobile flow of promotional information and system notifications. These new carousel components have proved to be highly beneficial and have been successfully reused in other projects, including the Perch Loan website.