john hancock/Manulife x vitalityA reusable navigation pattern increased access to high-value activities — and earned a $4M investment from Manulife.
Discovery
Internal research revealed a measurable gap between mobile and web engagement
Result: 62% of members are mobile-first, yet only 7% reach Platinum — vs. 26% of the broader population
Design Strategy
Proposed a reusable navigation pattern connecting all native and responsive web Activities and Rewards
Result: John Hancock approved the approach, contingent on usability validation
Validation
Conducted usability testing with 16 participants across experience levels
Result: Zero critical failures on core task flows; pattern confirmed as discoverable and intuitive
Stakeholder Expansion
John Hancock presented prototype and findings to parent company Manulife
Result: Manulife independently validated the approach and committed to the same redesign
Systemic De-Risking
Reusable component system deployed across John Hancock and Manulife platforms
2.7M global members gained easier access to Activities and Rewards; $4M invested in the Vitality mobile platform
John Hancock and Manulife insurance holders have the benefit of using the Vitality app to track healthy activities with the ultimate goal of reaching Platinum status and reducing their insurance premiums. John Hancock learned that mobile-first users rarely complete enough activities on the responsive website; as the lead UX designer for this effort, I proposed redesigning the mobile app using reusable components to simplify navigation to Activities and ensure future content scalability. The redesign ultimately made Platinum status more achievable for 2.7M global members — and gave both John Hancock and Manulife the confidence to invest in the Vitality platform long-term.
Role
Lead UX Designer
Year
2021
Duration
5 months
Team Members
Business Manager
Project Manager
Product Owner
Developers
John Hancock Stakeholders
My Contributions
Design planning
Project pitch
Research planning
Low & high-fidelity designing
Design library management
Usability testing
Research to design translation
Final designs & prototype
Asset production
Deliverables
Low & high fidelity designs
Prototypes
Executive presentations
Final specs
Final assets
Problem StatementJohn Hancock’s Vitality app has crucial features buried or inconsistently surfaced
“We are NOT fans of waiting for Home Office to review. We have to check regularly for the response with the calculation, then call back the client, then confirm with Home Office how the client wants to continue.”
Engaging with Activities and Rewards is the core value proposition of the whole program — yet the highest point-earning Activities are only accessible through the responsive website. For mobile-first users, this creates a significant barrier to achieving higher statuses, reducing program engagement and undermining the value John Hancock pays to offer.
quantitative research & DiagnosisOnly 7% of app users reach Platinum Status
“Our current process requires branches to submit through different systems depending on the dollar amount, asset movement type, account type, and program type. These requests have to go through Home Office review, leading to delays, inconsistent branch and client experience, and lack of client visibility into the final dollar amount.”
An internal research team found that roughly 62% of John Hancock Vitality members are functionally mobile-first; members log into the mobile app 60x more often than the website — yet the highest point-earning activities were only accessible on the web. Only 7% of app users reach Platinum status, compared to 26% of the broader member population. The data made the problem impossible to ignore: the path to Platinum ran through a platform members almost never visited."
The service blueprint for Excess Removals, illustrating the delays caused by back-and-forth conversations between branches and Home Office.
The Design StrategyA reusable component pattern could solve today's problem and scale for every activity and reward that comes after.
John Hancock initially wanted a minimal design and development effort to float high point-earning activities to the mobile app. I successfully pitched a reusable navigation pattern made of new design components to connect all native and web responsive Activities and Rewards into the mobile app. John Hancock was receptive to the approach, but wanted usability proof before committing to a larger investment than originally scoped — a reasonable ask that set the stage for formal testing.
The proposed service blueprint for Excess Removals, allowing branches direct access to the calculator and reducing 3-5 days from this process.
16 participants across experience levels validated the new navigation — with zero critical failures on core task flows.
Validation & TestingUsability testing with 16 John Hancock insurance holders and non-members across experience levels validated the new tab architecture — confirming the pattern was both discoverable and intuitive. For stakeholders who needed proof before expanding the investment, this was the evidence that moved the project forward.
“... it’s more streamlined and informational - you get more information immediately than filling out a form. We don’t see the earnings or loss on the excess removal now, so having it all right here and immediately calculated I do think is better.”
Martin Tiger’s banking center’s UI, updated with the instant calculation and the ability to select how the amount will be removed from the retirement account.
Usability results gave John Hancock — and Manulife — the confidence to invest
final prototypeJohn Hancock presented the prototype and usability findings to Manulife — their parent company and fellow Vitality partner. The thoroughness of the design rationale and testing results combined with the reusable component system and ease for scalability gave Manulife the confidence to invest in the same mobile redesign for their own platform.
“... it’s more streamlined and informational - you get more information immediately than filling out a form. We don’t see the earnings or loss on the excess removal now, so having it all right here and immediately calculated I do think is better.”
Martin Tiger’s banking center’s UI, updated with the instant calculation and the ability to select how the amount will be removed from the retirement account.
Increased confidence, a $4M investment, and a scalable foundation for future growth
the impactBy reducing the steps between the mobile app and high-value web content, 2.7M global customers gained significantly easier access to Activities and Rewards, designed to significantly lower the barrier to Platinum status for mobile-first members. The reusable card pattern established a scalable foundation for all future content types, reducing design and development overhead for every activity and reward added after launch. Most significantly, the redesign strengthened John Hancock's confidence in Vitality as a platform partner — and gave Manulife enough proof to commit to a $4M investment in the same mobile redesign for their own app.
“... it’s more streamlined and informational - you get more information immediately than filling out a form. We don’t see the earnings or loss on the excess removal now, so having it all right here and immediately calculated I do think is better.”
Martin Tiger’s banking center’s UI, updated with the instant calculation and the ability to select how the amount will be removed from the retirement account.