Cards

Designing for cross sell

Cross-selling is one of the most important levers banks have for growth and profitability, opening avenues for broad product adoption. It's especially advantageous with existing customers, who carry a significantly lower acquisition cost than new ones. Standard Chartered's website is a key touchpoint for cross-selling, but in its current state it isn't structured for the rapid pace at which users explore the web. To address this, I designed the existing information card to work with a bottom sheet that provides efficient progressive disclosure. It helps users discover new content without page reloads and keeps them within the same context.

Content exploration on the web

Currently, exploring content cards involves clicking the card which redirects users to a new page. This context change especially for content as dense as Standard Chartered’s disrupts user flows and introduces avoidable friction in the exploration phase.

A two part solution

To address this, I designed the existing information card to work with a bottom sheet that provides efficient progressive disclosure. when used together they help users discover new content within the same context window while carrying users further in the exploration phase.

Tags vs Breadcrumbs

The tag, currently in use loosely links to products while the breadcrumb enforces the information architecture’s integrity, surfacing real navigation categories while providing users with a subtle hint about the origin of the product.

Bottom sheets

Bottom sheets unlock new user flows, letting users scan and interact with isolated, focused content without a full context switch. This card-plus-bottom-sheet pattern drives ROI through its ability to retain users, and it opens a window for personalized content that can lift CTR by as much as 117%.

bottom sheet showing details about the CIO funds by standard chartered.
Task flows on SC mobile

Standard Chartered’s mobile app gives users comprehensive summaries of their accounts, from investments to debt, but no immediate way to act on those numbers without a multi-step process. For complex operations that require stricter identity verification (KYC), that friction is unavoidable. But for low-impact actions like small repayments, users should be able to complete the task quickly. Action cards provide that mechanism, pairing the relevant data with a bottom sheet that lets users finish low-friction tasks in place.

Action cards

The action card lets users perform selected banking actions in fewer steps. It provides the minimum required information and a simple CTA that opens a pre-filled bottom sheet for faster completion.