Case Study:Edward Jones – Design Systems
Developing and Designing the AXIOM Design System in React/TypeScript and Figma
The Opportunity Space
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.
Consulting on the AXIOM Design System Strategy and Governance
Representing public-facing websites and applications as part of the Edward Jones Marketing and Brand department, I joined the AXIOM Governance Committee as a Design System consultant, advising the core team on refreshed Brand standards and emergent design patterns in our public apps. I worked with cross-functional stakeholders from Design, Engineering, Product Management, and Marketing to help define the vision and roadmap for the design system and establish review processes.
Building the AXIOM Component Library in React and TypeScript and Designing in Figma
Identifying the opportunity to accelerate delivery while fully embedding the Brand POV in the design system, I secured buy-in from cross-department leadership to arrange a talent-share program between Marketing and Technology, whereby I joined 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.
Additionally, I 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.
Driving Impact
To date, the AXIOM React component library has served as the front-end foundation for over 500 applications and prototypes developed by over 3,000 developers, helping to increase consistency, decrease development time, and minimize UI bugs throughout the product ecosystem.
The AXIOM Design System is the foundational design resource for all internal, client- and public-facing applications and websites. The Figma UI Kit has been leveraged by over 2,000 designers.
Building Edwardjones.com Component Library in React and Migrating UI Kit to Figma
The Opportunity Space
As a client-side Front-end UX consultant for edwardjones.com, I worked closely with external designers to define and create new features and enhancements for the website experience. I quickly noticed that our reliance on a Sketch design library hampered our ability to fully convey the responsiveness and behavior of new designs to the engineering team. This frequently led to multiple rounds of back-and-forth between Design and Engineering to nail the specifics and resulted in features often being delivered past deadline.
To address this, I initiated a project to create a component library based off the website's 2021 redesign, to help facilitate quick prototyping of new features and enhancements for the site and related experiences and reduce time to market.
Building the React Component Library to Accelerate Prototyping
I built the component library with React and TypeScript, and authored Storybook stories to view components in isolation, along with automated UI tests to run in Jest. I used the Tailwind CSS system in use on the website as the default styling framework which, when carried forward to new designs, allowed us provide production-ready code snippets for engineers to leverage when implementing these new features.
Merging the UI Kit and Component Documentation into Figma to Improve Cross-Functional Collaboration
Following our firm-wide adoption of Figma, I managed a project to consolidate design assets and component documentation into a single source of truth, overseeing a team of agency designers to convert the entire edwardjones.com component UI kit from the original Sketch implementation to Figma and migrating the documentation from Confluence. Figma allowed us to design faster and with greater visibility into other design efforts across the firm, helping to increase consistency across experiences. It also gave our Content Specialist teams a single place to reference component usage guidelines and copy standards when authoring content for the site.
Driving Impact
The component library, UI kit and documentation combined allowed us to prototype new features quickly and accurately, reducing the time spent in Design-Engineering handoff and enabling us to deliver new features on time.
Consulting on Angular Component Library for Client Account Access Application
While a part of the Engineering and Design teams for the AXIOM Design System, I was asked to consult 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 (Edward Jones Online Access). 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.