My Works

Public Website Re-design on Chase.com

Company
J.P. Morgan Wealth Management
Role
Senior Product Designer
Tools
Figma
Year
2021-2023
Key Result
8% YOY increase in digital account openings since 2023. 34% increase in lead generation for financial advisor products via form submissions.

Project Overview

A re-brand of public product landing pages (PLPs) for J.P. Morgan Wealth Management on Chase.com in partnership with Code and Theory. The goal was to enhance user engagement, ensure brand consistency, expedite the launch process, and resolve customer concerns related to service offerings and brand coherence.

This initiative after launch won the Gold Award for Consumer Retail Website by the 29th Annual FCS Portfolio Awards in 2023.

Business Case

The existing framework for Chase.com was constructed using an outdated and proprietary architecture, resulting in inefficiencies for maintenance and prolonged page launch times. The firm’s strategy involves transitioning to a modern tech stack rooted in open-source technologies such as React and industry best practices.

Public landing pages play a crucial role in boosting account conversions and generating leads for advisors. As the firm is moving to a new tech stack, J.P. Morgan Wealth Management (JPMWM) has to phase out their separate public microsite and redesign their experience on Chase.com leveraging the new framework and design system.

Customer Value

By having our main experience on Chase.com, users can easily find our PLPs which offer essential insights and educational resources, empowering customers to make informed investment choices, initiate account openings, engage with advisors, schedule meetings, and achieve their financial aspirations through our range of products, tools, and services.

Results

The success of the initiative was measured using several key metrics, including account openings, 'Let us contact you' form submissions, completed digital account openings (DAOs), and overall engagement. These metrics served as core indicators of user engagement and conversion rates. To further enhance our understanding, we utilized Adobe Analytics to generate heat maps, providing invaluable insights into user behavior and interaction patterns.

  • 8% year-over-year increase in digital account openings since 2023
  • 34% increase in lead generation for financial advisor products via 'Let us contact you' form submissions
  • After the redesign, we saw a record-breaking increase of 37.3 million visits in 2023

Phase 1: Discovery

Code and Theory (C&T, a third-party design firm) was contracted to design 15-20 pages leveraging the new tech stack and offer recommendations for SEO and content enhancements. I directed Code and Theory in their designs to align to JPMWM standards. Leveraging my deep knowledge of our platform's limitations, branding, and design language, I provided high-level feedback to ensure that the designs closely matched our platform's capabilities and met user expectations.

Site Map

I collaborated with C&T and our marketing partners to establish the sitemap for the redesign and assign pages that were in scope. For the pages that were not in scope, I took on the responsibility of designing those, along with another designer on the team.

Aligning with the brand and specifications

I directed Code and Theory in aligning their designs with JPMWM standards by providing grids, color styles, typography, CTA designs, and ratios specific to our platform. Leveraging my deep knowledge of the platform's limitations, I offered high-level feedback to ensure the designs closely matched our platform's capabilities and met user expectations.

Phase 2: Pre-Migration

After completing the contract with Code and Theory, I pitched and successfully secured approval to conduct a comprehensive gap analysis. This analysis was instrumental in helping our product partners make informed strategic decisions regarding improvements on the new tech stack. My solutions not only reduced development time but also ensured the initiative was launched on schedule.

Additionally, I designed 20 additional pages using the new design, proposing enhancements for existing modules and prioritizing mobile breakpoints.

Gap Analysis

In the gap analysis, I meticulously reviewed each page, mapping out the modules slated for development, those requiring custom work, and the existing modules that won't need additional development. Below is an example for the homepage.

Strategic Module Prioritization

After completing the analysis, I led a meeting with our product and development partners to evaluate the effort needed for module enhancements. We prioritized the most critical modules for each page, focusing on those used most frequently across pages due to shared layouts and configurations.

Using my coding expertise, I collaborated closely with the development team to ensure we concentrated on these key modules for the new tech stack. I also provided alternative solutions for lower-priority modules, optimizing development efficiency without compromising user experience.

For example, I proposed specifications for a new module emphasizing scalability and usability. To ensure accessibility, I set ADA green lines and developed various design options for smooth integration. This approach allowed any line of business within Chase to easily implement the module on the public site.

Enhancing Digital Experience through Imagery: A/B Testing Results

To further enhance the digital experience, I examined the existing imagery on the old tech stack. My hypothesis was that updating abstract images to realistic UI representations for in-app experiences would increase DAOs and better resonate with our users.

We conducted an A/B test comparing abstract UI screens with realistic UI screens. The results were compelling, revealing a clear user preference for the realistic designs, which led to an impressive +7.35% increase in DAO (Digital Account Opening) completion rates.

Phase 3: Delivery and Workflow

As the project neared completion, my focus shifted to delivering specification files to the development team. By preparing these Figma files it led to smoother content copying, spacing inspection, and module identification.

To ensure a seamless delivery, we conducted weekly alignment meetings with producers and stakeholders, promptly addressing any questions or concerns during the migration process. These proactive discussions and collaborative efforts were crucial in successfully completing the final stage of the project.

Challenges

During the process, we faced challenges such as technical limitations within our platform and gaps in module functionality within the library. To address these issues, I worked closely with the development team to identify and resolve gaps. I also communicated roadblocks and considerations for necessary enhancements to our product partners, ensuring that all challenges were effectively managed.

Conclusion & the next steps

Since the launch, the public website had a record breaking increase of 37.3M visits in 2023 for J.P. Morgan Wealth Management. This initiative won the Gold award for Consumer Retail Website by the 29th Annual FCS Portfolio Awards on May 4th, 2023 from the Financial Communications Society.  

The re-branding of the public landing pages for Wealth Management stands as a testament to our team's collaborative spirit, strategic design implementation, and user-centric approach.

The successful outcome, marked by increased engagement and conversion rates, shows the value of empathetic design and strategic collaboration in achieving business goals.

The insights and data gained from this project will continue to guide future initiatives, further enhancing the user experience and driving business success.

Our next steps for the 2023 roadmap includes A/B testing layouts, content, mobile optimizations, and contact form enhancements.