John Hancock
A summer with John Hancock's
HCD department.
UX Strategy
UI Design
Design Systems
Context
📋 Overview
In the summer of 2023, I worked at John Hancock as a Product Design intern in their human-centered design department. Here, I developed a public-facing digital experience in a webpage for a new product for John Hancock, impacting their millions of customers.
In this case study, I will focus on how I developed these interfaces using John Hancock's design system.
Project Brief &
Problem
John Hancock is a life insurance companies with a variety of policies. Premier Benefit IUL (PBIUL) is a policy aimed at companies to offer as apart of their benefits package for employees.
We have three primary user groups:
-> Employees
-> Employers
-> Producers (people who sell the policy)
⚡️ The Challenge
How can we provide an experience that conveys the necessary information to all of these user groups?
All these usergroups have varying levels of visibility, so the main challenge here was to reveal information to some users, but hide it from others. Employees need to know some things, they don't need to know what producers do.
Research
This project allowed for hands on use with a fully-developed design system, which was an exciting moment for me.
My first step was to audit existing John Hancock product pages to assess the layout, common components, and systems employed to display information, to ensure a consistent user experience across digital products.
Design
This project was heavily accelerated due to my short time with John Hancock (3 months). Fortunately, the CDS at John Hancock was incredibly robust and allowed me to rapidly iterate at a high fidelity level. Stakeholders could additionally refer to specific components they thought were successful, and I could easily turn over a high amount of iterations at request.
What I learnt from this is when designing for a large company that already has a very grounded and unique user experience, maintaining that same experience through the public-facing content is incredibly important, and an effective CDS can support this better than designing everything from scratch.
Design process
User Testing
Due to the protected nature of this product, all of our user testing was conducted internally, which was different from my other experiences on other projects at John Hancock where we used Usertesting.com.
My colleague and I set up a system to test different components that we were using to display information and measure how effective they were.
We received some key feedback around accessibility, like not using flip-cards as they can present issues for text-to-speech readers.
Design process
Final Design
Once we had verified the different components with stakeholders and copywriters, I pieced them together for desktop and responsive layouts, before handing them off to engineering.
The key problem in the different visibility levels we solved through a tabulated system, along with storing more sensitive information in a producer database only they could access.
Takeaways
🖌️ The role of the designer
A big takeaway from this project and my time at John Hancock at large was that sometimes as a designer, you need to come to terms that even if you design something that a stakeholder or client doesn't want, that is important in stepping towards what the client does want.
It was my first time working in a more corporate setting, and coming off some more startup-oriented roles I often tried to find novel ways to display information. Tried and true components offer a fast and effective solution, you don't always need to reinvent the wheel.
Credits
Skills
UX Strategy
UX Design
UI Design
Design Systems
Tools
Figma
FigJam
Adobe Experience Manager
team
Design
Max Spencer
Jade Gao
Mei Smith
