A New Design System for an Application Suite

In the world of financial technology Advisor Software is a veteran. The company's financial software is used behind the scenes at Charles Schwab, TD Ameritrade, SSGA and many other big players in the Investment world. Portfolio Rebalancing, Investment Analytics, Portfolio Construction, Proposal Generation: If there is a tool Financial Advisors use it’s likely Advisor Software has a product for them. However, the Fin-tech world is changing fast and Advisor Software intends to lead the pack. They are the first-to-market with a recently launched API strategy and we were lucky enough to help it happen by building them a flexible design system.

Advisor Software asked me to build a design system that would be the face of their white-labeled financial web applications. We established device guidelines, built a custom grid, made modular design components, developed themes, and worked on product requirements. This design system was built so that ASI could use it as they expand their suit of applications to eventually include investor portfolio management, advisor portals, and administration software. These applications are needed to sell the API strategy to new clients, provide a framework for clients building their own applications with Advisor Softwares APIs, and dogfood new API development within Advisor Software. The design system had to be flexible and beautiful and we delivered.

“...he simply blew our minds away with the ‘Avila’ scalable design framework he implemented which enabled our common client to launch white-label custom-built wealth management applications”—Amilcar Chavarria, PM

Product Requirements Foremost

Advisor Software was developing a new software that had a lot of moving parts and required a tight integration between the product managers, the developers, and the designers. For this project I worked in the Advisor Software offices for 6 months. This integration helped us rapidly develop complex data visualizations which were needed to display investment data to users who may or may not have been industry savvy. Our visualizations helped people within and without the core team better understand the products they were developing. And, by working closely with the product team we were able to refine product features and set up a feedback loop that ultimately informed the direction of the product.

Avila: A White-label Design System

Advisor Software was developing a user facing application that their clients would ultimately rebrand with their own identities. This meant the design system had to be flexible enough to easily accommodate design changes. We called this system Avila, it’s a grid-based, modular, themeable design system.

A Little Dot Com Help

While in house we helped launch their new .com site as part of a broader rebranding effort. We got to roll up our typography sleeves while participating in the rebranding and helped to guide the overall look and feel. We modernized the site by making the design responsive and set up advisor software to roll out the new look and feel across their corporate website as they built new content.

Building the Front End: SASS Saves All Ships

One of our core deliverables for Advisor Software was a SASS library for their application suite. The goal was to create a codebase that would be adaptable to future projects while integrating with their front end application code which is written in javascript on top of backbone. We wrote patterns in SASS that integrated with their code and allowed a large degree of flexibility and growth.

So Many Devices, So Little Time

Advisor Software is a lean company of FinTech wizards and they didn’t have any resources in house for a comprehensive testing suite. We set them up with what I call the minimum testing kit, a handful of phones, tablets, and monitors that cover just enough to build a fully responsive web application. We hooked the whole thing up with ghost lab and had happy testing throughout the project.

Building a Sustainable Development Team

It was important to us that the patterns we set in place were completely understood by Advisor Software so they could continue to grow them after the end of our project. We helped train the team in using the new design system and helped them to hire the right talent to continue to grow the design of their applications.