John Hancock
•
Finance

Designing an Offline-First Sales Tool for a Mobile Workforce

John Hancock, a major financial services company, needed a tool to help its agents explain retirement strategies to clients on the go.

Role:
UX Design, UI Design, Consulting. I led the design of a web application that functioned like a native app, translating complex financial data into simple visuals while navigating significant technical constraints.
Result:
Delivered a fully cacheable, web-based tool that empowered agents to sell effectively in offline environments, turning a technical limitation into a competitive advantage.
View Site:

The Problem

John Hancock sought to empower their agents with a tool to simplify and enhance conversations about retirement planning and investment strategies. The challenge was that corporate restrictions on agent devices—locked-down tablets and iPads with limited functionality—required the tool to be provisioned as a web application. To further complicate matters, agents often worked in areas with unreliable Wi-Fi or no data access.

The Goal

The project required:

  • A web-based solution that functioned like a native app.
  • Compatibility with older-generation devices.
  • Translation of complex Excel-based financial calculations into clear, user-friendly visuals.

My Process & Design

  1. Designing for Offline-First Functionality
    1. The biggest challenge was connectivity. I designed a web application using WebKit that was fully cacheable on agent devices. This ensured agents could access and use the tool's interactive features seamlessly, even in locations with no data access. The design was also optimized for older-generation tablets to ensure universal access.
  2. Translating Complexity into Visual Simplicity
    1. I worked closely with John Hancock's product teams to deconstruct complex Excel retirement projections. My primary UX task was to translate this data into an intuitive interface. I designed clear, simple data visualizations that made it easy for agents to walk clients through different investment strategies and their potential outcomes.

Solution & Results

  • Empowered Agents: The tool provided agents with a powerful, mobile-friendly solution, enabling them to sell retirement products effectively regardless of location or connectivity.
  • Improved Client Understanding: Simplified visuals and interactive features helped clients grasp retirement strategies, enhancing trust and decision-making.
  • Increased Sales Effectiveness: Agents gained a competitive edge with a tool that functioned smoothly in offline settings, turning technology challenges into strengths.

Lessons Learned

This project was a crucial lesson in turning constraints into features. The need for an offline-first web app, initially seen as a limitation, became the tool's greatest strength and a key competitive differentiator. It proved that deeply understanding the user's real-world environment (in this case, agents with poor connectivity) is non-negotiable for designing tools that are not just functional, but indispensable.

Let’s create experiences that matter.
© 2017-2025 Sprucepop Inc.