Role: Principal Product Design Manager
UX/UI Overhaul
AppX, a B2C mobile wallet application that transforms paper credentials into reusable digital credentials, allowing users to manage, grant, and revoke access to personal information such as bank accounts, licenses, insurance, etc, it had failed to achieve product market fit over a 24-month period. Although it was paving the way for the future of zero-knowledge proof credentials, its UX/UI was plagued with issues that many early-stage product solutions face:
- 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 goals:
- Redefine the product’s brand and establish a new set of visual guidelines.
- Develop a scalable component library that meets WCAG Level 2 standard sacross 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
A comprehensive usability audit was conducted against the AppX experience, where we asked questions such as, “Where do users experience difficulties?” and “What does the data tell us about a user’s behaviour and their needs?”. The results helped us uncover 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
Below is an exploration map of how credentials in the wallet could be re-categorized. Since many credentials had overlapping attributes, it was possible that a credential could live in more than one category. Understanding this, we were able to consolidate the number of categories presented to a user for ease of way-finding.
User Journeys
Prioritization
In order for our team to understand where we could have the most impact, we needed to validate our usability audit discoveries against some user flows. In order to do this, we needed to take a step back and review the phases of our journeys that we deemed the highest priority. Discoveries that aligned with our journey opportunities were prioritized higher than those that did not.
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, most 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 once completed.
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 out about AppX through external marketing efforts.
As early adopters who love sharing their findings with others and aren’t afraid to take risks, the most important phase for these users was the welcoming phase – AppX’s first impression. These users may not fully understand the true value of what AppX offers, so it was important for the app to put focus on education and, most importantly, it had to work flawlessly as discovered users had very high expectations for app design and user experience.
By identifying the most important phases of these two user journeys, we were able to uncover key pain points and opportunities to improve each of their experiences through similar solutions.
User Flows
Alignment
With the user journey prioritizations set, we then mapped out user flows to validate our findings against all of the decision-making points that each user would be required to navigate in the product. For our introduced user, it was important that we focused on improving their ability to onboard, while our discovered user desired a more delightful and intentional experience.
One of my favourite aspects of building out user flows is that they 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 task completely. By identifying these bumps and resolving them, we were able to reduce the number of steps, creating a cleaner and more intuitive user experience.
Although we knew our time-to-value would improve, that didn’t mean the paths were correct. We were still making assumptions and our solutions needed to be tested with real people.
Research & User Testing
Validation
In order to validate or disprove assumptions, you must validate against real human expectations and there’s no better way to be enlightened than by putting your ideas in front of real people as early as possible. Our testing results directed us towards taking action to improve one of the most important user flows of our product, the one that had the most impact on both of our identified users – onboarding.
Three different user tests (outlined below) we set up to inform our decisions, each of which included questions that would help us better understand the following aspects of our users:
- 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?
Key discoveries and takeaways:
- 62% of users preferred a longer onboarding experience because it helped them build trust
- 61% of users opted to skip reading terms and conditions, but 83% stated they would read them if the presentation was changed
- 50% of all users tested chose biometrics over passcodes as their primary method of authentication
- Older users (50+) had low risk tolerance for failure, while younger users (18-34) had very high risk tolerance and were willing to accept failure as part of learning
- Users have preconceived expectations for what an onboarding flow should look like – if you want to deviate, do it with a clearly defined purpose
- The more transparent an experience is about the why, the greater the trust with their users and the more willing they are to comply
To our surprise, we discovered that while onboarding experiences are expected by users, many interpret them as necessary hurdles, which meant that they were not always happy about it. With that outcome, we had an opportunity to build trust and value early by simply adjusting the experience to either eliminate or help resolve those hurdles that many users have trained themselves to robotically endure.
Below is a summary of the three onboarding tests we conducted.
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
In addition to the development of our user journeys and flows, a comprehensive competitive analysis was completed so that we could understand the full line of products in our target market and to our delight, all of our competitors were showcasing the same UX/UI issues that we had previously identified. Being in such a nascent space, this was validation that all solutions were being built in a similar way – we were all trying to solve a similar problem and were producing similar solutions as a result.
This also meant that we were in a position to break away from the herd and stand out from the others.
Branding & Design
First, we worked with a partner agency to develop a fun and exciting new brand, one that spoke to a younger audience and used unique imagery that wasn’t present in our market.
Second, we spent time developing a new foundational design system that we could use for not only this product, but all new product ideas moving through the lab’s pipeline. It was important that this overhaul was not a one-time solution and that moving forward, all new ideas 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 see how each component would display across a variety of viewports and appearance modes.
In addition to building out components that supported the various contextual states of the product, we also defined both a light and dark colour palette using the Material Design surface overlay methodology. The methodology seeks to “reduce the luminance emitted by device screens while still meeting minimum colour contrast ratios”, which allowed us to implement a modern and accessible UI structure that we could customize. We also made sure that every colour combination met WCAG 2.1 Level A and Level AA success criteria.
Then there was the iconography, an output that many designers love to create from scratch. For this project, it was important for us to ensure our icon family was scaleable and easy to implement. We opted to utilize the Material Design font library for its robustness and scalability. It was a ‘work smarter, not harder’ decision that saved us a lot of time.
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. Some of those challenges were:
- Organization – How credentials were grouped and accessed.
- Messaging – How use-cases were communicated.
- Presentation – How we presented credential lifecycle states.
AppX utilizes biometrics as the 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 during their relationship with the product, such as:
- 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?
All designs outlined above are the exclusive intellectual property of ATB Financial and may not be saved, copied, shared, or reproduced in any form.
