JohnHancock.com Homepage Redesign
Design Brief: Redesign key touchpoints on JohnHancock.com to shift the user experience from marketing-centric to service-oriented, ensuring easier access to critical actions and product service flows.
My Role: Lead UX/UI Designer – responsible for digital strategy review, analytics interpretation, wireframes, high-fidelity prototypes, and usability testing.
Intended Audience: Current customers, Prospective financial professionals, Prospective customers, Current financial professionals
Timeline: 3 Months
Certain aspects of this project are under NDA. Please get in touch to know more.
The Process
Problem Statement
JohnHancock.com’s existing homepage and core pages leaned heavily toward brand and marketing storytelling. Through internal feedback and analytics, it became clear that:
Users struggled to locate specific service-related actions.
Key journeys such as accessing policies or finding product information were buried or non-intuitive.
There was a disconnect between what users wanted and how content was structured.
Research & Discovery
Digital Strategy Audit: Analyzed the digital strategy deck and identified gaps in service visibility.
Traffic Analysis: Used Adobe Analytics to identify high-traffic pages:
Sign In
Homepage
Carrers
Long-Term Care (LTC)
Contact Us
Annuities
Strategic Takeaways
“Sign In” and “Home” are primary access points for service.
There’s an opportunity to guide users proactively via intent-based navigation.
Product discovery and quick links should be embedded early in the homepage journey.
Design Goals
Make service pathways intuitive and front-facing.
Reduce the friction of finding relevant product information.
Modernize the layout to reflect user intent and task-based navigation.
Design Exploration
Prototype 1: Product-First Navigation
Showcased three main product categories up front.
Each section included a “See More” toggle to expose deeper service links.
Goal: Visually anchor users around core offerings and guide them into task flows.
Structure Breakdown
Hero Section
Messaging: Live Stronger, Live Better — aligns with the wellness brand voice.
CTA: “Learn more about us” builds trust for first-time users and aligns with internal branding goals.
Product Highlight (Modular Grid)
Insurance, Investments, Retirement : the three primary pillars, visually split for clarity.
Each block includes:
A short description focused on value proposition.
A CTA: “See more about [product]” linking to service flows or educational content.
Careers Section
Secondary brand goal to attract talent.
High contrast CTA (“Work with us”) designed to stand out, supporting DEI and employer branding.
Business-Focused Footer Modules
Tailored for Financial Professionals and Plan Sponsors.
Aligns with one of the top-trafficked audiences.
Includes service links or resource CTAs.
