## Streamlining Zalo's eKYC: Enhancing UX, ensuring compliance, and slashing drop-off rates by 25%

## **What happened?**

New users and users who want to conduct business on Zalo are facing difficulties completing the electronic Know Your Customer (eKYC) process. This prevents users from accessing other features within the app, negatively impacting Zalo's overall conversion rate and ability to attract new users, especially in light of Decree 13 requiring new users to complete eKYC.

## **What insights can we glean from the data?**

### **Data analysis**

The current flow consists of the following 3 steps:

1. Capture front side of the document

2. Capture back side of the document

3. Capture a portrait photo

I started with analyzed collected data to identify the key areas for improvement. The user funnel shows a very high drop-off rate at step 1 and step 2, at 88.2% and 46.6% respectively. In addition, we also observed a very high percentage (nearly 50%) of users uploading portrait photos in the document verification step.

### **User interviews**

We conducted 6 user interviews to gain a deeper understanding of the user difficulties and needs, things that I couldn't translate from data alone. From the interviews, we gathered the following insights:

> *I don't know how to take a photo of my documents that the app will accept.*

> *The app's instructions are unclear. I had to try multiple times before succeeding.*

> *I find this process a bit time-consuming. I wish it were faster.*

### **Competitor analysis**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fa828e20b-d3a8-4890-8b89-b6db384a0790.png?alt=media&token=2fcb9327-829f-4d14-a4a6-170c8b499bcb","id":"a828e20b-d3a8-4890-8b89-b6db384a0790","width":1886,"height":1024,"filename":"Screenshot 2024-08-13 at 16.11.54.png","type":"image/png","caption":"Collect and testing eKYC flow of Zalopay","border":true}]}
```

I conducted a competitor analysis of eKYC flows primarily within banking and financial apps. However, it's important to note the business context differs: banks mandate eKYC for usage, while Zalo's implementation is optional. Two key takeaways emerged:

* **AI-Powered Automation:** Banking apps streamline eKYC through AI, significantly reducing invalid submissions and accelerating the process.

* **Clarity and Transparency:** These apps excel in providing clear instructions and setting user expectations for each step, minimizing confusion.

## **so...what is the problem?**

After conducting all the above research, I identified the pain points and improvement opportunities for this entire flow.

### **Pain points**

* **Unclear guidance:** Users not being prepared for the necessary steps resulting in a high drop-off rate after step 1. Even if users do continue, their satisfaction level will decrease.

* **Lack of errors prevention:** The app's instructions on how to capture photos of documents and faces are not clear enough, causing errors and frustration for users.

* **Lengthy process:** Some users find the eKYC process too long and complicated, leading to disengagement and potential abandonment.

### **Opportunities**

* **Process automation:** Apply AI technology to enable automatic capture, helping to reduce manual user actions and task completion time.

## **How to solve this?**

### **User flows**

The proposed solution will heavily depend on the technology available. I discussed with developers about the technology they use for authentication. This flow not only serves the user but also needs to ensure accuracy and minimize fraud.

After discussion, we decided to keep the flow with 3 steps as it is currently, but we will merge the front and back photo capture into one document photo capture step.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Ff2f27523-311f-4b8e-992e-92c697a1b182.png?alt=media&token=96a1136c-1012-471a-8285-81f5e20e1248","id":"f2f27523-311f-4b8e-992e-92c697a1b182","width":2389,"height":562,"filename":"Screenshot 2024-08-13 at 15.35.41.png","type":"image/png","caption":"Main user flow","border":true}]}
```

### **Design solution**

We chose to communicate clearly with the user from the beginning about the steps they need to take throughout the entire flow to manage their expectation.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2F61c4ec67-c11a-49db-be5b-f228fb61a7c3.png?alt=media&token=58d8582f-08fb-47ea-9451-9c719fefd090","id":"61c4ec67-c11a-49db-be5b-f228fb61a7c3","width":1920,"height":1202,"filename":"Slide 16_9 - 1.png","type":"image/png","caption":"Intro","border":false}]}
```

Although our current technology is capable of scanning any type of document, I designed selection so that the users are more aware of what they need to prepare, as well as providing specific instructions for each type of document.

In addition, we no longer allow uploading existing photos from the library to prevent fraud, although this may compromise user convenience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2F386edf4e-b550-4cf2-941c-d319773a6efa.png?alt=media&token=948bca8a-a1de-4e29-a08f-65d5f5552434","id":"386edf4e-b550-4cf2-941c-d319773a6efa","width":1920,"height":1202,"filename":"Slide 16_9 - 2.png","type":"image/png","caption":"Verify document","border":false}]}
```

