MANULIFE
Card Activation
UX Research, XYX
BUSINESS IMPACT
Executing the new in-app activation flow is projected to reduce average call handle time by 10 minutes per call for 10,000+ customers.
Existing activation process generated thousands of support calls per month.
Each activation call averaged 10+ minutes of agent time.
141.7K existing inactive cards - a major opportunity to increase card usage, revenue, and customer engagement
USER PROBLEM
Card activation was handled entirely via phone, disconnected from the digital experience
This disconnect lead to
User friction and drop-off
High support costs
Missed opportunity for in-app engagement
FUTURE
I envisioned a central card management hub that goes beyond just card activation - including pin reset, card lock/unlock, lost/stolen reports - all in one place
Designing the activation flow with this future state in mind ensured scalability and consistency within the system architecture.
DESIGN CHALLENGE - ITERATION 1
How might we enable users to seamlessly activate their card in-app, while laying the groundwork for a scalable, unified card management experience?
HYPOTHESE
A hub-style layout would best support scale
Key UX needs (discovered later) would include:
Clear instructions on card code/PIN
Confirmation and success feedback
Contextual help options
RESEARCH & COMPETITIVE AUDIT
Findings:
Most competitors use visual prompts showing where to find the card details
Progressive disclosure works well for multi-step flows
Help is offered contextually, but subtly
Method: Reviewed competitor experiences (5 apps), mapped end-to-end flows, A/B and Usability testing
DESIGN CHALLENGE - ITERATION 2
Based on findings, I focused on the highest impact enhancements:
Visual guidance for where to find activation info (e.g., PIN/code)
Embedded support options to reduce user frustration
Handling multi-card activation cases cleanly
Promoting card features without distracting from the primary action
DESIGN SYSTEM CONSIDERATIONS
Reusable components for future card hub screens
Accessibility and error states for older users or complex cases
Offline/online integration (e.g., matching physical card to digital instructions)
EDGE CASES
Multi-card activations
Replacements vs new cards
Activation after extended delay (e.g., 30+ days)
DESIGN SYSTEM CONSIDERATIONS
Reusable components for future card hub screens
Accessibility and error states for older users or complex cases
Offline/online integration (e.g., matching physical card to digital instructions)
This disconnect lead to
User friction and drop-off
High support costs
Missed opportunity for in-app engagement
How do I draw frames?
To draw a Frame, click on Layout in the Toolbar, then select Frame. Now, you can click and drag anywhere on the Canvas.
How do I add images?
To add an image, select any Frame, and either double-click on it, or go to the Fill property. In the Fill property, switch to the image icon. Here, you can upload images.
How do I add videos?
To add a video to your site, click the “Insert” button and navigate to the “Media” section. Then, drag and drop a video component onto the Canvas.
OUTCOMES AND BUSINESS VALUE
The new in-app card activation flow was designed, validated, and implemented in collaboration with engineering and CX with a future-ready Card Management Hub in mind.
Aligning with the broader goals of reducing operational costs and increasing product adoption
Eliminates friction for over 10,000 users by enabling self-serve digital activation (in initial rollout)
Saves ~1,800 agent hours/year (10.9K calls × 10 mins)
Activates a pathway for 141.7K inactive cards
DESIGN SYSTEM CONSIDERATIONS
Reusable components for future card hub screens
Accessibility and error states for older users or complex cases
Offline/online integration (e.g., matching physical card to digital instructions)
This disconnect lead to
User friction and drop-off
High support costs
Missed opportunity for in-app engagement
How do I draw frames?
To draw a Frame, click on Layout in the Toolbar, then select Frame. Now, you can click and drag anywhere on the Canvas.
How do I add images?
To add an image, select any Frame, and either double-click on it, or go to the Fill property. In the Fill property, switch to the image icon. Here, you can upload images.
How do I add videos?
To add a video to your site, click the “Insert” button and navigate to the “Media” section. Then, drag and drop a video component onto the Canvas.
DESIGN SYSTEM CONSIDERATIONS
Reusable components for future card hub screens
Accessibility and error states for older users or complex cases
Offline/online integration (e.g., matching physical card to digital instructions)
This disconnect lead to
User friction and drop-off
High support costs
Missed opportunity for in-app engagement
How do I draw frames?
To draw a Frame, click on Layout in the Toolbar, then select Frame. Now, you can click and drag anywhere on the Canvas.
How do I add images?
To add an image, select any Frame, and either double-click on it, or go to the Fill property. In the Fill property, switch to the image icon. Here, you can upload images.
How do I add videos?
To add a video to your site, click the “Insert” button and navigate to the “Media” section. Then, drag and drop a video component onto the Canvas.