Verizon Visa Card
Verizon Visa Card
UX/UI Technical Case Study
01: Discovery & Research
Laying the Groundwork: Research-Driven Insights to Seamlessly Integrate Fintech into Verizon’s E-Commerce Flow.
Designing the Verizon Visa® Card experience required deep exploration into how financial products could be responsibly and intuitively integrated into an already complex digital retail ecosystem. The opportunity wasn’t just to promote a credit card—it was to embed smart financing into the Verizon customer journey in a way that felt natural, transparent, and rewarding.
We kicked off with stakeholder interviews across Verizon’s Product, Marketing, Legal, and Engineering teams, along with Synchrony Bank, the issuing partner. These sessions surfaced core requirements: compliance with financial regulations, secure handoff to Synchrony’s hosted environment, brand alignment across both ecosystems, and integration with Verizon’s e-commerce infrastructure.
In parallel, we conducted a heuristic audit of Verizon’s existing checkout flow and competitive benchmarking against Apple Card, Affirm, and T-Mobile MONEY. Key patterns emerged:
Financing options that were clear and introduced early in the funnel saw higher conversion
Soft credit checks built trust and reduced perceived risk
Seamless, brand-consistent handoffs were critical in maintaining user confidence during 3rd-party transitions
We also deployed user surveys and interviews targeting Verizon customers across segments (new device buyers, account upgraders, and multi-line family accounts). Common themes included:
Interest in 0% APR financing, but confusion around eligibility
Lack of awareness of Verizon Dollar rewards or how they could be used
Frustration with checkout friction and redundant data entry when transitioning to credit applications
To structure these insights, we developed user personas such as the “Credit-Conscious Optimizer” (looking for long-term value without hurting their score) and the “Bundled Spender” (motivated by perks and rewards tied to device purchases and family plans). These archetypes helped guide when, where, and how we introduced financing offers across the funnel.
The discovery phase clarified both opportunities and constraints—highlighting the need for clear messaging, predictable handoffs, and value propositions that felt immediate and integrated. It also grounded our UX strategy in real user behavior, ensuring the Verizon Visa® Card wasn’t just another offer—but a seamless part of the Verizon purchase experience.
02 Problem Framing & UX Strategy
Transforming Friction into Flow: Strategically Positioning the Verizon Visa Card to Drive Trust, Clarity, and Conversion.
Following our discovery work, we reframed the challenge from simply “offering a credit card” to a more strategic goal:
“How might we embed a financial product into the Verizon digital sales journey in a way that increases value, reduces friction, and builds trust—without disrupting the customer’s path to purchase?”
The Verizon e-commerce flow was already optimized for complex device purchases, promotions, and plan selection. Adding a co-branded credit card introduced new layers of decision-making and compliance, with real financial stakes for the user. Based on user and stakeholder insights, we identified three core UX problems:
Timing & Placement – Card offers surfaced too late in the funnel, often after user commitment had been made or trust was already strained.
Perceived Risk – Unclear financing terms, lack of upfront APR transparency, and redirects to third-party domains introduced friction and abandonment.
Value Disconnect – Users didn’t immediately understand how the card’s benefits (0% APR, Verizon Dollars, $150 bonus) applied to their purchase or future billing.
To solve these, we developed a UX strategy grounded in value-first storytelling, progressive disclosure, and contextual integration throughout the customer journey:
Core UX Strategy Pillars:
Funnel-Aligned Placement: Repositioned the Verizon Visa Card starting from the Gridwall, reinforced in the Product Detail Page (PDP), and strategically surfaced during Cart and Checkout steps—making it feel native, not bolted on.
Context-Aware Education: Integrated card details into tooltips, comparison charts, and embedded modules that aligned with user intent (e.g., financing a device or saving on a multi-line plan).
Trust-Centered Transitions: Collaborated with Synchrony to reduce visual dissonance during redirects, pushing for aligned typography, color, and messaging to preserve the Verizon brand experience through the handoff.
Flexible Messaging Framework: Designed for variable user states (e.g., new customer, upgrading line, business vs. personal account), so card offers were relevant, not generic.
We also redefined KPIs to measure conversion uplift, drop-off reduction at Synchrony handoff, and engagement with financing modules, ensuring design decisions were tied directly to measurable outcomes.
This phase reframed the Verizon Visa® Card as more than a promotion—it became a strategically embedded product feature, optimized to inform, empower, and retain Verizon customers throughout the digital sales journey.
03: Architecture & Workflow
Structuring Clarity: Designing Adaptive Flows and Information Architecture to Guide Verizon Visa Card Adoption.
With the UX strategy in place, we turned our focus to designing a system architecture and workflow model that could support a seamless integration of the Verizon Visa® Card across Verizon’s digital ecosystem—from device discovery to final checkout.
The challenge wasn’t just visual it was architectural. The e-commerce experience spanned multiple funnels, platforms (desktop, mobile web, My Verizon app), and user types (individual, business, upgrade, add-a-line) all with varying eligibility and decision-making contexts.
Information Architecture Structure:
We mapped the full digital sales flow to identify the right insertion points for card messaging and interaction:
Gridwall – Entry point where users begin shopping for devices. Here, we embedded subtle “Financing Available” flags tied to device pricing, nudging awareness early.
Product Detail Page (PDP) – Introduced modular financing widgets comparing monthly device pricing with and without the Verizon Visa Card (e.g., 0% APR for 36 months).
Cart Flow (Steps 1–5) – Integrated the card as a default financing method, with benefits like Verizon Dollars, $150 bonus, and soft credit check messaging surfaced contextually.
Synchrony Prequal Redirect – Built logic to surface credit-optimized microcopy and brand-consistent transition screens to minimize disruption during handoff.
We used a modular component architecture to enable flexibility across journeys while maintaining consistency:
Value Callouts – Card savings embedded in pricing breakdowns
Tooltip Prompts – Inline education for rewards, APR, and soft check clarity
Lead-In Screens – Pre-qual opt-in experiences before redirect
Eligibility Modules – Dynamic content based on customer type (new, existing, business)
Workflow Optimization:
We collaborated with engineering and product leads to map the decision-making workflow a user would experience:
View device price → 2. See financing comparison → 3. Opt-in for prequal → 4. Redirect to Synchrony → 5. Return to Checkout with card applied
To reduce abandonment, we introduced guardrails like:
Sticky navigation reminders of rewards
Prequal microcopy that emphasized “No impact to credit score”
Preview screens of what to expect during the Synchrony flow
The resulting architecture ensured that the Verizon Visa Card was not siloed, but interwoven into the logic and flow of the overall purchase journey, with smart entry points, contextual education, and minimized disruption—all while supporting scalability across lines of business and device types.
04: Wireframing & Prototyping
Bringing the Verizon Visa Card Experience to Life Through Seamless Wireframes and Interactive Prototypes
Once the architecture and workflows were defined, we began wireframing and prototyping key interaction points to visualize how the Verizon Visa® Card would integrate into the digital sales flow without creating friction or confusion.
Our wireframing process focused on task clarity, progressive disclosure, and brand consistency, ensuring that users could easily understand the value of the card at the right moment—without being overwhelmed or diverted from their primary goal: purchasing a device or plan.
Key Wireframe Use Cases:
Gridwall Device Teaser: Included subtle card references near device pricing, with hover states offering “As low as $22/mo with Verizon Visa Card.”
Product Detail Page (PDP): Designed a dynamic pricing module comparing standard and card-financed monthly payments, supported by expandable tooltips that explained 0% APR and Verizon Dollar earnings.
Cart Step 1.2 – Offer Interstitial: Created promotional interstitials encouraging users to apply the card toward bundled offers (e.g., tablets, watches) with bold callouts on extended financing and rewards.
Cart Step 5 – Profile & Prequal Entry: Wireframed an opt-in module for credit card prequalification with strong reassurance copy (“No impact to your credit score”), and a CTA that flowed into Synchrony’s hosted experience.
Synchrony Prequal Preview: Designed a lead-in screen simulating what users would see upon redirect—helping set expectations and reduce drop-off during the third-party handoff.
Prototyping & Interaction Design:
We developed clickable prototypes in Figma to simulate key paths, including:
Comparing monthly payments across financing types
Triggering context-aware educational tooltips
Prequal opt-in behavior and error states
Card-added checkout flow with updated rewards summary
These prototypes allowed stakeholders across product, legal, and engineering to interact with the proposed experience and provide early feedback on regulatory messaging, UI consistency, and technical feasibility.
Feedback Loop:
We conducted internal usability reviews and heuristic walkthroughs, focusing on:
Information clarity: Were benefits clearly understood at a glance?
Conversion support: Did CTA placements encourage forward movement?
Flow resilience: Did the design account for errors, edge cases, and back-navigation?
Prototyping also helped us validate assumptions before engaging with Synchrony’s tech team, ensuring that all interactions we envisioned could be adapted to their hosted environment where applicable.
Ultimately, this phase translated architecture into testable experiences, aligned stakeholders around intent, and prepared us for full user testing with real Verizon customers.
05: User Testing & Validation
Validating Trust and Value: How User Testing Shaped the Verizon Visa Card Experience.
To ensure the Verizon Visa® Card experience was both effective and trustworthy, we conducted multiple rounds of user testing and validation focused on conversion-critical touchpoints, educational clarity, and interaction confidence—particularly where financial decisions were involved.
We recruited a mix of existing Verizon customers, including:
First-time buyers
Device upgraders
Multiline account holders
Budget-conscious users actively comparing financing options
Testing Formats:
Moderated remote usability sessions (Figma prototypes with guided tasks)
A/B testing of opt-in modules, tooltip styles, and CTA phrasing
Post-session surveys focused on trust, clarity, and likelihood to proceed with a card offer
Key Tasks We Tested:
Comparing standard pricing vs. Verizon Visa Card financing
Understanding the implications of 0% APR and Verizon Dollars
Navigating the Synchrony Bank prequalification redirect
Returning to Verizon checkout after prequal completion
Locating card benefits across the Gridwall, PDP, and Cart flow
Key Insights:
Users responded positively to early card exposure, especially when contextualized with real monthly savings on the PDP
Trust dropped during the redirect to Synchrony, particularly if the handoff felt abrupt or unbranded
Many users didn’t fully grasp Verizon Dollars until presented in specific, outcome-based terms (e.g., “$150 toward your next phone bill”)
Tooltip-based education worked better than dense FAQs or static banners
First-time buyers were more cautious but highly motivated by no-credit-impact messaging
Design Adjustments Based on Feedback:
Introduced a Synchrony preview screen to set expectations and maintain visual continuity
Refined all CTAs to emphasize “No impact to your credit score” earlier in the flow
Updated reward messaging to use conversational, benefit-first copy
Consolidated card benefit breakdowns into interactive collapsible modules for mobile
This phase validated our assumption that timing, tone, and transparency were critical to user confidence when engaging with a financial product. It also ensured that the experience didn’t just meet marketing goals—it truly supported user decision-making at each stage of the funnel.
Ultimately, testing confirmed that with the right cues and flow structure, we could turn a passive offer into an active value proposition—one that felt native to the Verizon brand and trusted by its customers.
06: Implmentation & Handoff
Seamless Execution: Delivering High-Fidelity Designs and Cross-Functional Alignment for Verizon Visa Card Integration
With flows validated through user testing, we moved into final visual design—building a cohesive, responsive UI system that balanced marketing clarity, financial transparency, and Verizon’s brand voice.
Our goal was to create an experience that communicated trust and value at every touchpoint, while remaining compliant with accessibility standards and adaptable across platforms—from desktop and mobile web to the My Verizon app.
Visual Design Principles:
Brand Consistency: Designed in accordance with Verizon’s digital design system (typography, spacing, color, iconography) to maintain familiarity throughout the flow—even during third-party transitions
Financial Transparency: Used neutral backgrounds, clear borders, and bold text for key information like APR rates, credit limits, and card benefits
Contextual Emphasis: Color was applied sparingly and semantically—red for required legal info, green for savings/rewards, and dark accents for device financing modules
Modular UI Elements: Built reusable visual components (tooltips, savings callouts, reward badges) that scaled across Gridwall, PDP, Cart, and Checkout
Accessibility Enhancements:
Designed to meet WCAG 2.1 AA standards for color contrast and readable type hierarchy
Ensured all interactive modules (tooltips, accordion panels, CTAs) supported keyboard navigation and screen readers
Created alt-text standards for all card assets and benefit illustrations
Optimized touch targets and visual clarity for mobile-first scenarios, including error prevention in opt-in states
Synchrony Integration:
We collaborated closely with Synchrony’s UX and development teams to ensure the prequalification application matched Verizon’s visual system as closely as possible:
Shared a UI token guide to help align color, type, and layout across domains
Proposed revised handoff screens that reinforced trust with preview modals and brand-stable messaging
Recommended updates to Synchrony’s form field treatments and spacing to reduce cognitive load on mobile devices
We also introduced micro-interactions and soft animations to guide attention during high-friction moments—such as a card offer expanding in-cart or a loading spinner between redirects—adding polish without distraction.
Ultimately, our visual system helped frame the Verizon Visa® Card as a native, value-driven enhancement to the digital shopping journey—not a disruption. It provided users with a sense of continuity, clarity, and control as they moved from consideration to prequalification to checkout.
07: Post-Launch Optimization
Driving Continuous Improvement: Data-Driven Optimizations to Maximize Verizon Visa Card Adoption and Checkout Performance
With visual design finalized and accessibility standards validated, we transitioned into the engineering handoff and implementation phase—ensuring the Verizon Visa® Card experience was accurately brought to life across the Verizon.com and My Verizon app platforms.
This phase was critical due to the multi-system coordination required between Verizon’s internal e-commerce stack and Synchrony Bank’s external credit application flow. Our focus was to ensure pixel-accurate translation, responsive behavior across breakpoints, and seamless logic for eligibility, redirect, and fallback states.
Deliverables for Engineering:
Fully annotated design files in Figma, covering desktop, tablet, and mobile breakpoints
Component libraries with interaction states, token-based styling, and usage guidance
Accessibility specs for keyboard focus order, ARIA roles, and color contrast requirements
Edge case scenarios for declined prequal, session timeouts, and multi-line accounts
Sample copy decks including legal disclaimers, error messages, and alternate CTA versions for testing
We partnered with Verizon’s front-end development team and Synchrony’s integration engineers to align across multiple sprints, using Jira tickets and design QA checklists to track fidelity and performance.
Iteration & QA Highlights:
Synchrony Prequal Flow: Worked directly with Synchrony’s team to adjust typography, spacing, and button styling to more closely mirror Verizon’s UI system. Also advocated for messaging consistency in approval/denial states.
Tooltip Behavior: Refined mobile interactions to ensure tooltips opened inline without overlapping adjacent UI or breaking layout on smaller devices.
Rewards Calculation Module: Iterated on logic for calculating Verizon Dollars based on cart contents, ensuring alignment between product data and card benefits in real-time.
Fallback Flows: Implemented safeguards for users who declined prequalification or dropped out mid-handoff—ensuring continuity back into the standard checkout experience.
We also conducted weekly QA reviews alongside product and legal stakeholders to validate language accuracy, legal compliance, and behavioral edge cases before launch.
The engineering handoff was not a one-time event—it was a collaborative, iterative partnership between design, product, and engineering that ensured the Verizon Visa® Card experience launched with the trust, polish, and performance expected from a flagship Verizon product.
More Works
Verizon Visa Card
UX/UI Technical Case Study
01: Discovery & Research
Laying the Groundwork: Research-Driven Insights to Seamlessly Integrate Fintech into Verizon’s E-Commerce Flow.
Designing the Verizon Visa® Card experience required deep exploration into how financial products could be responsibly and intuitively integrated into an already complex digital retail ecosystem. The opportunity wasn’t just to promote a credit card—it was to embed smart financing into the Verizon customer journey in a way that felt natural, transparent, and rewarding.
We kicked off with stakeholder interviews across Verizon’s Product, Marketing, Legal, and Engineering teams, along with Synchrony Bank, the issuing partner. These sessions surfaced core requirements: compliance with financial regulations, secure handoff to Synchrony’s hosted environment, brand alignment across both ecosystems, and integration with Verizon’s e-commerce infrastructure.
In parallel, we conducted a heuristic audit of Verizon’s existing checkout flow and competitive benchmarking against Apple Card, Affirm, and T-Mobile MONEY. Key patterns emerged:
Financing options that were clear and introduced early in the funnel saw higher conversion
Soft credit checks built trust and reduced perceived risk
Seamless, brand-consistent handoffs were critical in maintaining user confidence during 3rd-party transitions
We also deployed user surveys and interviews targeting Verizon customers across segments (new device buyers, account upgraders, and multi-line family accounts). Common themes included:
Interest in 0% APR financing, but confusion around eligibility
Lack of awareness of Verizon Dollar rewards or how they could be used
Frustration with checkout friction and redundant data entry when transitioning to credit applications
To structure these insights, we developed user personas such as the “Credit-Conscious Optimizer” (looking for long-term value without hurting their score) and the “Bundled Spender” (motivated by perks and rewards tied to device purchases and family plans). These archetypes helped guide when, where, and how we introduced financing offers across the funnel.
The discovery phase clarified both opportunities and constraints—highlighting the need for clear messaging, predictable handoffs, and value propositions that felt immediate and integrated. It also grounded our UX strategy in real user behavior, ensuring the Verizon Visa® Card wasn’t just another offer—but a seamless part of the Verizon purchase experience.
02 Problem Framing & UX Strategy
Transforming Friction into Flow: Strategically Positioning the Verizon Visa Card to Drive Trust, Clarity, and Conversion.
Following our discovery work, we reframed the challenge from simply “offering a credit card” to a more strategic goal:
“How might we embed a financial product into the Verizon digital sales journey in a way that increases value, reduces friction, and builds trust—without disrupting the customer’s path to purchase?”
The Verizon e-commerce flow was already optimized for complex device purchases, promotions, and plan selection. Adding a co-branded credit card introduced new layers of decision-making and compliance, with real financial stakes for the user. Based on user and stakeholder insights, we identified three core UX problems:
Timing & Placement – Card offers surfaced too late in the funnel, often after user commitment had been made or trust was already strained.
Perceived Risk – Unclear financing terms, lack of upfront APR transparency, and redirects to third-party domains introduced friction and abandonment.
Value Disconnect – Users didn’t immediately understand how the card’s benefits (0% APR, Verizon Dollars, $150 bonus) applied to their purchase or future billing.
To solve these, we developed a UX strategy grounded in value-first storytelling, progressive disclosure, and contextual integration throughout the customer journey:
Core UX Strategy Pillars:
Funnel-Aligned Placement: Repositioned the Verizon Visa Card starting from the Gridwall, reinforced in the Product Detail Page (PDP), and strategically surfaced during Cart and Checkout steps—making it feel native, not bolted on.
Context-Aware Education: Integrated card details into tooltips, comparison charts, and embedded modules that aligned with user intent (e.g., financing a device or saving on a multi-line plan).
Trust-Centered Transitions: Collaborated with Synchrony to reduce visual dissonance during redirects, pushing for aligned typography, color, and messaging to preserve the Verizon brand experience through the handoff.
Flexible Messaging Framework: Designed for variable user states (e.g., new customer, upgrading line, business vs. personal account), so card offers were relevant, not generic.
We also redefined KPIs to measure conversion uplift, drop-off reduction at Synchrony handoff, and engagement with financing modules, ensuring design decisions were tied directly to measurable outcomes.
This phase reframed the Verizon Visa® Card as more than a promotion—it became a strategically embedded product feature, optimized to inform, empower, and retain Verizon customers throughout the digital sales journey.
03: Architecture & Workflow
Structuring Clarity: Designing Adaptive Flows and Information Architecture to Guide Verizon Visa Card Adoption.
With the UX strategy in place, we turned our focus to designing a system architecture and workflow model that could support a seamless integration of the Verizon Visa® Card across Verizon’s digital ecosystem—from device discovery to final checkout.
The challenge wasn’t just visual it was architectural. The e-commerce experience spanned multiple funnels, platforms (desktop, mobile web, My Verizon app), and user types (individual, business, upgrade, add-a-line) all with varying eligibility and decision-making contexts.
Information Architecture Structure:
We mapped the full digital sales flow to identify the right insertion points for card messaging and interaction:
Gridwall – Entry point where users begin shopping for devices. Here, we embedded subtle “Financing Available” flags tied to device pricing, nudging awareness early.
Product Detail Page (PDP) – Introduced modular financing widgets comparing monthly device pricing with and without the Verizon Visa Card (e.g., 0% APR for 36 months).
Cart Flow (Steps 1–5) – Integrated the card as a default financing method, with benefits like Verizon Dollars, $150 bonus, and soft credit check messaging surfaced contextually.
Synchrony Prequal Redirect – Built logic to surface credit-optimized microcopy and brand-consistent transition screens to minimize disruption during handoff.
We used a modular component architecture to enable flexibility across journeys while maintaining consistency:
Value Callouts – Card savings embedded in pricing breakdowns
Tooltip Prompts – Inline education for rewards, APR, and soft check clarity
Lead-In Screens – Pre-qual opt-in experiences before redirect
Eligibility Modules – Dynamic content based on customer type (new, existing, business)
Workflow Optimization:
We collaborated with engineering and product leads to map the decision-making workflow a user would experience:
View device price → 2. See financing comparison → 3. Opt-in for prequal → 4. Redirect to Synchrony → 5. Return to Checkout with card applied
To reduce abandonment, we introduced guardrails like:
Sticky navigation reminders of rewards
Prequal microcopy that emphasized “No impact to credit score”
Preview screens of what to expect during the Synchrony flow
The resulting architecture ensured that the Verizon Visa Card was not siloed, but interwoven into the logic and flow of the overall purchase journey, with smart entry points, contextual education, and minimized disruption—all while supporting scalability across lines of business and device types.
04: Wireframing & Prototyping
Bringing the Verizon Visa Card Experience to Life Through Seamless Wireframes and Interactive Prototypes
Once the architecture and workflows were defined, we began wireframing and prototyping key interaction points to visualize how the Verizon Visa® Card would integrate into the digital sales flow without creating friction or confusion.
Our wireframing process focused on task clarity, progressive disclosure, and brand consistency, ensuring that users could easily understand the value of the card at the right moment—without being overwhelmed or diverted from their primary goal: purchasing a device or plan.
Key Wireframe Use Cases:
Gridwall Device Teaser: Included subtle card references near device pricing, with hover states offering “As low as $22/mo with Verizon Visa Card.”
Product Detail Page (PDP): Designed a dynamic pricing module comparing standard and card-financed monthly payments, supported by expandable tooltips that explained 0% APR and Verizon Dollar earnings.
Cart Step 1.2 – Offer Interstitial: Created promotional interstitials encouraging users to apply the card toward bundled offers (e.g., tablets, watches) with bold callouts on extended financing and rewards.
Cart Step 5 – Profile & Prequal Entry: Wireframed an opt-in module for credit card prequalification with strong reassurance copy (“No impact to your credit score”), and a CTA that flowed into Synchrony’s hosted experience.
Synchrony Prequal Preview: Designed a lead-in screen simulating what users would see upon redirect—helping set expectations and reduce drop-off during the third-party handoff.
Prototyping & Interaction Design:
We developed clickable prototypes in Figma to simulate key paths, including:
Comparing monthly payments across financing types
Triggering context-aware educational tooltips
Prequal opt-in behavior and error states
Card-added checkout flow with updated rewards summary
These prototypes allowed stakeholders across product, legal, and engineering to interact with the proposed experience and provide early feedback on regulatory messaging, UI consistency, and technical feasibility.
Feedback Loop:
We conducted internal usability reviews and heuristic walkthroughs, focusing on:
Information clarity: Were benefits clearly understood at a glance?
Conversion support: Did CTA placements encourage forward movement?
Flow resilience: Did the design account for errors, edge cases, and back-navigation?
Prototyping also helped us validate assumptions before engaging with Synchrony’s tech team, ensuring that all interactions we envisioned could be adapted to their hosted environment where applicable.
Ultimately, this phase translated architecture into testable experiences, aligned stakeholders around intent, and prepared us for full user testing with real Verizon customers.
05: User Testing & Validation
Validating Trust and Value: How User Testing Shaped the Verizon Visa Card Experience.
To ensure the Verizon Visa® Card experience was both effective and trustworthy, we conducted multiple rounds of user testing and validation focused on conversion-critical touchpoints, educational clarity, and interaction confidence—particularly where financial decisions were involved.
We recruited a mix of existing Verizon customers, including:
First-time buyers
Device upgraders
Multiline account holders
Budget-conscious users actively comparing financing options
Testing Formats:
Moderated remote usability sessions (Figma prototypes with guided tasks)
A/B testing of opt-in modules, tooltip styles, and CTA phrasing
Post-session surveys focused on trust, clarity, and likelihood to proceed with a card offer
Key Tasks We Tested:
Comparing standard pricing vs. Verizon Visa Card financing
Understanding the implications of 0% APR and Verizon Dollars
Navigating the Synchrony Bank prequalification redirect
Returning to Verizon checkout after prequal completion
Locating card benefits across the Gridwall, PDP, and Cart flow
Key Insights:
Users responded positively to early card exposure, especially when contextualized with real monthly savings on the PDP
Trust dropped during the redirect to Synchrony, particularly if the handoff felt abrupt or unbranded
Many users didn’t fully grasp Verizon Dollars until presented in specific, outcome-based terms (e.g., “$150 toward your next phone bill”)
Tooltip-based education worked better than dense FAQs or static banners
First-time buyers were more cautious but highly motivated by no-credit-impact messaging
Design Adjustments Based on Feedback:
Introduced a Synchrony preview screen to set expectations and maintain visual continuity
Refined all CTAs to emphasize “No impact to your credit score” earlier in the flow
Updated reward messaging to use conversational, benefit-first copy
Consolidated card benefit breakdowns into interactive collapsible modules for mobile
This phase validated our assumption that timing, tone, and transparency were critical to user confidence when engaging with a financial product. It also ensured that the experience didn’t just meet marketing goals—it truly supported user decision-making at each stage of the funnel.
Ultimately, testing confirmed that with the right cues and flow structure, we could turn a passive offer into an active value proposition—one that felt native to the Verizon brand and trusted by its customers.
06: Implmentation & Handoff
Seamless Execution: Delivering High-Fidelity Designs and Cross-Functional Alignment for Verizon Visa Card Integration
With flows validated through user testing, we moved into final visual design—building a cohesive, responsive UI system that balanced marketing clarity, financial transparency, and Verizon’s brand voice.
Our goal was to create an experience that communicated trust and value at every touchpoint, while remaining compliant with accessibility standards and adaptable across platforms—from desktop and mobile web to the My Verizon app.
Visual Design Principles:
Brand Consistency: Designed in accordance with Verizon’s digital design system (typography, spacing, color, iconography) to maintain familiarity throughout the flow—even during third-party transitions
Financial Transparency: Used neutral backgrounds, clear borders, and bold text for key information like APR rates, credit limits, and card benefits
Contextual Emphasis: Color was applied sparingly and semantically—red for required legal info, green for savings/rewards, and dark accents for device financing modules
Modular UI Elements: Built reusable visual components (tooltips, savings callouts, reward badges) that scaled across Gridwall, PDP, Cart, and Checkout
Accessibility Enhancements:
Designed to meet WCAG 2.1 AA standards for color contrast and readable type hierarchy
Ensured all interactive modules (tooltips, accordion panels, CTAs) supported keyboard navigation and screen readers
Created alt-text standards for all card assets and benefit illustrations
Optimized touch targets and visual clarity for mobile-first scenarios, including error prevention in opt-in states
Synchrony Integration:
We collaborated closely with Synchrony’s UX and development teams to ensure the prequalification application matched Verizon’s visual system as closely as possible:
Shared a UI token guide to help align color, type, and layout across domains
Proposed revised handoff screens that reinforced trust with preview modals and brand-stable messaging
Recommended updates to Synchrony’s form field treatments and spacing to reduce cognitive load on mobile devices
We also introduced micro-interactions and soft animations to guide attention during high-friction moments—such as a card offer expanding in-cart or a loading spinner between redirects—adding polish without distraction.
Ultimately, our visual system helped frame the Verizon Visa® Card as a native, value-driven enhancement to the digital shopping journey—not a disruption. It provided users with a sense of continuity, clarity, and control as they moved from consideration to prequalification to checkout.
07: Post-Launch Optimization
Driving Continuous Improvement: Data-Driven Optimizations to Maximize Verizon Visa Card Adoption and Checkout Performance
With visual design finalized and accessibility standards validated, we transitioned into the engineering handoff and implementation phase—ensuring the Verizon Visa® Card experience was accurately brought to life across the Verizon.com and My Verizon app platforms.
This phase was critical due to the multi-system coordination required between Verizon’s internal e-commerce stack and Synchrony Bank’s external credit application flow. Our focus was to ensure pixel-accurate translation, responsive behavior across breakpoints, and seamless logic for eligibility, redirect, and fallback states.
Deliverables for Engineering:
Fully annotated design files in Figma, covering desktop, tablet, and mobile breakpoints
Component libraries with interaction states, token-based styling, and usage guidance
Accessibility specs for keyboard focus order, ARIA roles, and color contrast requirements
Edge case scenarios for declined prequal, session timeouts, and multi-line accounts
Sample copy decks including legal disclaimers, error messages, and alternate CTA versions for testing
We partnered with Verizon’s front-end development team and Synchrony’s integration engineers to align across multiple sprints, using Jira tickets and design QA checklists to track fidelity and performance.
Iteration & QA Highlights:
Synchrony Prequal Flow: Worked directly with Synchrony’s team to adjust typography, spacing, and button styling to more closely mirror Verizon’s UI system. Also advocated for messaging consistency in approval/denial states.
Tooltip Behavior: Refined mobile interactions to ensure tooltips opened inline without overlapping adjacent UI or breaking layout on smaller devices.
Rewards Calculation Module: Iterated on logic for calculating Verizon Dollars based on cart contents, ensuring alignment between product data and card benefits in real-time.
Fallback Flows: Implemented safeguards for users who declined prequalification or dropped out mid-handoff—ensuring continuity back into the standard checkout experience.
We also conducted weekly QA reviews alongside product and legal stakeholders to validate language accuracy, legal compliance, and behavioral edge cases before launch.
The engineering handoff was not a one-time event—it was a collaborative, iterative partnership between design, product, and engineering that ensured the Verizon Visa® Card experience launched with the trust, polish, and performance expected from a flagship Verizon product.
More Works
Verizon Visa Card
UX/UI Technical Case Study
01: Discovery & Research
Laying the Groundwork: Research-Driven Insights to Seamlessly Integrate Fintech into Verizon’s E-Commerce Flow.
Designing the Verizon Visa® Card experience required deep exploration into how financial products could be responsibly and intuitively integrated into an already complex digital retail ecosystem. The opportunity wasn’t just to promote a credit card—it was to embed smart financing into the Verizon customer journey in a way that felt natural, transparent, and rewarding.
We kicked off with stakeholder interviews across Verizon’s Product, Marketing, Legal, and Engineering teams, along with Synchrony Bank, the issuing partner. These sessions surfaced core requirements: compliance with financial regulations, secure handoff to Synchrony’s hosted environment, brand alignment across both ecosystems, and integration with Verizon’s e-commerce infrastructure.
In parallel, we conducted a heuristic audit of Verizon’s existing checkout flow and competitive benchmarking against Apple Card, Affirm, and T-Mobile MONEY. Key patterns emerged:
Financing options that were clear and introduced early in the funnel saw higher conversion
Soft credit checks built trust and reduced perceived risk
Seamless, brand-consistent handoffs were critical in maintaining user confidence during 3rd-party transitions
We also deployed user surveys and interviews targeting Verizon customers across segments (new device buyers, account upgraders, and multi-line family accounts). Common themes included:
Interest in 0% APR financing, but confusion around eligibility
Lack of awareness of Verizon Dollar rewards or how they could be used
Frustration with checkout friction and redundant data entry when transitioning to credit applications
To structure these insights, we developed user personas such as the “Credit-Conscious Optimizer” (looking for long-term value without hurting their score) and the “Bundled Spender” (motivated by perks and rewards tied to device purchases and family plans). These archetypes helped guide when, where, and how we introduced financing offers across the funnel.
The discovery phase clarified both opportunities and constraints—highlighting the need for clear messaging, predictable handoffs, and value propositions that felt immediate and integrated. It also grounded our UX strategy in real user behavior, ensuring the Verizon Visa® Card wasn’t just another offer—but a seamless part of the Verizon purchase experience.
02 Problem Framing & UX Strategy
Transforming Friction into Flow: Strategically Positioning the Verizon Visa Card to Drive Trust, Clarity, and Conversion.
Following our discovery work, we reframed the challenge from simply “offering a credit card” to a more strategic goal:
“How might we embed a financial product into the Verizon digital sales journey in a way that increases value, reduces friction, and builds trust—without disrupting the customer’s path to purchase?”
The Verizon e-commerce flow was already optimized for complex device purchases, promotions, and plan selection. Adding a co-branded credit card introduced new layers of decision-making and compliance, with real financial stakes for the user. Based on user and stakeholder insights, we identified three core UX problems:
Timing & Placement – Card offers surfaced too late in the funnel, often after user commitment had been made or trust was already strained.
Perceived Risk – Unclear financing terms, lack of upfront APR transparency, and redirects to third-party domains introduced friction and abandonment.
Value Disconnect – Users didn’t immediately understand how the card’s benefits (0% APR, Verizon Dollars, $150 bonus) applied to their purchase or future billing.
To solve these, we developed a UX strategy grounded in value-first storytelling, progressive disclosure, and contextual integration throughout the customer journey:
Core UX Strategy Pillars:
Funnel-Aligned Placement: Repositioned the Verizon Visa Card starting from the Gridwall, reinforced in the Product Detail Page (PDP), and strategically surfaced during Cart and Checkout steps—making it feel native, not bolted on.
Context-Aware Education: Integrated card details into tooltips, comparison charts, and embedded modules that aligned with user intent (e.g., financing a device or saving on a multi-line plan).
Trust-Centered Transitions: Collaborated with Synchrony to reduce visual dissonance during redirects, pushing for aligned typography, color, and messaging to preserve the Verizon brand experience through the handoff.
Flexible Messaging Framework: Designed for variable user states (e.g., new customer, upgrading line, business vs. personal account), so card offers were relevant, not generic.
We also redefined KPIs to measure conversion uplift, drop-off reduction at Synchrony handoff, and engagement with financing modules, ensuring design decisions were tied directly to measurable outcomes.
This phase reframed the Verizon Visa® Card as more than a promotion—it became a strategically embedded product feature, optimized to inform, empower, and retain Verizon customers throughout the digital sales journey.
03: Architecture & Workflow
Structuring Clarity: Designing Adaptive Flows and Information Architecture to Guide Verizon Visa Card Adoption.
With the UX strategy in place, we turned our focus to designing a system architecture and workflow model that could support a seamless integration of the Verizon Visa® Card across Verizon’s digital ecosystem—from device discovery to final checkout.
The challenge wasn’t just visual it was architectural. The e-commerce experience spanned multiple funnels, platforms (desktop, mobile web, My Verizon app), and user types (individual, business, upgrade, add-a-line) all with varying eligibility and decision-making contexts.
Information Architecture Structure:
We mapped the full digital sales flow to identify the right insertion points for card messaging and interaction:
Gridwall – Entry point where users begin shopping for devices. Here, we embedded subtle “Financing Available” flags tied to device pricing, nudging awareness early.
Product Detail Page (PDP) – Introduced modular financing widgets comparing monthly device pricing with and without the Verizon Visa Card (e.g., 0% APR for 36 months).
Cart Flow (Steps 1–5) – Integrated the card as a default financing method, with benefits like Verizon Dollars, $150 bonus, and soft credit check messaging surfaced contextually.
Synchrony Prequal Redirect – Built logic to surface credit-optimized microcopy and brand-consistent transition screens to minimize disruption during handoff.
We used a modular component architecture to enable flexibility across journeys while maintaining consistency:
Value Callouts – Card savings embedded in pricing breakdowns
Tooltip Prompts – Inline education for rewards, APR, and soft check clarity
Lead-In Screens – Pre-qual opt-in experiences before redirect
Eligibility Modules – Dynamic content based on customer type (new, existing, business)
Workflow Optimization:
We collaborated with engineering and product leads to map the decision-making workflow a user would experience:
View device price → 2. See financing comparison → 3. Opt-in for prequal → 4. Redirect to Synchrony → 5. Return to Checkout with card applied
To reduce abandonment, we introduced guardrails like:
Sticky navigation reminders of rewards
Prequal microcopy that emphasized “No impact to credit score”
Preview screens of what to expect during the Synchrony flow
The resulting architecture ensured that the Verizon Visa Card was not siloed, but interwoven into the logic and flow of the overall purchase journey, with smart entry points, contextual education, and minimized disruption—all while supporting scalability across lines of business and device types.
04: Wireframing & Prototyping
Bringing the Verizon Visa Card Experience to Life Through Seamless Wireframes and Interactive Prototypes
Once the architecture and workflows were defined, we began wireframing and prototyping key interaction points to visualize how the Verizon Visa® Card would integrate into the digital sales flow without creating friction or confusion.
Our wireframing process focused on task clarity, progressive disclosure, and brand consistency, ensuring that users could easily understand the value of the card at the right moment—without being overwhelmed or diverted from their primary goal: purchasing a device or plan.
Key Wireframe Use Cases:
Gridwall Device Teaser: Included subtle card references near device pricing, with hover states offering “As low as $22/mo with Verizon Visa Card.”
Product Detail Page (PDP): Designed a dynamic pricing module comparing standard and card-financed monthly payments, supported by expandable tooltips that explained 0% APR and Verizon Dollar earnings.
Cart Step 1.2 – Offer Interstitial: Created promotional interstitials encouraging users to apply the card toward bundled offers (e.g., tablets, watches) with bold callouts on extended financing and rewards.
Cart Step 5 – Profile & Prequal Entry: Wireframed an opt-in module for credit card prequalification with strong reassurance copy (“No impact to your credit score”), and a CTA that flowed into Synchrony’s hosted experience.
Synchrony Prequal Preview: Designed a lead-in screen simulating what users would see upon redirect—helping set expectations and reduce drop-off during the third-party handoff.
Prototyping & Interaction Design:
We developed clickable prototypes in Figma to simulate key paths, including:
Comparing monthly payments across financing types
Triggering context-aware educational tooltips
Prequal opt-in behavior and error states
Card-added checkout flow with updated rewards summary
These prototypes allowed stakeholders across product, legal, and engineering to interact with the proposed experience and provide early feedback on regulatory messaging, UI consistency, and technical feasibility.
Feedback Loop:
We conducted internal usability reviews and heuristic walkthroughs, focusing on:
Information clarity: Were benefits clearly understood at a glance?
Conversion support: Did CTA placements encourage forward movement?
Flow resilience: Did the design account for errors, edge cases, and back-navigation?
Prototyping also helped us validate assumptions before engaging with Synchrony’s tech team, ensuring that all interactions we envisioned could be adapted to their hosted environment where applicable.
Ultimately, this phase translated architecture into testable experiences, aligned stakeholders around intent, and prepared us for full user testing with real Verizon customers.
05: User Testing & Validation
Validating Trust and Value: How User Testing Shaped the Verizon Visa Card Experience.
To ensure the Verizon Visa® Card experience was both effective and trustworthy, we conducted multiple rounds of user testing and validation focused on conversion-critical touchpoints, educational clarity, and interaction confidence—particularly where financial decisions were involved.
We recruited a mix of existing Verizon customers, including:
First-time buyers
Device upgraders
Multiline account holders
Budget-conscious users actively comparing financing options
Testing Formats:
Moderated remote usability sessions (Figma prototypes with guided tasks)
A/B testing of opt-in modules, tooltip styles, and CTA phrasing
Post-session surveys focused on trust, clarity, and likelihood to proceed with a card offer
Key Tasks We Tested:
Comparing standard pricing vs. Verizon Visa Card financing
Understanding the implications of 0% APR and Verizon Dollars
Navigating the Synchrony Bank prequalification redirect
Returning to Verizon checkout after prequal completion
Locating card benefits across the Gridwall, PDP, and Cart flow
Key Insights:
Users responded positively to early card exposure, especially when contextualized with real monthly savings on the PDP
Trust dropped during the redirect to Synchrony, particularly if the handoff felt abrupt or unbranded
Many users didn’t fully grasp Verizon Dollars until presented in specific, outcome-based terms (e.g., “$150 toward your next phone bill”)
Tooltip-based education worked better than dense FAQs or static banners
First-time buyers were more cautious but highly motivated by no-credit-impact messaging
Design Adjustments Based on Feedback:
Introduced a Synchrony preview screen to set expectations and maintain visual continuity
Refined all CTAs to emphasize “No impact to your credit score” earlier in the flow
Updated reward messaging to use conversational, benefit-first copy
Consolidated card benefit breakdowns into interactive collapsible modules for mobile
This phase validated our assumption that timing, tone, and transparency were critical to user confidence when engaging with a financial product. It also ensured that the experience didn’t just meet marketing goals—it truly supported user decision-making at each stage of the funnel.
Ultimately, testing confirmed that with the right cues and flow structure, we could turn a passive offer into an active value proposition—one that felt native to the Verizon brand and trusted by its customers.
06: Implmentation & Handoff
Seamless Execution: Delivering High-Fidelity Designs and Cross-Functional Alignment for Verizon Visa Card Integration
With flows validated through user testing, we moved into final visual design—building a cohesive, responsive UI system that balanced marketing clarity, financial transparency, and Verizon’s brand voice.
Our goal was to create an experience that communicated trust and value at every touchpoint, while remaining compliant with accessibility standards and adaptable across platforms—from desktop and mobile web to the My Verizon app.
Visual Design Principles:
Brand Consistency: Designed in accordance with Verizon’s digital design system (typography, spacing, color, iconography) to maintain familiarity throughout the flow—even during third-party transitions
Financial Transparency: Used neutral backgrounds, clear borders, and bold text for key information like APR rates, credit limits, and card benefits
Contextual Emphasis: Color was applied sparingly and semantically—red for required legal info, green for savings/rewards, and dark accents for device financing modules
Modular UI Elements: Built reusable visual components (tooltips, savings callouts, reward badges) that scaled across Gridwall, PDP, Cart, and Checkout
Accessibility Enhancements:
Designed to meet WCAG 2.1 AA standards for color contrast and readable type hierarchy
Ensured all interactive modules (tooltips, accordion panels, CTAs) supported keyboard navigation and screen readers
Created alt-text standards for all card assets and benefit illustrations
Optimized touch targets and visual clarity for mobile-first scenarios, including error prevention in opt-in states
Synchrony Integration:
We collaborated closely with Synchrony’s UX and development teams to ensure the prequalification application matched Verizon’s visual system as closely as possible:
Shared a UI token guide to help align color, type, and layout across domains
Proposed revised handoff screens that reinforced trust with preview modals and brand-stable messaging
Recommended updates to Synchrony’s form field treatments and spacing to reduce cognitive load on mobile devices
We also introduced micro-interactions and soft animations to guide attention during high-friction moments—such as a card offer expanding in-cart or a loading spinner between redirects—adding polish without distraction.
Ultimately, our visual system helped frame the Verizon Visa® Card as a native, value-driven enhancement to the digital shopping journey—not a disruption. It provided users with a sense of continuity, clarity, and control as they moved from consideration to prequalification to checkout.
07: Post-Launch Optimization
Driving Continuous Improvement: Data-Driven Optimizations to Maximize Verizon Visa Card Adoption and Checkout Performance
With visual design finalized and accessibility standards validated, we transitioned into the engineering handoff and implementation phase—ensuring the Verizon Visa® Card experience was accurately brought to life across the Verizon.com and My Verizon app platforms.
This phase was critical due to the multi-system coordination required between Verizon’s internal e-commerce stack and Synchrony Bank’s external credit application flow. Our focus was to ensure pixel-accurate translation, responsive behavior across breakpoints, and seamless logic for eligibility, redirect, and fallback states.
Deliverables for Engineering:
Fully annotated design files in Figma, covering desktop, tablet, and mobile breakpoints
Component libraries with interaction states, token-based styling, and usage guidance
Accessibility specs for keyboard focus order, ARIA roles, and color contrast requirements
Edge case scenarios for declined prequal, session timeouts, and multi-line accounts
Sample copy decks including legal disclaimers, error messages, and alternate CTA versions for testing
We partnered with Verizon’s front-end development team and Synchrony’s integration engineers to align across multiple sprints, using Jira tickets and design QA checklists to track fidelity and performance.
Iteration & QA Highlights:
Synchrony Prequal Flow: Worked directly with Synchrony’s team to adjust typography, spacing, and button styling to more closely mirror Verizon’s UI system. Also advocated for messaging consistency in approval/denial states.
Tooltip Behavior: Refined mobile interactions to ensure tooltips opened inline without overlapping adjacent UI or breaking layout on smaller devices.
Rewards Calculation Module: Iterated on logic for calculating Verizon Dollars based on cart contents, ensuring alignment between product data and card benefits in real-time.
Fallback Flows: Implemented safeguards for users who declined prequalification or dropped out mid-handoff—ensuring continuity back into the standard checkout experience.
We also conducted weekly QA reviews alongside product and legal stakeholders to validate language accuracy, legal compliance, and behavioral edge cases before launch.
The engineering handoff was not a one-time event—it was a collaborative, iterative partnership between design, product, and engineering that ensured the Verizon Visa® Card experience launched with the trust, polish, and performance expected from a flagship Verizon product.
More Works