The old flow used the OS's camera, causing a lot of difficulties for users as they didn't know how to capture the documents to meet the requirements.

In the new flow, I designed a frame to help users align the angle correctly. Thanks to technological improvements, we also provide real-time guidance and allow the system to automatically capture when the documents & face is placed at the correct angle.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fa2aabb71-99f5-4f05-8242-8b1806dfb917.png?alt=media&token=73fb196c-48c5-4abd-aa5b-1ce5239a3f61","id":"a2aabb71-99f5-4f05-8242-8b1806dfb917","width":1920,"height":1202,"filename":"Slide 16_9 - 3.png","type":"image/png","caption":"Camera (Document)","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fd94404f7-8aac-4314-a6ab-4d5c94674990.png?alt=media&token=33e199da-517f-4d10-9d64-8a0d6cfa379c","id":"d94404f7-8aac-4314-a6ab-4d5c94674990","width":1920,"height":1202,"filename":"Slide 16_9 - 6.png","type":"image/png","caption":"Camera (Face)","border":false}]}
```

I also added clear instructions and illustrations throughout the flow, and updated the progress to motivate users to complete.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2F698bd1d4-601c-474d-8799-653d6b9adab7.png?alt=media&token=80b38380-5969-445b-9b54-6aab738f0bd0","id":"698bd1d4-601c-474d-8799-653d6b9adab7","width":1920,"height":1202,"filename":"Slide 16_9 - 5.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fd6eecb98-a824-402a-ac30-a18961f06987.png?alt=media&token=9eade715-42b5-4a2f-8861-5d880a353003","id":"d6eecb98-a824-402a-ac30-a18961f06987","width":1920,"height":1202,"filename":"Slide 16_9 - 4.png","type":"image/png","caption":"","border":false}]}
```

### **Testing**

After having a near-complete design, I developed a prototype to conduct usability testing and heuristics evaluation to get feedback and make necessary adjustments. \
You can try using it below, noting that **I cannot accurately simulate the camera experience using Figma**.

```cv
figma
{"url":"https://www.figma.com/proto/B47eFY1GdRutMtBifSP2Tp/Safety---eKYC-2.0-(native_zins)?page-id=6818%3A168182&type=design&node-id=7585-52538&viewport=1534%2C77%2C0.14&t=MXBVgJTnm7XLStxX-1&scaling=scale-down&starting-point-node-id=7585%3A52538"}
```

### **Deliver**

