Enhancing a wealth manager's security center with improved layout, copy, and biometric login.
Duration:
8 months
Industry:
Wealth Management
Platforms:
Web, Mobile
Areas:
Research, IA, UX, UI, Copy
Background
A wealth manager was concerned about recent cyberattacks and data leaks.
They wanted users to adopt more secure settings when they signed into their profiles.
Users had expressed confusion regarding the security centers settings.
Problem Statement
How might we increase usage of the most secure settings on the security center page and also make it easier for users to understand?
User Research & Analysis
I joined midway through the UX project to take over for a departing designer. At this point user interviews and testing had been conducted. My role started by analyzing the user insights from testing. I was able to come up with the following insights:
Insights
Comprehension: users were familiar with some basic terms, but could not define many security-related terms.
Labeling: users associated security titles with the benefits or outcomes of the service.
IA: most groups of security settings were in line with what users expected, with the exception of a few settings.
Recommendations
Simplify security terms where possible, and add hover over tooltips for quick reference.
Include language explaining the benefits of enrolling in security settings to the user.
IA: Re-categorize one security setting to be in the group most users expected it to be.
Adding a New Security Setting
Soon after this research effort happened, a new method of biometric security was announced: passkeys.
The client wanted to understand the benefits and shortfalls of passkeys, as well what the experience might look like on their site and app. With that, I proceeded to conduct extensive market research and showcase what the experience might look like on the client's platforms.
With this added research, I helped the product owners come to the decision that we should include this as a new setting and incorporate it into the designs.
Wireframing & Prototyping
I proceeded to create wireframes, clickable prototypes, and developer specifications. At this time, the client did not have access to Figma and I was working in Sketch, so it was up to me to create specification documents to facilitate developers' coding process.
Outcomes
Finalized high-fidelity designs.
Added developer notes for clarity.
Included a comparison page for before and after screens.
Participated in agile daily standups to address developer questions throughout the development process.
Provided visual QA feedback to developers.
Lessons Learned & Next Steps
Stepped into the middle of a discovery process, which was challenging.
Continued the design process without being part of initial discovery and usability testing.
Trusted and asked questions to fellow designer to fill knowledge gaps.
Leveraged expertise of Product Owners who had extensive experience with the product.
