Role: Principal Product Design Manager
UX/UI Overhaul
A B2C mobile wallet application, AppX transforms paper credentials into reusable digital credentials, allowing users to easily manage, grant, and revoke access to personal information such as bank accounts, licenses, insurance, etc. Although it was paving the way for the future of zero-knowledge proof applications, its UX/UI was plagued with issues and it had failed to achieve product market fit over a 24-month period.
High-level issues:
- Absence of user experience planning and IA mapping
- Non-compliance with modern accessibility standards
- Insufficient brand guidelines and design system
- Relied significantly on stakeholder assumptions that, when layered over time, produced user experience issues and failed to meet user expectations
The before:
How might we
Update the UX/UI in order to offer a clean and modern digital identity wallet experience that is both intuitive and scaleable?
Design and user experience are imperative factors in determining the success of a product in today’s market. Users have increasingly high expectations for quality and ease of use, so it’s important for an app to do more than just solve a problem – it has to work intuitively, be accessible, and connect with people emotionally.
To help AppX achieve success, our team established three high-level objectives:
- Redefine the product’s brand and establish a new set of visual guidelines.
- Develop a scalable component library that meets WCAG Level 2 standards across various display and lighting modes.
- Conduct testing against key user journey opportunities to inform IA directions that ensure quick onboarding and easy way-finding.
The after:
UX Audit
Discovery
I led a comprehensive usability audit of our product, mapping out every screen of the experience in an effort to highlight as many areas for opportunity as possible.
The results helped us formulate three core performance issues that we believed when solved, would help improve the business performance of the product.
User hurdles
Unnecessary steps or experience issues, resulting in poor time-to-value scores (eg. onboarding >0:50 secs):
- External legal documents with poor presentation
- Extensive user profile details such as name, email, phone number, and picture
- Repetition of “okay” confirmations
Confusing interface
Not following user mental model, resulting in high cognitive loads and poor accessibility:
- Visual graphics that looks like functional UI
- Impossible task of hitting QR code scan targets
- Canvas movements not complying with expected behaviour
Technical language
Misleading messaging and lack of consistency, resulting in user error and confusion:
- Improper assignment of functional labels such as “back”, “exit”, “close”, and “cancel”
- Paragraphs in place when a single, concise label would suffice
- No language associated with safety, security, and ownership
Since many credentials had overlapping attributes, it was possible that a credential could live in more than one category. Below is an exploration map of how credentials in the wallet could be re-categorized to improve way-finding.
User Journeys
Prioritization
To understand where we could have the most impact, we validated the results of our audit against our user flows. But first, we needed to take a step back and review the phases of our journeys that we deemed the highest priority.
Introduced Users – Existing customers who were offered AppX as a faster and safer solution to KYC verification for various requests, such as opening a new bank account. They may have been initially unaware that AppX existed, but were open to trying it out as a way to improve their existing experience.
With client KYC experiences remaining relatively unchanged for many years, users were excited when introduced to AppX and the idea that complying with KYC requirements could be performed faster, safer, and would allow them to retain control of their personal information.
Discovered Users – Non-customers who desired a safer and more secure method of managing their digital identities, who actively seek out and try new product offerings, and found AppX through external marketing efforts.
They are early adopters who love sharing findings with others and aren’t afraid to take risks. The most important phase for these users was the welcoming phase – we needed to have a great first impression. These users may not see the initial value, so it was important for our product to put focus on education and, most importantly, it had to work flawlessly to meet the high expectations for design and user experience these users have.
By identifying the most important phases of our journeys, we were able to identify key pain points and opportunities to improve each of their experiences through similar solutions.
User Flows
Alignment
By identifying the most important phases of our journeys, we were able to identify key pain points and opportunities to improve each of their experiences through similar solutions. With prioritized tasks and compared them against all of the decision-making points for each user.
User flows very quickly uncover feature bloat within a product – all of the unnecessary steps and decisions that have the potential to slow users down or distract them from the priority tasks. By identifying these bumps and resolving them, we were able to reduce the number of steps, creating a cleaner and more intuitive user experience.
We assumed the time-to-value would improve, but that didn’t mean the paths were correct. It was an assumption that needed to be tested with real people.
Research & User Testing
Validation
To validate or disprove assumptions, you must test against real human expectations. After leading the team through various test scenarios, our results directed us towards improving our onboarding flow – the most important part of our product and the one that had the most impact on both of our identified users.
Our tests were designed to gather data related to:
- Expectations – What elements of an onboarding experience are users already familiar with, what are they looking for, and what assumptions are they making?
- Emotions – How do users feel about onboarding to a new app? Do they understand each step? Are they building trust with us along the way.
- Effectiveness – Are we effectively communicating the purpose of each step and ensuring that users see value from start to finish?
62% of users preferred a longer onboarding experience
61% of users opted to skip reading terms and conditions
50% of users chose biometric authentication over passcodes
Age played a significant role in determining a user’s level of risk
If you deviate from user expectations, be prepared to clearly explain why
Be transparent about your why in order to build trust
Testing uncovered that while onboarding experiences are expected by users, they are interpreted as necessary hurdles, which meant that they were not always happy about them.
We had an opportunity to build trust and value early by simply adjusting the experience to either eliminate or help resolve hurdles that users have trained themselves to robotically endure.
Onboarding test summaries:
Length of the experience
Evaluate the length of the onboarding experience to determine whether various stages were put into question by users.
When testing a longer experience, we gave the users preference options such as selecting their own method of authentication or offering personal information such as name and phone number, compared to setting default selections and not asking for personal information.
Results
Shorter isn’t always better. 61.9% of users preferred the longer experience that presented them with preference options because it helped them build trust.
There was an even split between authentication choices across all age groups (50% Face ID, 50% Passcode).
Highly visible buttons and CTAs resulted in users missing additional content, such as slides within a carousel.
When presented with the Terms of Use, users liked having the option to skip – it gave them a sense of power and control over what to do next.
No users questioned being asked for personal information, stating that is commonplace.
Takeaways
Expectation vs Reality – Users have assumptions about onboarding flows based on past experiences, so when we deviate from that expectation, we need to be explicit about why.
Data sharing – Many users have come to expect that an application will ask for personal information up front (name, email address, phone number) and are not concerned with sharing it. But the request must still be intentional and have purpose.
Human-centered design – Users desire constant affirmation that the process is going smoothly, so we need to make sure we’re including appropriate messaging that supports tasks and actions.
“I like when I’m given options, like Face ID vs Passcode. It makes me feel like you have my interests at heart and are not just looking out for yourself – you’re looking out for the customer.”–Female, 46
Steps and actions
Evaluate how users interacted with and felt about our desired onboarding experience.
Using results from the first test, we created the second which sought to identify further pain points and improvements. We also tested our users’ knowledge of the industry in which Appx was targeted.
Results
When viewing the welcome carousel, 62% of users did not know what a digital credential was.
77.8% of subjects confirmed that they read welcome screen messaging while 22.2% stated that if presented with the option to, they will skip.
When asked how they felt about using an app that required biometric security instead of a username and password, a majority leaned towards the more positive end of comfort.
People assume that the Terms & Conditions are the same across all apps.
Takeaways
Less is more – We need to ensure that each screen has just the right amount of direction and that cognitive loads are kept relatively small. Young users move quickly and are willing to fail, so we need to support them with the appropriate UX.
Education is key – SSID and biometrics are still quite new for a lot of people. Many users questioned the lack of 2FA and missed the digital identity messaging early on. There is an opportunity for us to build trust and meaningful relationships with our users through transparent communication.
Honest communication – There is an assumption that a digital wallet is meant for finance/crypto, so we need to make sure we’re clearly communicating the purpose and value of our wallet – digital identity now, everything else later.
“I believe this is pretty standard for something like a digital wallet and I feel more comfortable using an app that requires it [biometrics].”—Male, 26
Legal terms presentations
Evaluate users’ interpretations, thoughts, and feelings towards multiple presentation styles of the terms of use.
One of the biggest pain points that came out of test 2 was the terms and conditions section, so for our third test, we wanted to determine the best approach to present the mobile app agreement. The three presentation styles were Full, Progressive, and Doorway.
Results
61% of users opted to skip the terms in the Full presentation.
44.4% of users felt unhappy about the Full presentation style.
83.3% of users said ‘Yes, I would read it” when shown the Progressive presentation, with 94% of all users stating that this was their preferred experience.
Nearly 90% of all users said they would opt to skip the terms in the Doorway presentation and additionally, 50% of all users felt that this presentation style was “untrustworthy” and “suspicious”.
It was apparent that older users (50-65+) required more intuitive UI, while younger users (18-34) had no trouble navigating a broader range of UI.
Overall complexity of an experience is of no concern to users who are receiving value along the way.
Takeaways
Transparency builds trust – There is a strong desire for companies to better communicate with users how their relationship with an app will be monetized. Presenting terms and agreements in an accessible way is one step towards creating and delivering value.
Accessible design creates transparency – Small fonts and large, run-on paragraphs create an immediate lack of trust and suspicion. Putting more effort into translation and presentation will give users more comfort in the relationship.
Effort where it matters – Putting effort into building positive relationships with our users will go a long way. They’re smart and can tell when we’re cutting corners and there is a lack of effort. We have an opportunity to differentiate ourselves through these efforts.
“I have more trust towards apps that show me all of the terms and allow me the option to skip. Put the power into my hands to make those decisions – don’t make them for me.”—Male, 39
Design Systems & Accessibility
Implementation
I also led a comprehensive competitive analysis against our competitor landscape. To our delight, all of our competitors showcased the same UX/UI issues, indicating that bias and assumption was driving the solutions. So we created a more effective and delightful user experience.
Branding & Design
First, we enlisted a partner agency to develop a fun and exciting new brand. One that spoke to a younger audience and used unique 3D imagery that wasn’t present in our market.
Second, I led the development of a new foundational design system that would enhance our design and engineering relationship. It was important that all new products developed by our lab received the same modernized and accessible treatment for their UI.
Lastly, we created individual style libraries in Figma that could be applied to the components of each product. This allowed both designers and engineers to quickly and easily transition new concepts and ideas into production-ready components.
My team and I also defined light and dark appearance modes using the Material Design surface overlay methodology. This methodology seeks to “reduce the luminance emitted by device screens while still meeting minimum colour contrast ratios”.
We also made sure that every colour combination met WCAG 2.1 Level A and Level AA success criteria.
Custom iconography is a beautiful addition to any new product, but it was important to us that our icon family was scaleable and easy to implement for this overhaul. We opted to utilize the Material Design font library for its robustness and scalability.
Experience
AppX included a variety of UX/UI challenges that our team needed to solve in order to ensure a delightful and seamless user experience.
- Organization – How credentials were grouped and accessed.
- Messaging – How use-cases were communicated.
- Presentation – How we presented credential lifecycle states.
- Way-finding – How screens transitioned from one to another.
Biometrics was our primary method of user authentication and although we solved for the initial new user setup, we also needed to solve for all other scenarios that someone could presumably be presented with:
- If the user has already set up biometrics and later changes them, how do they authenticate?
- If a user removes a biometric profile or changes devices, is there a fallback method?
- If the user fails their biometrics a set number of times, what happens?
Unexpected Finish Line
Conclusion
Sadly, not every project gets to see the finish line.
Due to an unexpected organizational restructure, this particular project was not completed during my tenure. However, the team saw our product idea as valuable and impactful and were fully invested in the process and delivery every step of the way.
We were proud of what we were able to accomplish in such a short time and felt positive about the results, especially knowing that future projects would benefit from the utilization and application of our experiences, process improvements and lessons learned.
Below are sample wireframes and additional explorations.
All designs outlined above are the exclusive intellectual property of ATB Financial and may not be saved, copied, shared, or reproduced in any form.
