Improving KYC experience at Quadcode

Improving KYC experience at Quadcode

Improving KYC experience at Quadcode

Joining the SaaS department as the third designer, I took on responsibility for the KYC (Know Your Customer) flow. As the sole designer on the Compliance team, I worked closely with the product owner and compliance development team.

Joining the SaaS department as the third designer, I took on responsibility for the KYC (Know Your Customer) flow. As the sole designer on the Compliance team, I worked closely with the product owner and compliance development team.

UI/UX

Prototyping

Wireframing

DESIGN SYSTEM

Usability testing

User research

design audit

design review

UJM

strategy

MARKET RESEARCH

TIMELINE

Jan 2022 — March 2022

PLARFORM

Android, iOS

context

Quadcode is an international fintech company developing software for the trading and investment industry. Ensuring users can smoothly and successfully complete the KYC process is a critical step for any trading platform, as it is required for users to trade and deposit funds.

Quadcode is an international fintech company developing software for the trading and investment industry. Ensuring users can smoothly and successfully complete the KYC process is a critical step for any trading platform, as it is required for users to trade and deposit funds.

CHALLENGE

My primary objective was to identify key problem areas and enhance the user experience to build trust and confidence among our users. This involved simplifying and optimizing the account verification process and addressing existing design debt.

My primary objective was to identify key problem areas and enhance the user experience to build trust and confidence among our users. This involved simplifying and optimizing the account verification process and addressing existing design debt.

Discovery and research

Discovery and research

To uncover problems and opportunities and to better understand what our users go through to get their account verified, we needed to research.

To uncover problems and opportunities and to better understand what our users go through to get their account verified, we needed to research.

1

User Journey Map

User Journey Map

I created UJM to visualize the user path and gain a comprehensive understanding of the overall UX.

I created UJM to visualize the user path and gain a comprehensive understanding of the overall UX.

2

Usability Testing

Usability Testing

I conducted a series of usability tests to spot any dead ends, pain points or confusing steps.

I conducted a series of usability tests to spot any dead ends, pain points or confusing steps.

3

Support Insights

Support Insights

I consulted with our support team to gain insights into common real problems faced by our users.

I consulted with our support team to gain insights into common real problems faced by our users.

...result. A lot of hidden (and not so hidden) problems uncovered

...result. A lot of hidden (and not so hidden) problems uncovered

Major design debt.

Major design debt.

The lack of a design system was a significant issue for the product. Growing without scaling led to substantial design debt, making future improvements and maintenance more difficult.

The lack of a design system was a significant issue for the product. Growing without scaling led to substantial design debt, making future improvements and maintenance more difficult.

Poor communication.

Poor communication.

Users found the communication unclear and often struggled to understand what had occurred due to poor UX copywriting.

Users found the communication unclear and often struggled to understand what had occurred due to poor UX copywriting.

Complex navigation.

Complex navigation.

Finding the verification section and navigating through the KYC flow were overly complicated, causing users to frequently become confused.

Finding the verification section and navigating through the KYC flow were overly complicated, causing users to frequently become confused.

Understanding design debt.

Understanding design debt.

I did a full design audit of KYC Flow covering all regulations, all possible states, collected all non-consistent, problematic points and got approval from stakeholders to eliminate design debt in this part of the product.

I did a full design audit of KYC Flow covering all regulations, all possible states, collected all non-consistent, problematic points and got approval from stakeholders to eliminate design debt in this part of the product.

An example of what the different KYC screens looked like on the Android.

Inconsistent UI

Inconsistent UI

Varied colors, typography styles, and UI components, resulting in a fragmented visual experience.

Varied colors, typography styles, and UI components, resulting in a fragmented visual experience.

Visual hierarchy issues

Visual hierarchy issues

Mismatched icon styles and poor visual hierarchy, making navigation and comprehension difficult.

Mismatched icon styles and poor visual hierarchy, making navigation and comprehension difficult.

Low readability

Low readability

