top of page
How might we reimagine the Billboard Top 100 to cultivate delight and engagement for music lovers, beyond a static scroll?
UX Design
@ John Hancock
Experimental
Roles
Product Designer
Team
Maha Almatari
Dario Ortiz (Developer)
Duration
4 weeks
August - October 2023
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Project Overview
Project Overview
All my product design work has delivered on the usual constraints: business goals met, deadlines respected, budgets kept. So…what comes after that?
Play!
Delight!
Pleasure!
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Objective
This experimental redesign reimagines the Billboard Hot 100, condensed here to a curated Top 50, as an interactive experience. It’s a re-imagination of an otherwise predictable static list.
How can UX transform when we go beyond the communicating the functional and into cultivating delight?
Feedback from user survey
Featured UX
As I worked through this project, I held onto a few key tenets:
-
Don't reinvent the wheel. Move past redesigning a UI, and study why users didn’t resonate with the former experience, and apply these insights to your reiterations.
-
Design for how people actually behave. Leverage psychology to design towards natural human behavior.
-
Think outcome-first. Create direction for the user, not dead ends, that unite the them and the business forward.
Feedback from user survey
Objective
A former retirement calculator failed to resonate with users. I was called to rethink the experience and define a Minimum Viable Product (MVP) for the Personal Investing portal.
A former retirement calculator failed
For users: Deliver a retirement readiness experience that helps them understand where they stand and how to improve. This means making a complex and often overwhelming topic feel approachable and actionable.
-
For users: Deliver a retirement readiness experience that helps them understand where they stand and how to improve. This means making a complex and often overwhelming topic feel approachable and actionable.
-
For John Hancock: Create a trust-building moment that introduces users to our new Managed IRA offering, meeting them with value at the right time in their journey.
-
Uncover the behaviors, pain points, and moments of ease for users with visual or fine motor disabilities navigating our investing platform.
-
Identify key areas to improve digital accessibility and preserve user loyalty.
-
Define this unheard user group as a core John Hancock audience that shape future design decisions.
-
Engage stakeholders in expanding accessibility as a pillar that is explorative, generative, and human, rather than merely “compliant”.
Feedback from user survey
Problem
A former retirement calculator failed to resonate with users. I was called to rethink the experience and define a Minimum Viable Product (MVP) that not only resonates with user but aligns with John Hancock’s business goals.
Feedback from user survey
Featured Designs
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Insights from Past Users
Insights from Past Users
Preparatory Research: Leveraging Existing Research
Challenge
Stakeholders were eager to launch a competitive retirement planner—fast. With limited time, starting new research from scratch wasn’t feasible.
Solution
Instead, I analyzed existing primary research from past user interviews to uncover core sentiments around retirement uncertainty. Here’s what surfaced:
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Former User Interview Question:
Do you know if you will have enough
money to cover your expenses in retirement?
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Initial Problem Statement
How might we build a retirement calculator that help users know if they're on the right track to retirement?
How the Beta Performed
How the Beta Performed
Auditing a Failed Retirement Planner
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Before ideating, I examined data analytics of the previous, underperforming retirement planner to identify engagement drop-offs.
User Insights
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
-
Discovery point: Most users didn’t engage on with the tile or email promoting the retirement planner.
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Design Opportunity #1
How might we capture user interest at the discovery point and encourage initial engagement?
-
Users quitting: For those who clicked the email, they didn’t complete the onboarding modal process.
Design Opportunity #2
How might we create an onboarding experience that encourages users to complete the process and stay engaged?
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
UX Heuristics Audit of Former Retirement Planner
I audited the planner for usability issues, keeping in mine the ten usability heuristics.
Here are the problems I identified:
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Step 1: Onboarding Modal
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
1. All the questions are placed on one modal, increasing the cognitive load.
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
2. The modal asked for personal information that is sensitive, such as their health and income, without explicit reason as to how it will be used.
Design Opportunity
How might we instill trust and safety within the users when asking for their sensitive information?
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Step 2: Retirement Planner
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
3. Choice paralysis: So many filters to use become overwhelming for the users to play with, increasing the cognitive load again (Hick’s Law).
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
4. No next step or clear line of action for users to follow.
Design Opportunity
How might we provide users with clear next steps that guide them toward improving their retirement readiness?
User Insights
Insight 1/2
Discovery point: Most users didn’t engage on with the tile or email promoting the retirement planner.
Insight 2/2
Process: For those who clicked the email, they didn’t complete the onboarding modal process.
Design Opportunity
How might we capture user interest at the discovery point and encourage initial engagement?
Skip to final design
Design Opportunity
How might we create an onboarding experience that encourages users to complete the process?
Skip to Final Design
Design Opportunity
How might we instill trust and safety within the users when asking for their sensitive information?
Skip to Final Design
Design Opportunity
How might we provide users with clear next steps that guide them toward improving their retirement readiness?
Skip to Final 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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Affinity Mapping
Affinity Mapping
Defining User Needs and MVP Offerings
I mapped insights from the former Retirement Planner, a competitive research report on retirement tools, and a marketing survey on how users choose investment funds. Then, in yellow post-its, I ideated summary MVP offerings for a redesigned retirement calculator.
Drag and zoom into this imbedded Figma file!
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Research Takeaways
Research Takeaways
UX Impacts
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
1
Viewing documents has consistently scored the lowest completion rate out of other purposes.*
Insight #1
2
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #2
3
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #3
4
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Insight #4
Next Steps
Next Steps
Title
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 with 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.
Final Designs
UX Solution 2.5/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.
UX Solution 3/3
CTA on highly-visited "Account overview" page offers quick access to "Account documents"
Responsive Prototype
Final Designs
Next
Project
bottom of page