Case Study:Edward Jones – Design Systems

AXIOM Design System

To accompany a technology directive to migrate custom applications used by the firm's Financial Advisors and branch teams to React-based front ends, Edward Jones launched an initiative to replace its outdated Bootstrap-based style guide with a brand new bespoke design system, comprised of a User Interface kit for designers, a React component library for developers, and accompanying documentation resources, collectively dubbed AXIOM.

I first joined this effort as part of the governance committee representing the Edward Jones Marketing and Brand department, helping to connect the dots between emerging AXIOM design guidance and the new standards stemming from a concurrent brand refresh.

Eventually, I was able to arrange a talent-share program between Marketing and Technology whereby I was able to join the AXIOM engineering team. In this role I developed, enhanced and maintained class- and function-based React components leveraging Sass for CSS styling, TypeScript for type checking, Jest for unit tests, and Storybook for component API and usage documentation, as well as contributing to ongoing feature definition, code review and support efforts for consumers of the library.

In addition to engineering duties, I also supplemented the AXIOM Design team and assisted in continuous improvements to the Figma UI kit libraries and contributed to design token definitions and to the migration of the official AXIOM documentation reference from a homegrown Gatsby site to the Knapsack platform.

As of Autumn 2024, the AXIOM React component library has served as the front end foundation for over 75 internal applications developed by over 30 product teams, helping to increase consistency, decrease development time, and minimize UI bugs throughout the product ecosystem. The AXIOM Design System is the foundational design document for an additional 40-plus internal and customer-facing applications, developed by another 25 product teams.

An animated image showcasing a full-bleed, scroll-based slideshow with background and navigational animations. — A screen containing a sampling of rendered React components from the Edward Jones AXIOM design system.

Edwardjones.com Component Library

As the client-side UX Lead for edwardjones.com, I initiated a side project to create a component library based off the website's 2021 redesign, with the intent to help facilitate quick internal prototyping of new features and enhancements for the site and related experiences, as well as serve as a reference for our various agency partners engaged in creating other public-facing websites and applications.

Storybook views of Financial Advisor Profile Hero, Article Hero, and Financial Advisor Locator components from edwardjones.com.

The component library was built with React and TypeScript, and used the Tailwind CSS system in use on the website as the default styling framework. I also authored Storybook stories to view components in isolation, along with automated UI tests to run in Jest.

Later, I managed an effort to convert the entire edwardjones.com component UI kit from the original Sketch implementation to Figma, overseeing a team of agency designers.

Storybook view of multi-variants of different edwardjones.com components.

Galaxia Component library

While a part of the Engineering and Design teams for the AXIOM Design System, I was asked to act as a consultant for a team that formed to oversee the development of "Galaxia," an Angular common component library for the products comprising the firm's client account access application platform. I advised a team of designers and developers on how they might best layer AXIOM design standards on top of the platform's Material Design base and how to leverage available AXIOM published assets, while also keeping them abreast of AXIOM work in progress and any upcoming design changes to help encourage consistency in end user experiences.