Low contrast elements, unreadable text sizes, and too much textual information in places.

Low contrast elements, unreadable text sizes, and too much textual information in places.

Key areas for improvement

Key areas for improvement

I identified the main zones for enhancements and began working on them. Improvements were carried out in parallel, addressing various aspects.

I identified the main zones for enhancements and began working on them. Improvements were carried out in parallel, addressing various aspects.

UI Improvements
(visual consistency)

Clear communication
(text revisions)

UX adjustments

iOS/Android
consistency

Navigation
(entry points)

PART 1. UI Improvements

Let’s start with consistent and reliable UI.

Let’s start with consistent and reliable UI.

I began by enhancing the UI, focusing on eliminating inconsistencies in colors, typography, spacing and icons. Additionally, significant attention was given to improving visual hierarchy and iconography.

I began by enhancing the UI, focusing on eliminating inconsistencies in colors, typography, spacing and icons. Additionally, significant attention was given to improving visual hierarchy and iconography.

Colors

Colors

Typography

Typography

Components

Components

30+ screens UI fully updated
on iOS and Android.

30+ screens UI fully updated
on iOS and Android.

This improvement not only enhanced the user experience but also provided a solid foundation for accelerating future design work and enabled further UX improvements.

This improvement not only enhanced the user experience but also provided a solid foundation for accelerating future design work and enabled further UX improvements.

PART 2. text revisions

Clear communication.

We simultaneously worked on improving the texts, as there were numerous instances of poor communication where users could not understand what had happened. Let’s see some examples of improvements.

Introductory screens

Insight. Users do not understand why they need to complete certain verification steps.

Solution. I added intro screens explaining what needs to be done and why it is necessary.

Clear reasons for rejection

Insight. Users find it difficult to understand the reason for document rejection.

Solution. We revised all rejection reason texts and added a link to the FAQ section.

Review time transparency

Insight. Users do not understand that the document is under review and how long the review process will take.

Solution. We added a clear heading and icon and started displaying a timer with the estimated waiting time for each country individually.

We made substantial progress in addressing our design debt by enhancing transparency in our communication, which significantly reduced the number of support inquiries.

PART 3. UX adjustments

Small details that matter

Improving the UX and small interactions in the questionnaire step was crucial for us because this step was particularly complex and lengthy in our KYC process.

Combined questions

Merged related questions into a single screen to streamline the process.

Enlarged tap zones

Increased the tap zones for answer options to improve usability.

Additional explanations

Provided explanations where users feared answering or felt uncertain.

Questionnaire step completion time
reduced from 8 to 5 minutes.

PART 4. Navigation

From 5 clicks away,
to 1-click away.

I added an entry point to the KYC flow on the start screen, allowing users to easily navigate to the required step.

This solution was implemented in regulated countries and improved the CR to Start Verification by 10%.

Results

Behind the metrics.

Design debt reduction.

I laid a solid foundation and undertook extensive work to eliminate design debt on both Android and iOS. This effort ensured a more consistent and streamlined user experience across platforms, setting the stage for future improvements and feature development.

Design process optimization.

I accelerated the design process for KYC and Deposit Cash modules by creating a comprehensive Figma library with all user flows, screens, and states. This consolidation ensured consistency, efficiency, and quicker iterations, streamlining team communication.

Android/iOS consistency.

I led a major effort to resolve text and UX logic inconsistencies across our product, focusing on aligning iOS and Android. This alignment also improved user experience and accelerated the development of new features.

My Takeaways

After words. Valuable lessons.

Looking back, I see the significant amount of work I accomplished. I am fond of the work we did and all the improvements we made along the way. I gained valuable experience dealing with design debt and understood the importance of strategy and prioritizing improvements in this process.

1

When dealing with design debt, it's crucial to make improvements step-by-step and carefully consider the necessity of each change.

2

Getting buy-in from stakeholders and keeping them informed about the progress and benefits of the project was vital.

3

Having clear metrics is essential for tracking progress and demonstrating the effectiveness of efforts.