Ft Knox - an Evolving design system for Axos

Axos is a technology-driven financial services company providing a diverse and ever-growing range of products and services for personal, business, and institutional clients nationwide. The Ft Knox design system supports its growing portfolio of financial digital products including an all in one multi-branded mobile/web app, white label investment admin/client portal, a high net worth financial management platform, multi branded marketing needs and more.

Notable Features

12+ product teams
20+ designers
Multi-branded and supports white labeling
Automation for design team performance reporting
Support for various platforms, code frameworks and integrated external libraries

MY ROLE

AVP Design Systems
Manager, contributor, leader and internal advocate

TOOL STACK

Figma for design
UserTesing.com for research
Figma Dev Mode and Zeplin for handoff
Microsoft Loop for documentation
Microsoft Teams for communications
Azure DevOps for tracking and reporting
Mobile app UI Kit, Storybook, LiveStyle Guide for QA reviews.

SYSTEM ARCHITECTURE

Design Principals
Interaction Principals/Guidelines
UX Patterns
Workflows
UI Templates
Complex Organisms
Component Libraries
Usage Patterns
Visual Identities

PROBLEM STATEMENT

The lack of a cohesive design system led to visual inconsistencies across products as teams independently interpreted brand guidelines. There was no clear path for implementing the 2.0 brand update, increasing inconsistency and confusion. Departments operated without clear processes, resulting in ad-hoc solutions and gaps. Without a standardized design system, teams created their own solutions, reducing efficiency and worsening inconsistencies. Coordinating with multiple development teams using different frameworks added to the challenge, leading to fragmented user experiences.

The design system aims to ensure consistency, efficiency, scalability, and improved user experience across all products. We will establish a single source of truth to align design efforts and promote consistency, ownership, and adoption. Our process will ensure design continually feeds into the system and vice versa, refining processes for efficiency. As we innovate, our design system will scale accordingly. We are also committed to making design information accessible to all, promoting collaboration and inclusivity.

PROCESS

The research phase started with an inventory of existing design assets, followed by interviews with the design team, product managers, and tech leads to identify pain points and quick wins. This process was repeated for each new organizational part, focusing on gradual integration rather than an all-at-once approach. Enhancements were driven by UX requests and ongoing research, ensuring continuous improvement.

Collaboration with teams and stakeholders was key to success. With product managers, we streamlined documentation, reducing PBI creation time and minimizing miscommunications. Open communication with developers provided valuable input. Within the design team, we empowered individual designers by creating areas of ownership. Regular reports to senior leadership highlighted our efforts, securing buy-in and demonstrating results. Continuous feedback from collaborators refined the design system.

IMPLEMENTATION

The rollout process was developed in collaboration with product and development teams for the companies flagship 2.0 app launch. The initial success of this implementation laid the groundwork for broader adoption as new products were introduced. We were fortunate to have dedicated designers who actively promoted the design system at every stage, as well as supportive developers. Subsequent versions of the design system scaled up as more products were integrated, ensuring a consistent and cohesive design approach across the organization. Throughout this process, we provided comprehensive training and resources to all teams to facilitate smooth adoption and effective use of the design system.

IMPACT

The impact of the design system is demonstrated through several key metrics. We drastically reduced design time for the consumer UX team, allowing for more efficient workflows. Additionally, marketing users were trained in their area and experienced a significant reduction in time to task completion. The design system was also instrumental in onboarding and scaling up new UX teams as they were established or acquired. This contributed to increased consistency across individual products and the entire enterprise suite. Furthermore, we enhanced accessibility by integrating ADA requirements into each component, ensuring compliance and improved user experience for all users.

REFLECTION

Throughout the project, we faced several challenges and developed strategies to overcome them. Initially, the design system was tailored to a single mobile app product, but as we expanded to include web products, we encountered gaps that needed to be addressed. To overcome this, we created a structured process that allowed designers to contribute as needed.
The cost of maintenance would surface and hinder the team's efficiency. We adapted the system to allow for more flexibility, enabling continuous production while managing intake effectively. As our tools improved, we faced the challenge of integrating new features into aging areas of the system. We addressed this by gradually updating components and prioritizing high impact features.
Introducing the design system to new teams and stakeholders, some of whom had never worked with a system at our scale, posed another challenge. We provided extensive training and resources to onboard these teams, emphasizing the benefits and ease of use.
Managing the system with various development frameworks grows in complexity. We created agnostic components and established guidelines shepherded by designers to ensure consistency.
Lastly, to maintain consistency at a larger scale, we documented patterns and guidelines that encapsulate broader concepts, ensuring all teams adhered to these standards.

LEARNINGS

How do you eat a whale? One bite at a time.
The approach for marketing vs product needs to be fundamentally different.
A design system should make your life easier, not harder.
Reimagine, rethink, then standardize. Keep the new ideas flowing in.
Inconsistency undermines trust.
Look for allies in other departments, they will help you beyond what you can see by yourself.
Stay flexible.