Empowering users to easily locate their account documents within their investing portal
Role
Product Designer
Team
Solo project
Constraint
Lack of UXR team support
Duration
8 weeks
UX Design
@ John Hancock
User Research
My design solutions increased NPS by 50% and completion rate by 11% for locating documents.
Data is benchmarked from December 12, 2023, to July 16, 2024, and compared with the same period the prior year.
Featured design solutions


Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
TL:DR
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Solution:
-
description here description heredescription heredescription heredescription heredescription heredescription heredescription.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Project Overview
Project Overview
In John Hancock's Personal Investing (PI) platform, users struggle retrieving their account documents*, leading to low completion rates and high call support costs.
*
Quarterly statements, tax forms, and trade confirmations
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Problem
Viewing documents has consistently scored the lowest completion rate and Net Promoter Scores (NPS) year-to-date (YTD) out of the top reasons to visit our platform.

User Feedback From Survey
“I’m already mad enough because I’m looking for tax documents, and you people are just making it worse.”
Current user flow
-
All document types are grouped under a single page labeled "Account documents."
-
Access is limited to two pathways: under specific accounts (e.g.,'Roth IRA') or hidden within the "Help" section.

Design process
Quantitative Research
Quantitative Research
Let's dig into data. Where are users getting stuck?
Data Insights
Takeaways
Visitors are new or rare
There is significant unfamiliarity with the site that contributes to navigation challenges.
Business impact
Improving the Account Documents flow could not only increase NPS, but result in significant cost savings.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Initial Problem Statement
How might we enable users to find their account documents conveniently?
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
User Research Plan
User Research Plan
How do users actually look for documents?
User Research Plan (Snippet)
Objectives
-
Uncover users' instinctive patterns to locate their account documents within the portal
-
Uncover areas of friction in statements discovery
Sampling Criteria
-
18+, focus on 40-70 (JH’s avg. is 54 yrs)
-
Owns a retirement plan (401(k), IRA, etc.)
Methodology
1.
Moderated Usability Testing
10 participants
Thinking aloud protocol
Task: “You're preparing for tax season and need to find your December 2021 statement for accurate reporting.”
Metrics: Completion rate, Qualitative feedback
2.
Tree Testing (Original vs renamed menu label)
50 participants
Tasks: User locates all three account document types
Metrics: Completion rate, Average time on task
User Insights
User Insights
User Insights
User Insights
Insight 1/2
Users “expected” and “assumed” that quarterly statements would be on the “Account overview” page and the homepage.
Insight 2/2
Most test participants did not locate the statement in their first try.
One took over 2 minutes to locate it!
Insight 1/2
About half of all visitors to the "Account documents" page are new, coming in with little context. Unfamiliarity leads to friction in navigating.
Insight 1/2
Users found the label “Account documents” too ambiguous to understand.
Insight 2/2
Many users depend on email notifications to refer them to their available online documents.
Insight 2/2
No matter the menu label, users expect their trade confirmations to be on the “Transactions history” page.
Insight 1/2
Users have seasonal behavior: they visitaccount documents the most during Q1 .
Insight 2/2
The business cost? A staggering 1 in 5 calls to customer service are users inquiring about their documents.
Design Opportunity
How might we add access to “Account documents” on the top visited pages?
Solution #1
Rename “Account documents” to “Statements, tax, and confirmations”.
Design Opportunity
How might we streamline the process for users to view and download their trade history within “Transactions history”?
Design Opportunity
How might we leverage high user traffic in Q1 to highlight access to their quarterly statements and tax forms?
Solution #2
Use email as a channel to instruct userson how to navigate to “Account documents”.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
User Insights
-
Most participants did not locate the statement in their first try. One user took over 2 minutes to locate it!
Lakeisha took over 2 minutes to locate the December 2021 statement.
Insight #2

Liz
“I expected statements to be available somewhere on the homepage..."

Tova
“I'm assuming that when I'm in my account (overview), I should be able to find my statement."

Michael
“I thought when I hovered over that Traditional IRA (Account overview), that that would have come up.
-
Users navigated to the homepage and the “Account overview” page because they expected their statement to be there.
Design Opportunity
How might we improve access to “Account documents” on the homepage and "Account overview"?
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
User Insights
-
Most test participants did not locate the statement in their first try. One user (below) took over 2 minutes to locate the December 2021 statement.
Lakeisha took over 2 minutes to locate the December 2021 statement.

