
**Industry**\
Financial Services / Investment

**Location**\
Vietnam

**Business context**\
Securities firm needed to modernize their trading app to attract new users while retaining professionals

**Solution**\
Redesigned the mobile trading platform with personalized experiences for different user skill levels

**Outcome**\
Delivered an app that improved user retention and provided appropriate tools for all trader types

**Our service**\
UX/UI Design / User Research / Mobile App Redesign

## Technical highlights

- **User research**: Comprehensive analysis of user behavior and pain points
- **Personalization**: Adaptive interfaces based on user experience level
- **Onboarding**: Streamlined registration process with progressive disclosure
- **Education**: Integrated learning tools for new investors
- **UI design**: Clean, modern interface with contextual help features
- **Responsive design**: Optimized for various screen sizes and orientations

## What we did with Kafi

Kafi Securities asked us to rebuild their mobile trading app. After a strong financial year in early 2024, they wanted to invest in better technology to grow their business and stay competitive.

We worked directly with Mr. Diep The Anh , Deputy Director of Kafi , and their leadership team to find the biggest problems and create smart solutions. Together, we built a new app that matched Kafi's goal of "Building financial dreams" and helping everyone access investment opportunities.

Our main task was designing an app that works for two very different groups: beginners who are just starting to invest, and professionals who trade stocks daily. The app needed to teach new Vietnamese investors about finance while giving experienced traders the advanced tools they need.

Instead of making small improvements to their old app, we built something completely new from scratch. This fresh start let us make the app faster, more secure, and easier to use.

![Kafi Securities mobile trading app interface showing market data](assets/kafi-cover.webp)

## The challenge Kafi faced

Kafi's biggest problem was that their old app didn't work well for different types of users. This caused several key challenges:

### User experience problems

- **High dropout rates during onboarding**: The complicated identity verification process turned potential users away, with many abandoning the app before completing registration
- **Confusion for new investors**: Financial terminology and complex charts overwhelmed beginners, preventing them from taking their first steps
- **Limited tools for professionals**: Experienced traders couldn't access the detailed market analysis they needed on mobile devices
- **One-size-fits-all approach**: The app treated everyone the same way, regardless of experience level

### Business impact

These user experience issues directly affected Kafi's business by:

- Limiting new user acquisition despite marketing efforts
- Reducing mobile engagement - users only checked basic information instead of actively trading
- Pushing professional traders to use desktop platforms or competitor apps
- Creating frustration that damaged the company's reputation

With investment interest growing in Vietnam, Kafi recognized the opportunity to capture market share by creating a more accessible platform. However, they needed to better understand their users' needs before they could build an effective solution.

## How we built it

We used a three-step approach: learn, plan, and design. This methodical process helped us understand what users truly needed before we started creating solutions.

### Technical approach

#### Comprehensive user research

We spent an intensive week gathering insights to answer three critical questions: What frustrates customers now? What do they want? What do they actually need?

Our research methodology included:

- **Contextual observation**: We watched real users interact with the app to identify moments of frustration and confusion
- **Social listening**: We analyzed investment forums and social media groups to uncover common problems discussed by traders
- **Competitive analysis**: We evaluated competing trading apps to identify best practices and opportunities for differentiation

This research revealed that most mobile trading app users primarily want to:

- Monitor stock prices and market news quickly
- Check their account balances and positions
- Receive alerts about important market changes or opportunities
- Execute basic trades when away from their computers

#### Experience-based personalization

Based on our research findings, we created user personas and journey maps to guide our design decisions. This led us to develop a core innovation: experience-based personalization.

The app now identifies whether a user is a beginner, intermediate, or expert investor and adjusts the interface accordingly:

- **Beginners** see simplified views with educational components
- **Intermediate users** access more detailed charts and analysis tools
- **Advanced traders** get professional-grade features and customization options

![Different app views for different experience levels showing persona-based interfaces](assets/kafi-designing-tools-for-different-user-groups.webp)

#### Streamlined onboarding process

We completely redesigned the registration process by:

- Breaking it into smaller, more manageable steps
- Adding a clear progress indicator to show completion status
- Allowing users to explore the app before completing full verification
- Implementing a "try before you buy" approach with demo accounts

#### Education integration

For new investors, we created contextual learning tools:

- Hover tooltips that explain financial terms in plain language
- A persistent help panel that can be accessed from any screen
- Interactive tutorials that guide users through their first trades
- Simplified market explanations with visual aids

![Help features for new investors showing contextual assistance](assets/kafi-helping-new-investors.webp)

![Investment education tools showing simplified explanations](assets/kafi-helping-new-investors-2.webp)

#### Modern, minimalist design system

We developed a clean, distraction-free interface that puts important information first:

- Eliminated unnecessary elements to reduce cognitive load
- Used consistent design patterns across all sections
- Implemented a contemporary color scheme with clear hierarchy
- Created flexible components that work across different screens

![Design concepts for the app interface showing visual style exploration](assets/kafi-moodboard.webp)

### How we collaborated

Our partnership with Kafi involved close collaboration throughout the project:

- Regular workshops with stakeholders to align on direction
- Weekly progress reviews with their leadership team
- User testing sessions with actual Kafi customers
- Direct collaboration with their development team
- Knowledge transfer sessions to ensure smooth implementation

This collaborative approach ensured the final product would meet both business objectives and user needs while being technically feasible to implement.

## What we achieved

Our redesign of Kafi's trading app delivered several measurable improvements:

**Increased registration completions**: The streamlined onboarding process helped more people successfully join the platform, with completion rates rising significantly.

**Higher mobile engagement**: Both beginners and professionals now spend more time using the app, with more trades being executed on mobile.

