<< GO BACK

Visa Transaction Controls

Designing configurable card controls

and transaction alerts for issuer applications.

STAFF DESIGNER · VISA
Product architecture, prototyping, and implementation guidance
2024 – Present
About This Project

Visa Transaction Controls (VTC) enables financial institutions to integrate configurable alerts, transaction controls, and near real-time activity into their own digital products. I designed the reusable experience layer, translating these capabilities into modular flows that could adapt across issuer brands, devices, and implementation models.

The Opportunity

Issuers needed different ways to bring card controls and alerts into their existing applications. The opportunity was to create a flexible experience model that could support complete Visa-designed interfaces or individual capabilities while preserving consistent behavior and usability.

Key Drivers

Modular Adoption

‍‍Enable issuers to integrate complete experiences or individual capabilities based on their product needs.

Consistent Behavior

‍Preserve clear interaction patterns, states, and feedback across different implementations.

Adaptable Presentation

‍Support different brands, devices, and layouts without compromising usability.

Three Core Entry Points

VTC organized the experience around three entry points that issuers could surface independently or combine within a broader card-management journey.

Set alerts

Enables cardholders to choose which activity matters, define thresholds, and select how they want to be notified.

Review alerts

Gives cardholders a clear view of recent activity and the context needed to determine whether an action is required.

Card controls

Allows cardholders to lock a card, manage transaction types, and confirm the current state of each control.

Implementation Models

Issuers needed different levels of ownership over the experience. Some adopted complete Visa-designed interfaces, while others integrated individual capabilities or created native presentation layers around VTC behavior.

Responsive Behavior

VTC needed to work across mobile and larger surfaces without treating each screen size as a separate design. I defined how content hierarchy, components, and actions should adapt as the available space changed.

Content priority

Critical states, recent activity, and supporting details retain the same hierarchy across screen sizes. As more space becomes available, the layout expands without changing the order or meaning of the information.

Built as one adaptive layout rather than separate device designs. Shared hierarchy, components, and constraints help engineering scale the experience across breakpoints with less device-specific work.

Component behavior

Components adapt their structure and presentation to the available space and interaction context. Navigation, content containers, lists, overlays, and action groups resize or reflow across breakpoints while preserving their hierarchy, behavior, and intended outcome.

Bottom sheet vs. modal. The same task adapts its container and actions while preserving its content and outcome.

Predictable actions

Actions remain predictable as layouts, components, and interaction patterns change. Primary, secondary, and destructive actions preserve consistent labels, hierarchy, states, and feedback, helping cardholders anticipate what will happen before acting and confirm the result afterward.

Card controls preserve action placement, control states, and confirmation feedback across screen sizes.

Making Behavior Explicit

Because VTC could be integrated by different engineering teams, the design files needed to communicate more than visual appearance. I documented interaction states, transitions, system feedback, responsive rules, and integration boundaries alongside the experience so teams could implement the intended behavior consistently.

Interaction states

Documented how components should respond throughout an interaction, not only in their final state.

- Default and focused states

- Selected and disabled states

- Loading and processing behavior

- Success, error, and recovery states

System feedback

Defined how the experience communicates progress, confirms outcomes, reflects persistent changes, and helps cardholders recover when an action cannot be completed.

- Immediate action confirmations

- Persistent state changes

- Loading and processing feedback

- Errors and recovery paths

Integration boundaries

Clarified how responsibilities, navigation, data, and behavior should be coordinated between VTC and the issuer application.

- VTC-owned behavior and states

- Issuer-owned navigation and destinations

- Entry and exit points

- Context passed between experiences

Applying Issuer Themes

VTC separated product behavior from visual presentation, allowing issuers to apply their brand across the experience without redefining its underlying structure. Color, corner treatments, and typography could adapt while information hierarchy, interaction patterns, semantic states, and feedback remained consistent.

Color

Semantic color roles allowed each issuer’s palette to be applied consistently across actions, surfaces, text, icons, and system states. The mappings preserved the purpose and relative emphasis of each element while giving the experience a distinct branded appearance.

A sample of Active and Surface color groups, showing how their default and alternate values support different backgrounds and interaction states.

Additional semantic color roles applied across VTC, including text, status, disabled, and on-active treatments.

Corner Radius

A coordinated set of corner values shaped components according to their scale and function. Inputs, buttons, cards, sheets, and modal windows could adopt an issuer’s visual character while maintaining clear relationships and consistent interaction patterns.

Corner radius values applied across icon frames, buttons, inputs, cards, sheets, and modal windows.

Typography

Issuer typefaces could be mapped to a shared hierarchy of display, heading, body, label, and action styles. This preserved readability and information priority while allowing typography to reflect the issuer’s brand across the experience.

Examples of how the shared typography hierarchy maps to headings, body copy, and UI labels across the experience.

Themes in Practice

The same semantic roles and component patterns support light, dark, and issuer-branded themes across experiences and screen sizes.