Case Study: CardGuard™ Page Redesign

Role: Senior Product Designer
Duration: 16 Weeks
Team: Digital Channels, Digital Payments, Compliance, Legal, and Corporate Communications
Platforms: Website
Landing Page: Currently in staging environment, release date is 5/28/2026

Overview

On May 28, 2026, an updated landing page will launch for CardGuard™, an innovative service that gives customers greater control over their debit card. The purpose of this redesign is to present each feature in a clear, accessible format and to guide users in understanding how the service works. A custom-coded tab structure optimized for search engines allows users to explore five primary feature categories without the need to scroll.

CardGuard

The Objective

The primary purpose of this page was to showcase the many features available with CardGuard™. The page needed to include clickable walk-throughs that guide users through each of the features that was mobile responsive and reduced the need to scroll.

The Approach

As the Senior Product Manager, I collaborated closely with the Digital Payments Team to define each of the features and steps throughout the tab structure. The collaboration also included the other elements of the page that needed highlighted, including digital card issuance.

Execution

Web Design

Responsive Design

Designed and developed a responsive landing page optimized for both desktop and mobile.

Animation icon

Enhanced Experience

Incorporated visual storytelling and step-by-step guidance to showcase digital features.

Branding

Cohesion

Create a unified look and feel across the webpage and the interactions within the mobile app.

Compliance

Tested the page for accessibility and performance to guarantee a frictionless experience.

My Role

Web Design

Webpage UX/UI Design

Designed a mobile-first, responsive landing page featuring a nested tab structure to showcase several features in one place, which included custom HTML/CSS code for simple functionality.

User Personas

Cross-Channel Design Coordination

Worked closely with the Digital Payments team to ensure visual consistency across the webpage and mobile app by aligning imagery and steps for each feature.

Compliance Coordination

Partnered with compliance/legal teams to ensure all copy, imagery, and design choices met overall banking regulation guidelines.

CardGuard