Blue Cross Blue Shield of Illinois
Duration
3 years
My Role
Senior Product Designer
Core Focus
Native Mobile Payments
A.I Powered Provider Finder
Design System
Seamless In-App Payment Experience
Case Study: Blue Cross Blue Shield Illinois — Native Mobile Payment
Overview
Led the redesign of BCBS Illinois mobile payments system, transforming a fragmented external web flow into a seamless in-app experience. The project focused on reducing friction while maintaining enterprise-level security standards.
Challenge
BCBS Illinois wanted to improve premium payment functionality in their mobile app. At the time, members had to leave the app, reauthenticate, and complete payments through an external web flow — a major source of friction.
Goal
- •Create a secure, in-app payment system that integrates native payment functionality directly into the mobile app.
- •Establish the balance of user convenience and enterprise security requirements
- •Eliminate external redirects and streamlined the payment process.
- •Provide a way to offer saved payment methods for faster repeat transactions.
- •Provide clarity and trust through confirmation and visual cues.
The Process
A comprehensive look at the research, architecture, and prototyping phases that shaped the native payment experience. Each stage built upon user insights to create a seamless, secure payment flow.
Journey Mapping & User Research
To understand the root causes of friction within the mobile payments experience, we conducted a mixed-methods research study supported by a detailed journey mapping exercise. This helped uncover where members struggled most and how those pain points directly impacted both user satisfaction and business outcomes.
Key Findings
Surveys (n=500): 63% dissatisfied with leaving the app for payments; 48% missed payments due to cumbersome browser login.
Usability Testing (n=12): High drop-off when redirected to external site; frustration with redundant authentication steps and lack of continuity.
Journey Mapping: Exposed a critical break at the point of payment intent, creating an incomplete end-to-end experience.
Heuristic Evaluation: Confirmed payment-related tasks scored lowest in satisfaction (CSAT) and contributed to weak retention and engagement metrics.
Business Impact: Mobile payment completion rates lagged significantly behind desktop, reducing compliance and increasing support costs.
Information Architecture
As part of the redesign for BCBS IL's native payment flow, the Information Architecture phase was critical in clarifying how users would move through the payment journey. At this stage, I focused on structuring the content and interactions so members could quickly understand where they were, what action was required, and how to complete their payment securely without leaving the app.
Key Highlights
Reduce cognitive load by eliminating redundant steps.
Align IA with existing mental models around online payments.
Ensure compliance and security requirements were layered in without breaking flow.
Provide the foundation for a streamlined, 3-step structure (Select → Confirm → Done).
Wireframes & Prototyping
After defining the Information Architecture, I moved into wireframing and prototyping to validate the proposed payment experience. The goal at this stage is to translate abstract workflows into tangible user flows, ensuring the design balanced simplicity, compliance, and user trust. Using low-fidelity wireframes, I mapped out the two core user journeys. Laying out both making a payment and updating payment settings to visualize the step-by-step interactions. By creating clickable prototypes, I tested navigation, error handling, and confirmation flows with stakeholders and pilot users before committing to high-fidelity design.
Key Highlights
Mapped critical flows: Built wireframes for both one-time payment and recurring payment settings journeys.
Error state exploration: Designed paths for expired cards, failed transactions, and account verification failures.
Progressive disclosure: Broke down complex tasks into smaller steps (Select → Confirm → Success).
Prototype testing: Interactive prototypes allowed rapid validation with stakeholders and uncovered early usability issues.
Compliance alignment: Wireframes embedded required security steps while maintaining flow continuity.
The Solution
A comprehensive in-app payment system that prioritizes user experience while maintaining security.
Streamlined login and dashboard with integrated payment access
Native payment flow with auto-pay setup and bank account selection
Comprehensive spending tracking and deductible management
Outcome & Impact
Quantifiable improvements across user satisfaction, task completion, and business metrics. The redesigned payment experience delivered measurable value for both members and the organization.
Payment Completion Rate
+27%increase compared to legacy browser-based flow. Keeping members 'in one lane' dramatically reduced drop-offs at the point of payment intent.
Task Success Rate
91%of usability participants completed payment without assistance (vs. 42% in baseline). Simplified authentication and clear steps drove success.
Customer Satisfaction
Top 40%Payment-related satisfaction moved from bottom quartile to top 40%. Members appreciated the seamless, anxiety-free payment experience.
Business Impact
Reduced CallsDecreased call center volume for billing inquiries and reduced missed payments, directly impacting business operations and member retention.
Reflection
Key insights from designing within enterprise constraints while prioritizing user needs. This reflection explores the balance between security requirements and user experience simplicity.
"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."