**Accelerated learning curve**: New investors reported feeling more confident and began trading earlier in their journey thanks to the integrated educational tools.

**Advanced functionality**: Professional traders gained access to the detailed analysis tools they needed, reducing their reliance on desktop platforms.

**Unified platform experience**: A single app now effectively serves users at all experience levels, simplifying maintenance while improving the user experience.

**Enhanced brand perception**: The modern, thoughtful design strengthened Kafi's position as an innovative investment platform in Vietnam.

The new app successfully supports Kafi's mission to make investing accessible to everyone while providing experienced traders with the tools they need. By creating personalized experiences based on user knowledge, we've helped Kafi build a platform where investors can grow their skills over time without needing to switch apps as they advance.

This project demonstrates the importance of understanding diverse user needs when designing financial applications. By combining careful research with thoughtful, adaptive design, we created an experience that works for both beginners and experts, helping Kafi grow their business while making investing more accessible to the Vietnamese market.


We helped Kafi Securities rebuild their stock trading app to work better for both beginners and experienced traders, making investing more accessible for everyone.

Kafi - design

Kafi: making stock trading easier for everyone


In the world of digital products, ensuring that users have a smooth experience is crucial. One key part of this is designing interfaces that can handle user mistakes. This concept, known as "designing for forgiveness," means creating systems that not only help users avoid errors but also assist them in recovering quickly when they make mistakes. In this article, we will look at some simple principles for designing error-tolerant interfaces and how to apply them to improve user experience.

### Understanding the problem: user errors are inevitable

No matter how well we design a system, users will still make mistakes. These mistakes can be as simple as clicking the wrong button or as complex as misunderstanding how a feature works. Understanding that errors will happen is the first step in creating interfaces that can handle them effectively.

**Common Types of Errors**:

1. **Accidental errors**: These happen when users unintentionally do something wrong, like clicking the wrong button or entering the wrong information.
2. **Errors due to lack of understanding**: Sometimes, users don’t fully understand how a feature works or they are new to the interface.
3. **Errors due to unclear design**: If the interface is not easy to understand, it can lead to confusion and mistakes.

Given these types of errors, the next question is: How can we design interfaces that not only help reduce these mistakes but also help users recover easily when they do happen?

### Provide early warnings

One way to help reduce user errors is by giving early warnings before they perform an action that could lead to a mistake. This helps users think again before they make a decision or correct the mistake before it causes a problem.

**Examples**:

- **Microsoft Word**: When users try to close a document without saving it, Word asks if they want to save their changes before closing. This helps prevent losing important work.

  ![](assets/designing-for-forgiveness-microsoft.png)

- **Shopify**: As soon as we change an information in the box, a warning of unsaved changes appears right on the top bar. Make sure we must act Discard or Save before leaving.

  ![](assets/designing-for-forgiveness-shopify.png)

**Benefits**: Early warnings help reduce serious mistakes, protect important data, and make users feel safer when using the system.

### Design clear and consistent interfaces

Having a clear and consistent design helps users navigate the system easily and reduces the chance of mistakes. If the design is predictable, users can focus on their tasks without worrying about how the system works.

**Examples**:

- **Microsoft Office**: The familiar layout and consistent icons across different versions of Word and Excel help users easily switch between updates without needing to learn the interface all over again.

  ![](assets/designing-for-forgiveness-excel.png)

**Benefits**: A clear and consistent interface leads to fewer mistakes caused by confusion, improving the overall user experience.

### Graceful error recovery

Even with the best design, errors will still happen. That’s why it’s important to have tools that help users recover quickly from their mistakes.

**Examples**:

- **Drive**: The “Undo Remove” feature lets users recall an item they’ve just removed, allowing them to correct a mistake before it becomes permanent.

  ![](assets/designing-for-forgiveness-drive.png)

**Benefits**: These recovery tools reduce frustration and stress, allowing users to continue their tasks without too much disruption.

### Error prevention through visual feedback

Giving users real-time feedback about what’s happening in the system helps prevent mistakes before they happen. If users know right away that something is wrong, they can fix it immediately.

**Examples**:

- **Twitter**: When users go over the character limit, Twitter highlights the extra text and disables the tweet button. This instant feedback helps users correct the mistake without guessing.

  ![](assets/designing-for-forgiveness-twitter.png)

- **Discord**: The character limit displayed, and if including the extra text and disable the Save Changes button.

  ![](assets/designing-for-forgiveness-discord.png)

**Benefits**: Real-time feedback ensures that users can fix mistakes quickly, leading to a more efficient and error-free experience.

### Provide guidance and support

To help users avoid mistakes, it’s important to provide clear guidance throughout their experience with the system.

**Examples**:

- **Word**: For icons that are not clearly visible, tooltips are the best solution, helping users understand what they are for.

  ![](assets/designing-for-forgiveness-excel-setting.png)

- **Onboarding in Webflow**: Webflow uses interactive tutorials and visual cues to guide new users through key features, such as adding elements to a webpage. These prompts help users quickly learn how to use the tool effectively, reducing the likelihood of errors

  ![](assets/designing-for-forgiveness-webflow.png)

**Benefits**: Providing guidance and support from the start helps reduce the number of mistakes, especially for new users, and ensures a better experience with the system.

### Conclusion

Designing error-tolerant interfaces is not just about preventing mistakes, but also about helping users recover when they do make mistakes. By applying principles like giving early warnings, clarifying choices, ensuring a consistent design, offering recovery tools, providing real-time feedback, and guiding users, we can create interfaces that make users feel confident and satisfied with the product.

Incorporating these principles into your design process will lead to more user-friendly products that help users achieve their goals with fewer obstacles and greater satisfaction.


In this article, we will look at some simple principles for designing error-tolerant interfaces and how to apply them to improve user experience.