Click to play
Insight #2
-
Users “expected” that statements would be on the homepage or the “Account overview” page.
Click image to expand
Design Opportunity
How might we increase visibility of “Account documents” on the top visited pages?
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Reframed Problem Statement
How might we understand user expectations and behavioral patterns and mirror it in design?
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Tree Testing
Tree Testing
More transparent page labeling improved users locating documents
Objective
Evaluate the effectiveness of current page label “Account documents” through card sorting and tree testing.
Hypothesis
Renaming the “Account documents” category with the word “statements” and/or “forms” will set clearer user expectations and increase completion rates.
Winning Menu Label
“Statements, tax, and confirmations”
On the nose, but does the job!
Success Rate
~ 85% success rate
Completion Rate
39 seconds
Original Menu Label
“Account documents”
Success Rate
~ 50% success rate
Completion Rate
57 seconds
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
User Insights
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
-
Users found the label “Account documents” too ambiguous, and understood descriptive key labels with "Statements" or "Tax" more.
Solution #1
Rename “Account documents” to “Statements, tax, and confirmations”.
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
-
No matter the category label, users navigated to the "Transactions history” page to locate their trade confirmations.
Design Opportunity
How might we streamline the process for users to view and download their trade history within “Transactions history”?
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Seasonal User Needs
Seasonal User Needs
UX is more than UI: Considering external triggers that shape user behavior
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
User Insights
1
Users have seasonal behavior: they visit account documents the most during Q1 . Seasonal Patterns: Users show increased activity during Q1, primarily for tax-related documents, often relying on email notifications to guide them.
Design Opportunity
How might we leverage high user traffic in Q1 to highlight access to their quarterly statements and tax forms?
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
2
Many users depend on email notifications to guide them to their available online documents.
Solution #2
Use email as a channel to instruct users on how to navigate to “Account documents”.
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
-
Email alerts are sent to users quarterly when statements are released, leading to increased user activity during those periods.
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Solution #2
Use email as a channel to instruct users on how to navigate to “Account documents”.
-
Tax season triggers a spike in user activity during Q1, as users retrieve documents needed to file their taxes.
Design Opportunity
How might we leverage high user traffic in Q1 to highlight access to their quarterly statements and tax forms?
User Flows
User Flows
Mapping future-state user flows to visualize better UX for users
Mapping current and future user flows helped me...
-
Plan research-backed UX/UI decisions
-
Align stakeholders on a shared vision and direction
User Insights
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Research Takeaways
Research Takeaways
Visual summary: Research insights to product decisions
Final Designs
UI Solution 1/3
Show the right info at the right time with seasonal CTA
Adding a seasonal tile during Q1 offers a temporal cue that aligns with users' time-sensitive needs (tax season), for easy access to relevant content (statements, tax forms) when users need them most.


Seasonal call outs for tax forms
This tile is released during Q1, when tax forms are released for users, upon login on the homepage.
Desktop
Mobile
Considering an edge case
For users with multiple accounts, I added a dropdown to the tile to select a specific account statement.


UI Solution 2.1/3
Technical constraints urged me to redesign...
Developers couldn’t cross-link trade confirmation files to create singular download links, so I added a button to a pre-selected filter of "Trade confirmations" of the "Account documents" page within the “Transactions history” page instead.

UI Solution 3/3
Follow user pattern: Add CTA to popular "Account Overview" page for quick access to "Account Documents".

Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Lessons
Lessons
The importance of holistic experience design and stakeholder engagement
1. Consider the omnichannel Experience
By understanding user behavior at every stage—before, during, and after product use—I realized the importance of considering the experience beyond the UI, and how these can prime or confuse the user for their task, like a notification email.
2. Designing for user natural behavior
I learned that sometimes the approach to design is understanding users' natural behaviors and letting that guide the experience. Proactive design meets users where they are to create a seamless, intuitive journey.
3. Communicate to a range of stakeholders early
Think like a detective—you don’t know what you don’t know! Collaborating with the call center manager revealed a hidden part of the user journey to me: they flock to customer service after using our platform.
2. Communicate to a range of stakeholders early
Think like a detective—you don’t know what you don’t know! Collaborating with the call center manager revealed a hidden part of the user journey to me: they flock to customer service after using our platform.
