Case Study:Edward Jones - Digital Transformation Interactive Roadmap Prototype

Stack: Sketch | React | TypeScript | styled-components | Framer Motion

A collage of two states of an interactive roadmap timeline prototype, the default view and a selected item view with an open panel containing additional information. — "Timeline" and "Details" views from the Edward Jones Digital Transformation Roadmap prototype.

At a Glance:

Increased Employee Engagement and Awareness

The Opportunity Space

The Edward Jones Internal Communications department requested an intranet site and other collateral to help inform the company's employees of the many work streams, programs, and initiatives scheduled or underway at the firm relating to a $500M technology investment and other modernization efforts. The main thrust of this site was envisioned to be the "Roadmap" section, which would collect all of these items in a single experience to provide a holistic view of the firm's transformational changes.

I managed the digital portion of this initiative as the Front-End and UX resource on the campaign team assembled by the Marketing and Brand department.

Visualizing a Massive Technology and Modernization Effort in React

To bring the firm's modernization roadmap to life, I created an interactive timeline application prototype based off of components from our enterprise design system, AXIOM, themed with the semantic color-and-iconography pairings established in the overarching internal Digital Transformation campaign. I built the prototype in React and TypeScript, and leveraged styled-components for styling and the Framer Motion library for animations.

An animated image showcasing horizontal roadmap navigation, category filtering and details panel functionality. — The original prototype of the interactive timeline view.

Refining the Design within SharePoint Constraints

Following enthusiastic responses to a series of demos to stakeholders and select site users, I worked with UX and Visual Designers from our SharePoint implementation partner, RightPoint, as we tailored the design to fit within established SharePoint conventions, componentry, and technical restraints while incorporating design and accessibility guidance where possible.

Driving Impact

The interactive roadmap experience has served as a key resource for Edward Jones employees to understand the scope and scale of the firm's technology modernization efforts, and has since been expanded by the Internal Communications team to include additional programs and initiatives as the firm's transformation continues to evolve.