STON.fi

About the project

STON.fi is an Automated Market Maker (AMM) Decentralized Exchange (DEX) designed for the TON blockchain. This case study showcases the process of refactoring the "Transaction flow," aimed at being transparent with users and keeping them informed about the process behind the exchange. The refactor includes transaction flow updates for mobile, desktop, animations, dark/light themes, and a pending state for a future release.

Business side

The old transaction flow on STON.fi caused user-hesitation and reduced platform engagement. Users feared that closing the "Pending Transaction" window might cancel their transactions, and many were unaware they could also execute multiple transactions simultaneously. Additionally, transactions were often completed before funds arrived in wallets, which lead to confusion and deterred new users. Failed transactions offered only a vague "try again later" message, and ongoing transactions were difficult to track, as the account section only showed final outcomes. These issues collectively impacted user-confidence resulting in limited platform growth.

My tasks

- Conducting competitor research
- Identifying functional requirements
- Interviewing new and existing users
- Iterating on designs
- Designing scenarios flow
- Debugging pre-prod and stage
- Micro-animating transaction elements
- Conducting design reviews with team-leads and the CPO

Team

- Chief Product Officer
- 1 Lead Front-end developer
- 1 Front-end developer
- 2 Back-end developer
- 1 Lead Designer
- 1 Product Designer
- 1 Graphic designer
- QA engineer

Methods used

- Audit of existing flow and components
- Principles of responsive design
- Documentation and training
- A/B testing and feedback
- User flows with scenarios

Designing the "Transaction steps" section

To address the various challenges users faced with the old transaction flow, we identified the need for a clear, step-by-step process that would guide users through their transactions. This approach was designed to enhance transparency, reduce confusion, and provide users with the confidence that their actions were being processed correctly and efficiently.

"Transaction steps" addressed the following aspects:

1. Transparency: We introduced clear visual cues and progress indicators to ensure users were always informed about the status of their transactions.

2. Multi-Transaction Capability: The new snackbars now clearly communicates the ability to perform multiple transactions, such as swapping, staking, and providing liquidity all while simultaneously empowering users to fully utilize the platform’s features.

3. Fund Arrival Synchronization: We ensured that final transaction step is only complete when the funds have fully arrived in the user’s wallet and our back-end, reducing confusion and building trust with new users.

4. Error Handling: Instead of a vague "try again later" message, the design now provides detailed error messages within snackbars and/or inside of that specific step, helping users understand and resolve issues more easily.

5. Tracking and Status Updates: We enhanced the account section to display real-time transaction status which can be viewed from there, ensuring users can track their transactions throughout the entire process, not just the final outcome.

Conclusion: By implementing these "Transaction Steps," we transformed the user experience on STON.fi, making it more intuitive, transparent, and user-friendly. These improvements have not only increased user satisfaction but also contributed to greater trust and engagement on the platform.

Designing the "Pending State 2.0" section

The legacy transaction flow lacked essential feedback mechanisms, leading to user confusion and errors during transactions. To enhance the transaction experience, we introduced a revamped "Pending State 2.0" that addresses these shortcomings by providing clear, intuitive feedback at critical stages.

"Pending State 2.0" addressed the Following Aspects:

1. Loader Button State: We added a loader button state at the design system level to provide visual feedback immediately after the transaction is initiated, ensuring users know that the process is underway.

2. Button Disablement Post-Approval: The primary action button now automatically disables after the user approves a transaction, preventing accidental duplicate submissions.

3. Nav-Bar Wallet Status: We redesigned the wallet status indicator in the navigation bar to reflect a true pending state, removing the misleading appearance of being clickable during transaction processing.

4. Form Interaction During Transactions: All forms, such as swap and staking interfaces, are now disabled during an active transaction, preventing users from editing tokens or making changes that could disrupt the process.

Conclusion: The "Pending State 2.0" enhancements have streamlined the transaction process on STON.fi, reducing user errors and providing a more secure, predictable experience. By addressing these critical aspects, we have created a more reliable and user-friendly platform.

Challenges and their solutions

1. Challenge: Introducing new modal windows for transaction steps rendered the old ones incompatible across platform.

Solution: We audited the entire platform to identify where modal windows appeared and wrote new documentation on sizes and usage guidelines. We then integrated the new modal windows into the design system, replacing the old ones and allowing us to add component properties to them.

2. Challenge: The new modals didn’t work with the old dark theme colors and shadow properties because they are 85% screen size, making the background visible.

Solution: Solution: We reworked the dark and light themes for the modal windows, adjusted shadows, updated global theme variables, and created new documentation to ensure consistency across the platform.