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
“It’s not the easiest app ever, but if you’re motivated to use it, you can figure it out. The learning curve is not bad once you get in there - it’s just if you need to access a specific part, you just need to do a bit of digging.”
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
“I thought there would be a little more advice or suggestions on what to do. I’m figuring out what else is in here.”
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 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.
I used design components from the recently designed Vitality One mobile app since John Hancock had yet to adopt a design system.
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.
“This looks pretty good, I like it. It seems to be easier, cleaner, and all encompassing on all Activities you can earn points in. This is what was missing on the app today.”
Participants were tasked with finding specific Activities and Rewards using the new pattern, like finding the Vitality Health Review.
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.
“There’s a lot of improvements here. The Activities and Rewards are cleaner and easier to find.”
Users were tasked with finding specific Activities and Rewards, and simultaneously discovered Activities and Rewards found on the responsive website.
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.
“I love this. It’s much more streamlined, way more attractive, and everything you can do to earn points is in big bold letters.”
Getting proof that users of all experience types were able to navigate the new pattern to find current and upcoming Activities and Rewards, Manulife invested in the mobile app redesign.