I prepared detailed design specifications, for development handoff. Collaborated closely with the development team to ensure a smooth transition and accurate implementation of the design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fd7c82ee2-8d08-44dc-8b21-05beac436910.png?alt=media&token=f745c7fd-1fa4-4eb2-9a68-d9f469b397b9","id":"d7c82ee2-8d08-44dc-8b21-05beac436910","width":1080,"height":2160,"filename":"Onboarding.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fb2a76e20-8da5-457c-b96e-c668069e5b61.png?alt=media&token=31d4dfcc-969e-442b-9e2a-7b3fc814dc32","id":"b2a76e20-8da5-457c-b96e-c668069e5b61","width":1080,"height":2160,"filename":"Choose document.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fe5ac35a2-2d27-4b62-9243-f8fd30da03de.png?alt=media&token=3cf05d2a-0582-490f-81a2-2926e4eea75e","id":"e5ac35a2-2d27-4b62-9243-f8fd30da03de","width":1080,"height":2160,"filename":"Camera.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2F35e136e4-e19c-4326-a4f1-eaf25fe58a09.png?alt=media&token=fb4c9e63-c754-4c60-ba66-e839e5adac7c","id":"35e136e4-e19c-4326-a4f1-eaf25fe58a09","width":1080,"height":2160,"filename":"Camera-2.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fe2255a45-7275-4ef6-bd11-354a5bf89682.png?alt=media&token=23ed7b18-255c-495d-8478-4daaf5aa9b27","id":"e2255a45-7275-4ef6-bd11-354a5bf89682","width":1080,"height":2160,"filename":"Camera-6.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fada51da0-4621-448b-8ecb-90920df86d28.png?alt=media&token=e9ff0a0e-0442-49d1-86e2-8c99435b5dcc","id":"ada51da0-4621-448b-8ecb-90920df86d28","width":1080,"height":2160,"filename":"Document Result.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2Fdeaf49d3-a577-4dd2-86a8-e74d024238bb.png?alt=media&token=78ea6f4e-c29d-4707-baa8-ff8dd0c5880e","id":"deaf49d3-a577-4dd2-86a8-e74d024238bb","width":1080,"height":2160,"filename":"Capture selfies.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2F8731f197-06e5-4725-a8e5-7f267bcb5296.png?alt=media&token=38c02a88-b38f-4c13-ab7f-d53e49499bad","id":"8731f197-06e5-4725-a8e5-7f267bcb5296","width":1080,"height":2160,"filename":"Camera-10.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fzalo-ekyc%2F1f264b4a-2848-4c93-b462-b6bf4e166a49.png?alt=media&token=5622ac05-0640-4135-af4f-0ca2709a6f16","id":"1f264b4a-2848-4c93-b462-b6bf4e166a49","width":1080,"height":2160,"filename":"[Preset] Fullscreen Info.png","type":"image/png","caption":"","border":true}]}
```

## **Outcomes**

After the changes were released for 3 months, aligned with metrics had defined, we have recorded some extremely positive results as follows:

* **Completion Rate** for the entire flow increased from 4.4% to 20.8%.

* **Drop-off rate** at step 1 decreased from 88.2% to 62.7%.

* **Average** **task completion time** decreased from 10 minutes 56 seconds to 6 minutes 30 seconds.

Refactor eKYC flow

Manage Notion Workspace

## Elevate Zalo's Login to bring a modern look & authentication methods for a safer, smoother experience

## **Context**

In late 2023, Zalo recognized the need to modernize its login process, which had remained largely unchanged since the app's launch. Given its decade-long history, certain aspects of the flow felt outdated. I was tasked with leading the redesign effort, bringing the login experience up to current standards

## **Design process**

### **1. Problem framing**

Currently, Zalo offers two login methods: password login and OTP login sent to the user's phone number. Zalo users are not required to set a password when creating an account, leading to OTP login being more popular (\~65% A1).

Additionally, whenever users have their phones stolen or lose ownership of their phone numbers without setting passwords, they cannot proactively protect their accounts and have to contact customer support to lock them down, creating delays and increasing the risk of losing accounts.

We conducted some quick user interviews to understand why users don't set passwords and gathered the following insights:

> *Zalo's password setting rules are too complicated. No matter how I try to set it, it doesn't work, so I just skip it altogether.*

> *I find logging in with OTP much more convenient and faster.*

This situation raises two issues:

* **User-side:** Increased risk of account loss if the user loses access to their phone number.

* **Business-side:** Incurring OTP costs.

### **2. Scoping**

After analyzing the issues, to address the security and cost concerns without sacrificing user convenience, we decided to add alternative authentication methods besides the two existing ones include:

* Receiving OTP via mail

* Authentication using another device

* Passkey

**Phasing**

1. Revamp the UI and add authentication using another device.

2. Add a mechanism to set up email and receive OTP via email.

3. Add authentication using passkey.

This case study will focus on phase 1

### **3. Design**

**User flow**

Although the login flow is a very familiar and seemingly simple flow, it has quite a few edge cases due to using the 2FA mechanism, and the choice of authentication method depends on two factors:

* The trustworthiness of the device

* The trustworthiness of the network the user is using

After clarifying all the mechanisms of the current flow, I created a user flow to get a comprehensive view after adding the familiar device authentication method as shown below

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Flogin%2F2f12c406-6668-4245-874a-1a61b7bae929.png?alt=media&token=7574bb52-0063-4b4c-92be-a0758e665ba5","id":"2f12c406-6668-4245-874a-1a61b7bae929","width":3680,"height":1227,"filename":"Frame 6452.png","type":"image/png","caption":"Login full flow","border":false}]}
```

