Blue Cross Blue Shield of Illinois
Seamless In-App Payment Experience
Led the redesign of BCBS Illinois mobile payments system, transforming a fragmented external web flow into a seamless in-app experience focused on reducing friction while maintaining enterprise-level security standards.
The Challenge
BCBS Illinois members were forced to leave the app, reauthenticate, and complete premium payments through an external web browser — a major source of friction and drop-off at a critical moment in the member journey.
Surveys of 500 members revealed 63% were dissatisfied with leaving the app to make payments, and 48% had missed payments because of the cumbersome browser login process.
Usability testing uncovered high drop-off at the redirect point, frustration with redundant authentication steps, and a critical break in the end-to-end experience at the moment of payment intent. Payment-related tasks scored lowest in CSAT and were directly increasing support costs.
The Solution
What We Designed
We redesigned the payment flow as a fully native in-app experience, eliminating external redirects entirely. The new system followed a streamlined 3-step structure — Select → Confirm → Done — reducing cognitive load at every step while meeting all enterprise security and compliance requirements.
What We Built
The implementation centered on native payment integration with saved payment methods, auto-pay setup, and bank account management — all within the existing app security model. Progressive disclosure kept each step focused and anxiety-free, with clear confirmation and visual trust cues throughout.
What Made It Unique
- Fully native payment flow eliminating all external redirects and re-authentication
- Saved payment methods for faster one-click repeat transactions
- Auto-pay setup with clear confirmation and visual trust cues
- Progressive 3-step structure: Select → Confirm → Done, reducing cognitive load
- Enterprise security requirements embedded without breaking the user flow
The Process
Journey Mapping & User Research
Weeks 1–3Conducted a mixed-methods research study with surveys (n=500) and usability testing (n=12) to surface friction points. Journey mapping exposed the critical break at the point of payment intent.
Heuristic Evaluation
Weeks 3–4Payment-related tasks scored lowest in CSAT. Analysis confirmed mobile payment completion rates lagged significantly behind desktop, reducing compliance and increasing support costs.
Information Architecture
Weeks 4–6Restructured the payment content and interactions into a clear 3-step model. Focused on reducing cognitive load, aligning with existing mental models around online payments, and layering in compliance without breaking flow.
Wireframes & Prototyping
Weeks 6–10Built wireframes for one-time and recurring payment journeys. Designed error states for expired cards, failed transactions, and verification failures. Interactive prototypes validated flows with stakeholders and pilot users.
High-Fidelity Design & Testing
Weeks 10–14Delivered pixel-perfect designs aligned to the BCBS design system. Conducted two rounds of usability testing to validate the redesigned flow before engineering handoff.
Launch & Measurement
Weeks 14–16Coordinated with engineering on implementation, monitored post-launch metrics, and iterated on edge cases surfaced through production usage.
What We Built
A comprehensive solution covering strategy, design, development, and growth.
UX Research
Mixed-methods research including surveys (n=500), usability testing (n=12), journey mapping, and heuristic evaluation.
UX & UI Design
End-to-end native payment flow design, information architecture, wireframes, and high-fidelity mockups aligned to the BCBS design system.
Prototyping
Interactive prototypes for one-time and recurring payment journeys with full error state coverage.
Systems Design
Design system contributions including payment-specific components, states, and accessibility patterns.
Security & Compliance
Security and compliance requirements embedded directly into the UX, maintaining enterprise standards without sacrificing usability.
Growth Optimization
Post-launch measurement and iteration based on CSAT, task completion, and payment conversion metrics.
The Results
Real metrics that demonstrate the impact of strategic design and engineering.
Increase vs. legacy browser-based flow
Usability participants completed without assistance (vs. 42% baseline)
Payment CSAT moved from bottom quartile to top 40%
Reduction in missed payments due to flow friction
Select → Confirm → Done, down from a multi-page external redirect
Decreased call center volume for billing and payment inquiries
“This project taught me that even within highly regulated industries, there's space for simplicity. By mapping the system holistically, we uncovered friction points invisible to siloed teams. The lesson: always align design solutions with both enterprise constraints and user emotional states.”
Tech Stack
Modern, scalable technologies chosen for performance and developer experience.
Design
Research
Platform
Tools
Why It Worked
End-to-End Journey Mapping
Mapping the full payment journey — including the external web flow — exposed friction points that siloed teams couldn't see on their own.
Research-Led Design Decisions
Every design decision was grounded in user data from surveys and usability testing, not assumptions or internal opinions.
Progressive Disclosure
Breaking the payment into three focused steps — Select, Confirm, Done — reduced cognitive load and eliminated user anxiety at critical moments.
Security as a Feature, Not a Barrier
Rather than working around enterprise security requirements, we embedded them into the UX in ways that built user trust.