screens from the legacy app
app redesign 2.0 look and feel
How do we turn these proof of concepts into a usable, manageable, scalable component library for the new app and fix previous issues?
visual solutions
Branded coloring
With multiple business units in the same space (banking, lending, investments, financial planning) and various marketing placements, we united it all with a branded color presence.
F pattern type hierarchy
When creating components and pages, we used an F-shaped structure reading top to bottom and “wayfinding landmarks” or high-emphasis identifiers for quick recognition.
overall shape structure
The proof of concepts used various densities, corner rounding, and spacings. We standardized 8pt increments into the structure of the components or created guidelines for pages.
scalable components
Many cornerstone components adopted a header, body, and footer structure, keeping them aligned across the app.
Contemporary UI solutions
With Jakob's Law of Internet User Experience by Nielson Norman Group in mind, we created UI solutions with contemporary methods and components to help users quickly adopt our new experience.
New iconography
Using the created icon library, the proof of concepts used small illustrations as icons that were well received. We created tiers for the icons, and the small illustrations would make up tier 3 icons.
Focused delight points
We limited the implementation of delight to areas crafted to entice new users to sign up or to enforce positive behaviors.
Download and see the implementation
Initial user testing started returning very positive results. Internally, stakeholders received positive reception, and the look and feel became the new direction for the Axos brand. The app component library would be the foundation for building the rest of the design system.