Axos Design System
table of contents
Project Overview
Methodology
Design
Learnings
Work Type
UX/UI Design
Role
Designer
“The highest level of performance comes from people who are creative and reflective.”
Project Overview
Introduction & Problem
Since the release of the Axos app in October 2018, it saw a number of iterations to improve overall performance. In November 2019, the UX team decided to conduct a mobile audit to assess the efficiency of these iterations - this included a number of practices, tools and methods aimed at revealing the bottlenecks in designs, development and making improvements to enhance the overall user experience. Additionally the UX team desperately needed a cohesive and flexible mobile design system to be used across business units.
This lead to two main problems:
Credibility
• Using ADA friendly and contemporary design will lend credibility to Axos as a bank.
Speed & Efficiency
Reduce loading time for users.
Improve process amongst design, development, PM, etc.
Methodology
My Role
From the design team there were two of us. I oversaw the UI audit - making a list components necessary to be redesigned, documented and handed off to the dev team. As my parter would complete components, I would assist with edits, feedback, documentation. After completion, the components were kicked back to me, where along with the development product teams I would manage expectations, see that components were being built correctly and deployed.
Tools
Initially we used Sketch and InVision for this project but found we were running into the same issues, so we made the switch to Figma for design and Confluence for documentation.
Approach
Conduct a UI audit/inventory
Assemble a design systems team
Establish rules and principles and build components
Create a roadmap for building and updating components, and provide a means to submit feedback
Design
COLOR
We created a color scale that designers and developers could all understand.
We were inspired by teams that took a more programmatic naming approach for colors and typography (Lyft was a big one). For naming, we gave them values in multiples of 100 so our team would have an easier time communicating color specs.
We retroactively fit the brand colors into this spectrum as well. So our “Blue 500”, “Gold 500” values are also our primary and secondary brand colors.
COMPONENTS
We built and iterated on even the simplest components until we got it right for our team. Our main goal was to create the least amount of components possible, with the most flexibility.
For example, our input fields are made in a way that can flex responsively, with the option of an icon on the left or right, hidden by default.
ICONGRAPHY
We created over a hundred custom icons to replace our eclectic set. They are meant for small sizes to be used in our products, 16-24px. We also made a “Tier 2” icon set for larger components and marketing use.
Lastly, we defined construction and usage guidelines.
TYPOGRAPHY
Similar to our color scale, we created a typography kit that would be easy for designers and developers.
Learnings
As a team we’ve built a solid foundation, and we are constantly creating new components. The foundational elements are in place and have been used by both designers and developers across multiple divisions of the company. Our dev team is still working to update their component environments but have adopted our color and typography rules to start. In the future, we’d like to utilize design tokens and continue to enhance documentation practices between design and development.
View the master file here.