We also added an emergency account lock mechanism to help protect users when they lose their passwords, so I also drew another user flow illustrating the scenario where a user loses their password and their account is taken over by a stranger as shown below

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Flogin%2Ffd0dfc94-bdbd-4865-9a08-a508af9bfa5e.png?alt=media&token=1af62ba4-721d-4f25-a8cc-07d97d6df131","id":"fd0dfc94-bdbd-4865-9a08-a508af9bfa5e","width":2808,"height":679,"filename":"Frame 6453.png","type":"image/png","caption":"Emergency lock account","border":false}]}
```

Revamp Login Flow

In the second half of 2023, Zalo had planned to redesign the two core flows of the app, namely Register and Login. The last time these two flows were adjusted was a decade ago, coinciding with the launch of Zalo. Therefore, it can be said that in some aspects, these two flows have become somewhat outdated.

As a result, I have been assigned the task of refactoring these two flows.

Zalo Chat Label

PetroAI

## Revolutionizing pet identification through animal nose biometrics and machine learning — MVP in 5 months

## **About**

By studying about animal nose biometrics and apply machine learning technology, we want to create a new method to identify pets for medical purposes and keep them safe

In the Veripets application, you can easily identify your pets just by using a smart phone. Users also have access to e-insurance, community and marketplace.

## **Design process**

### **1. Research**

**Market research**

Concern for the time and costs, I focused on doing some quantitative and secondary research. I validated for some of my decisions, some new ideas that users would like, as well as actionable insights.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fveripets%2F7e752280-9690-49bb-a5f4-e0405798b290.png?alt=media&token=ba88f117-46b8-4db5-b3bb-6882771c7c79","id":"7e752280-9690-49bb-a5f4-e0405798b290","width":1139,"height":463,"filename":"Frame 75.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fveripets%2F31576aa6-8906-4044-862a-5f4bee0b224c.png?alt=media&token=e039bd1e-8579-40cd-b090-64d2cb21e9fc","id":"31576aa6-8906-4044-862a-5f4bee0b224c","width":1400,"height":622,"filename":"Frame 75.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fveripets%2Fa1d37de0-c52d-4877-a26a-564fd1acd242.png?alt=media&token=e971d2d9-52fd-41dc-aead-c98ccecb8fb1","id":"a1d37de0-c52d-4877-a26a-564fd1acd242","width":1400,"height":471,"filename":"Frame 76.png","type":"image/png","caption":"","border":false}]}
```

**Competitor Analysis**

We've carefully analyzed the current landscape, acknowledging microchipping as the dominant pet identification method in developed countries. However, our nose biometric technology offers several distinct advantages over microchipping:

* Our nose biometric technology is completely non-invasive, ensuring no physical impact on your pet. While microchipping carries minimal risks, we understand some pet owners may have concerns. Our solution offers a worry-free alternative for pet identification.

* Ditch the trip to the vet! With Veripets, microchipping your pet is as easy as using your smartphone. Register your pet's identification from the comfort of your own home.

* Nose biometric identification offers a more cost-effective solution than microchipping. Its simplicity eliminates the need for physical implants, resulting in significant savings.

### **2. Define**

Based on our research, we've identified user needs and outlined the essential features to incorporate into our app.

**User needs**

Most pet owners are familiar only with microchip implantation, and they desire a faster, simpler identification method that also integrates live health monitoring for their pets.

**Features**

1. Pet ID registration by nose biometrics technology

2. Pet owner community

3. Pet activities and vaccination record

4. Pets' health information management

## In order to release an MVP to gather user feedback and enhance the technology, we focused on the Pet ID registration in the initial phase.

### **3. Develop**

**Structure**

Guided by our research, we started building the app by carefully organizing its content and making sure it's easy to understand and navigate.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fveripets%2Ff851ace3-6ba9-446a-abc6-702f153d31b4.png?alt=media&token=b2450d0c-9df0-4ee2-bbc2-7a17c2c69387","id":"f851ace3-6ba9-446a-abc6-702f153d31b4","width":1213,"height":1136,"filename":"Frame 74.png","type":"image/png","caption":"","border":false}]}
```

**Main flow**

Next, we designed the user flow to illustrate how users would interact with the app. We focused on streamlining the pet ID registration process, ensuring it's intuitive and user-friendly.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FuaMMbSs4ZtcqkSEt0AyzQp1835L2%2Fveripets%2F54bbf94b-811b-477c-adaf-07cb32874ef6.png?alt=media&token=86e337c7-4188-451b-86e5-c11bc7f65e96","id":"54bbf94b-811b-477c-adaf-07cb32874ef6","width":1202,"height":605,"filename":"Frame 74.png","type":"image/png","caption":"","border":false}]}
```

**Concept**