top of page



Improve user experience and engagement for Ronin Bridge

 

Ronin Bridge was built for everyone to deposit ETH to the Ronin network if they already hold a Ronin wallet. They can then withdraw RON, AXS, SLP, and WETH directly to their MetaMask wallet on the Ethereum network.

How I found the problems

During the onboarding process for the Sky Mavis business and Axie Infinity - Ronin infrastructure, my fiancé tried using Ronin Bridge out of curiosity. He immediately encountered an issue: his assets had already left the Ronin network but had not successfully arrived in his Metamask wallet due to insufficient ETH.

Contribution

Design, User Research, Delivery & Workshop

 

Team

Me: Designer and Squad Lead, 1 FE​​

User Research Doc  |  Prototype  |  Bridge Live



Discover


Design Audit
 

I have evaluated the current design and experience of the Ronin Bridge based on the following factors

​Starting with the question "What does success look like" for Bridge?

  1. Are the features we offer easy for users to find without any intervention from us?

  2. Do users have a clear understanding of where each step will take them?

  3. Do users understand that the steps cannot be reversed?

  4. Do users comprehend the content they are reading?

  5. What topic has been reported the most by users who have contacted CS?

  6. What action have we taken to resolve these issues? Did it work or not, and why?

  7. For how long have we left users unsatisfied with the reported issues? Why?

  8. What was the path users took before arriving at Bridge?

  9. Where did users go after Bridge?

  10. Can users confidently instruct another user on how to use Bridge?

  11. ​Do users know what is expected of them to perform?

Withdraw confirmation-min.jpg
.

 
Problem Space 
 

One of the Axie Whales walked me through the user feedback

I reached out to Michael, the director of customer support, to request a call with cloudWhite, one of the top AXS holders, commonly referred to as "Axie whales." Given his experience as a community builder, cloudWhite has been instrumental in helping many individuals transition to the Ronin network and has a wealth of knowledge to share. He strongly recommended that I engage with several users in the Axie Community to better understand their issues with Bridge as well. I performed a remote user interview to go through what users have been sharing for years about Bridge's experience

Screenshot of cloudwhite interview



Cross-team & Stakeholders Interview


I spoke with Customer Support regarding the large number of complaint tickets associated with Ronin Bridge that they've had to process every day

 

​The CS team encountered a daily support ticket where they had to provide users with the same URL/the user wallet address, while also assuring them that their assets were safe.

  • Users have copied incorrect addresses as the recipient, causing issues, such as sending to the wrong person or smart contract address.

  • Users believed that their pending transactions were lost and did not know how to check them after committing the withdrawal transaction.

  • Reportedly, users have expressed feeling nervous when landing on Bridge, as it has a completely different theme compared to the rest of the Ronin network.

 

Based on my observations and conversations with users, I shared the problem statement in the kick-off meeting with the team:

​Problem - Process

  1. Users found the withdrawal process unclear, causing them uncertain about where every step takes them.
     

  2. Users found both processes (deposit or withdrawal) have quite a long waiting time, causing them to wonder if the transaction succeeded or failed.
     

  3. Users reportedly said they were not confident in their input for the recipient value.

HWM
  1. How might we help them feel more confident about the entire process and the action needed to be taken during each phrase?
     

  2. How might we make them feel confident in their own input as fast as possible?

​Problem - Expected Action

  1. Most users meant to check the gas fee for a withdrawal but ended up submitting the actual process without knowing it was happening; causing great frustration and loss of unnecessary ETH for a test withdrawal.
     

  2. Users reportedly didn't read the warning message, or did read it but couldn't comprehend its meaning; resulting in the unintended action taken regardless.

HMW

How might we help users be aware of where the crucial action takes place?

​Problem - Customer Support

Users often called CS over the same issues that've been provided guidance before.

​A few reports said that they couldn't reach out to any direct support.

HWM

How might we make users feel confident that when * happens, we will always be available to support them?



