Case Study:Edward Jones - Component Prototyping

Unifying Card Components Across edwardjones.com

The Opportunity Space

After several years of multiple content teams and partner agencies designing their own areas of edwardjones.com, we began to see a clear divergence from our original Card UI component, with several variations popping up that contributed to an overall lack of visual cohesion across the site. This issue also compounded to create confusion for our web authoring teams trying to locate the correct components to use in our Drupal Content Management System (CMS).

Identifying an opportunity to consolidate, I audited existing implementations across the site, identified commonalities and variations, and designed a unified suite of Card patterns.

Designing a Unified Card Component Suite in Figma

This project presented an ideal opportunity to design for and implement the recently matured Container Queries CSS specification, enabling the creation of Cards that could adapt their layout and styling based on the size of their parent container rather than the viewport size alone.

Making full use of this new specification, I designed Cards that could be used in a variety of contexts, from one-, two- and three-up list and grid sections, to narrow sidebar placements, all while keeping the number of variants to a minimum. I created the designs in Figma, documenting usage guidelines and interaction states for each variant.

Collaborating with Development to Implement in the Drupal CMS

Upon approval of the designs, I worked with our offshore development team to implement the new Card components in the CMS, providing detailed documentation and code prototypes to ensure proper usage and tutoring developers on how to use the Container Queries API.

Driving Impact

The unified Card component suite has helped to improve visual consistency across edwardjones.com, while also simplifying the authoring experience for our content teams by reducing the number of components to choose from and providing clear usage guidelines. This has led to a more cohesive user experience for site visitors and streamlined content creation for our internal teams.

Using Salesforce Lightning Web Components to Improve Salesforce Service Cloud Custom Module

The Opportunity Space

The Edward Jones Salesforce Service Cloud product team began receiving feedback from our Service Associates that a custom module the team had built to display case-related alerts was becoming increasingly difficult to use as the volume of alerts increased.

Regulatory and policy requirements dictated that this module had to render front and center in the Service Cloud layout, which displaced the core modules that our associates used to resolve incoming issues from Edward Jones branch locations.

I evaluated the existing module and proposed solutions to improve usability and performance and reduce screen reflow.

Redesigning the Current Alerts Module with Salesforce Lightning Web Components

I used Salesforce Lightning Design System 1 assets to design a refactored version of the module in Figma that bucketed alerts by existing category and enhanced the distinction between critical and non-critical by adding semantic icons to help associates quickly find and act on the most critical alerts. I also included an expanding section to surface additional details for each alert, replacing the original hovering tooltip implementation and greatly improving the accessibility of the component. Next, I worked with a UX Researcher to elicit feedback from actual users and iterated on the component design.

Building a Functional Prototype to Validate Feasibility and Collaborating on Implementation

Upon reviewing the proposed designs with our offshore development team, I received some pushback that the designs were not feasible within the Salesforce platform. Having researched the platform, I believed this was incorrect, so I built out a functional high-fidelity code prototype using Salesforce's open source Lightning Web Components (LWC) framework and the Lightning Design System utility CSS library to demonstrate that the new design and interactions could indeed be achieved with a minimal level of effort.

I then worked with the offshore development team to implement the new design, making some small non-material concessions to further reduce custom code.

Driving Impact

A second round of UX Research with a small pilot group of users confirmed that the Service Associates found the updates extremely helpful, resulting in a more usable and performant module that better served their needs and led to greater satisfaction scores and reduced time on task metrics.