Case Study:Edward Jones - Marketing Microsites using Next.js

Stack: React | Next.js | styled-components | Sketch

A collage of two full page screens from the Edward Jones Know More campaign website, featuring the 'Home' and 'World Class Thinking' pages. — Screens from the "Edward Jones - Know More" microsite.

At a Glance:

Increased Brand Awareness Among Target Audience

Increased Experienced Advisor Recruiting

Reduced Support Call Volume

Elevating Brand Awareness and Driving Experienced Advisor Recruiting

The Opportunity Space

Edward Jones Talent Acquisition needed a custom build of a recruitment web experience to serve as the upper funnel destination of a national paid media campaign targeting experienced financial advisors to position Edward Jones as a desirable destination to grow their practices.

Collaborating on Component Architecture, Design and Accessibility

Partnering with a Graphic Designer from our creative agency partner, Cramer-Krasselt, I addressed color contrast and other accessibility concerns of the proposed design, identified and standardized recurring components, and nailed down the specifics of the interactive elements before beginning development. As the agency's Scope of Work entailed delivering only desktop designs, I stepped forward and took ownership of the Sketch design files and adapted the designs for responsive viewports.

Building the "Edward Jones – Know More" Microsite with React and Next.js

One of the requirements for this experience was that it had to be served as static files from one of the firm's Content Delivery Networks. With this directive, I researched different Static Site Generators and determined to build the "Edward Jones – Know More" experience using the Next.js React platform to preserve flexibility in the event that changing circumstances might allow us to move to a Single Page Application architecture in the future. I styled the application with the CSS-in-JS library, styled-components, and optimized the build to maximize Core Web Vitals scores across Performance, Search Engine Optimization and Accessibility.

This experience featured:

A full-bleed scroll-based slideshow
An interactive timeline of Edward Jones' growth from the 1930s until present day
Multiple fluid animations
An integration with the Vimeo streaming video API

An animated image showcasing a full-bleed, scroll-based slideshow with background and navigational animations. — Landing page full-bleed slideshow.

An animated image showcasing an scroll-based animated timeline from the "Our Timeline" page. This features SVG stroke animations and an animated counter that shows the number of Edward Jones financial advisors at specific years coinciding with major financial events. — Interactive timeline.

An amimated image showcasing the "World Class Thinking" page, featuring "Load More" functionality to load additional content from a variety of Edward Jones web properties and coverage in media publications. — Media Center with "Load More" functionality.

Driving Impact

The "Edward Jones – Know More" microsite successfully served as the destination for paid media campaigns across digital channels, helping to drive significant traffic and elevate brand awareness among experienced financial advisors.

Educating Financial Advisors and Clients on New Account Access Application and Reducing Support Call Volume

A collage of two screens from the 'Get to Know Online Access' microsite experience, including the 'Snapshot' and 'Home' pages. — Screens from the "Get to Know Online Access" microsite

The Opportunity Space

As Edward Jones neared the launch of a brand new version of its native mobile and web applications for clients (Edward Jones Online Access), the Client Experience team in Marketing needed an experience that would showcase the new features and educate clients, along with our financial advisors and their branch teams, on the coming changes.

Building the "Get to Know Online Access" Microsite with React and Next.js

I developed the Get to Know Online Access microsite using the Static Site Generator capabilities of Next.js and styled the pages with the styled-components library. I then managed the hosting of the files on our Content Delivery Network. The microsite gave an overview of the new application features through a series of informative pages and detailed screenshots that users could explore to familiarize themselves with the new application post-launch.

Redesigning the Microsite into a Single-Page Experience

After maintaining the site with updates to content and images for several months following the Online Access launch, I redesigned the site for a new home within the main edwardjones.com website to consolidate resources and improve discoverability for users seeking information about the new application. I used exisiting components, assets and content to create a streamlined single-page experience that retained the core educational value of the original microsite while improving usability and accessibility.

To achieve the single-page design, I designed a new local navigation component that allowed users to quickly jump to different sections of the page and worked with the CMS team to define the new component requirements and ensure it would be themable for future utility across edwardjones.com.

Driving Impact

The "Get to Know Online Access" microsite launched in conjunction with the new Online Access application and is credited with helping to reduce call volume to our branch teams and Client Service Center following the application launch.