The problem with Bridge escalated when it affected a crypto-journalist and podcast speaker

 

A journalist contacted Sky Mavis's COO directly about a problem with the Bridge and criticized the company's handling of customer experience on his podcast. However, adding on top of all the mentioned issues, another issue was:  When a problem occurs, there was no direct way to report it, even though we have a large customer support team working 24/7.

"Is this how a well-funded million-dollar company handles customer experience, by not having a single way to call for help when things go wrong?"  - said Journalist 




Through my analysis, I have identified several reasons for the creation and prolonged neglect of those user issues

  1. Our team confidently assumed that users would understand the how-to guides before taking action. However, in reality, users have a tendency to skip or misunderstand them.

  2. Non-blockchain users who are transitioning to web3 games, such as Axie Infinity gamers, are both vulnerable and impatient when it comes to Blockchain knowledge.

  3. My UX team is uneasy about directly conversing with users in casual conversations or interviews.



Explore / Design



Timeline
 

To meet the demands for a successful podcast, we were able to quickly deliver the design rollouts within a remarkable 5-day timeframe

 

Upon receiving an urgent request from Alec, we promptly delivered an improved design for Bridge. I confidently proceeded with UI and prototyping, and conducted a usability test with a group of 5 users, which some may argue was not comprehensive enough. However, as per NNG usability testing classes, a 5-person group typically reveals 85% of the problems, and we were able to identify and address the relevant issues through this approach.

 



Final Design
 

The stepper displays the deposit or withdrawal steps along with their name and status. There are 3 states: the current step is marked in blue, the passed step is marked in green, and the next step is marked in gray. Each next step includes a description of what users need to do, while the current step shows the system's progression with the user's requests.

Validation message on field input.

I've learned that a sound system should guide users through each step with minimal effort. The recipient field is often where false input occurs, so I clarified that all addresses pasted by users are checked.

Real-time transaction status.

As mentioned, customers may feel anxious when dealing with large numbers for transfers, whether for deposits or withdrawals. That's why we prominently display these numbers, along with the destination and details of our network's delivery process. To keep customers informed, we not only use a progression stepper, but also change the color of the transaction status every time it updates.

Checkbox for confirmation - to strengthen user's reading action.

I included a checkbox to ask if the user has enough ETH to receive assets in Metamask. The checkbox is inactive by default, so users need to click it to confirm they have ETH. Based on testing, I am convinced that this reinforces the initial goal for the user to READ THE MESSAGE.

09.1 If rejected on Metamask-min.jpg
Pay-For-Me.

Users may forget to confirm gas fees in Metamask when withdrawing, possibly due to insufficient ETH. This can also prevent access to incomplete withdrawals. To solve these issues, we have two scenarios in place.

09.1.1 ETH pay for me popup-min.jpg
You need someone to pay for you

As you are the one who didn’t read beforehand: Share a link with friends to pay for gas fees. This link can be accessed directly when a withdrawal transaction is rejected, eliminating the need for them to search for the transaction link in the URL.

01.1 If check pending icon-min.jpg
You pay for someone

As the savior of the day, you can either get a link from your friend or check the pending status of any address by simply knowing the address and searching its status.

 

Pending Transaction Sign

If you attempt another transaction and have previously initiated one without completing it, a warning sign will appear.

1-min.png
Customer Support Accessible

To better support our users, I animated the Ronin blue bird. The animation provides direct access to all support channels, making them easily accessible from a single location.



Final Takeoff


I showed the new design to the COO and announced it shortly to the Discord Community, but…

 

Despite my limited blockchain experience, I excelled and shared user feedback with the team. The CEO was impressed, and my team leader encouraged us to continue.

I conducted workshops on streamlining contextual inquiries and effective user communication for research. Unfortunately, a $625M hack disrupted our design plans, forcing us to close the Bridge gateway for several months. However, the Axie community remained engaged. We are committed to delivering high-quality designs that meet their needs.

User Research Doc  |  Prototype  |  Bridge Live

bottom of page