Trustless Bridge UX Refresh

[stephenpdeos]

Problem

The current Bridge Frontend UI lacks clarity in guiding users through the bridging process and lacks an optimized design for mobile users. Additionally, limited wallet support restricts user access and engagement. These limitations hinder user adoption and create friction for those seeking to bridge tokens between EOS Native and EOS EVM networks.

Opportunity: What are the needs of our target user groups?

Users who wish to bridge tokens between EOS Native and EOS EVM networks require a clear, user-friendly, and mobile-responsive interface. They also seek broader wallet support to facilitate a seamless and secure bridging experience across multiple wallets.

Strategic alignment: How does this problem align with our core strategic pillars?

Enhancing the Bridge Frontend UI aligns with our strategic goal of expanding user adoption and engagement within the EOS EVM ecosystem. By offering a more intuitive and mobile-friendly interface with increased wallet compatibility, we create a more accessible and attractive environment for users.

Solution

Solution name: How should we refer to this product opportunity?

Bridge UI Enhancement

Purpose: Define the product’s purpose briefly

The purpose of this enhancement is to improve the Bridge Frontend UI to provide users with a clearer and more intuitive experience when bridging tokens between EOS Native and EOS EVM networks. The enhancement also includes optimizing the UI for mobile devices and expanding wallet compatibility.

Success definition: What are the top metrics for the product (up to 5) to define success?

1. User Engagement: Measure the increase in the number of users who initiate the bridging process after the UI enhancement.
2. Bridging Completion Rate: Track the percentage of users who successfully complete the bridging process after starting.
3. Mobile Usage Increase: Monitor the growth in mobile device usage for accessing the Bridge Frontend UI.\
4. User Feedback: Gather user feedback and satisfaction scores to assess the improved user experience and identify any further areas for improvement.

Assumptions

None at this time

Risks: What risks should be considered?

None at this time

Business Objectives/Functionality

1. UI Clarity and Design: Redesign the Bridge Frontend UI to provide clear and intuitive guidance for users throughout the bridging process.
2. Mobile Optimization: Ensure that the UI is responsive and optimized for a seamless experience on mobile devices.
3. Wallet Integration: Integrate with a wider range of wallets to allow users to bridge tokens using their preferred wallets.
4. User Onboarding: Develop user-friendly onboarding and instructions for new users to understand the bridging process and UI features.

User stories

• As a user looking to bridge tokens, I want to easily understand the steps involved and the actions I need to take throughout the bridging process.
• As a mobile user, I want to access the Bridge Frontend UI on my device and experience a smooth and intuitive process.
• As a user with various wallet options, I want to bridge tokens using my preferred wallet, ensuring a secure and familiar experience.

### Tasks
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/25
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/80
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/71
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/72
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/73
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/74
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/76
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/77
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/78
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/44
- [ ] https://github.com/eosnetworkfoundation/evm-bridge-frontend/issues/82

UX Considerations

User Personas

1. Current EOS Users: Familiar with EOS conventions.
2. New Users (EVM Familiar): Comfortable with EVM conventions but new to EOS.
3. Developers: Seeking functionality to complete specific tasks.

Functional Areas and User Journeys

1. Home Page and General Navigation

• Function: Overview of the bridge, quick access to major functions (bridging, tutorials, dApp launcher).
• User Journey: All user types land here; navigation should be intuitive for both EOS and EVM users.

2. Wallet Integration

• Function: Support for MetaMask, TokenPocket, and TrustWallet.
• User Journey:
  • Current EOS Users: Easy connection to familiar wallets.
  • New Users & Developers: Clear instructions on connecting and switching between wallets.

3. Bridging Interface

• Function: Facilitate token transfers between EOS Native and EOS EVM.
• User Journey:
  • Current EOS Users: Streamlined process for bridging with familiar EOS conventions.
  • New Users: Guided process highlighting differences between EVM and EOS, with emphasis on understanding the memo field.
  • Developers: Efficient, no-nonsense bridging process.

4. Memo Field Assistance

• Function: Help new users understand and correctly use the EOS memo field.
• User Journey:
  • New Users: Interactive guide or tooltips explaining the memo field's purpose and usage.

5. Account Creation and Management

• Function: Assist users in creating and managing EOS accounts.
• User Journey:
  • New Users & Developers: Step-by-step tutorial on creating an EOS account, managing keys, and understanding EOS-specific features.

6. dApp Launcher

• Function: Showcase relevant dApps, similar to Optimism’s Portal and dAppRadar.
• User Journey:
  • All Users: Easy discovery and access to popular dApps, with information on recent events and promotions.

7. Tutorials and Documentation

• Function: Comprehensive tutorials on account creation, bridging, and dApp usage.
• User Journey:
  • New Users & Developers: Accessible, rich content tutorials covering from basic to advanced topics.

[stephenpdeos]

Wireframe Descriptions

1. Home Page Wireframe

• Purpose: To provide an intuitive landing experience with easy navigation to all major functions.
• Key Elements:
  • Overview of the bridge.
  • Quick access buttons for bridging, tutorials, and dApp launcher.
  • User-friendly navigation menu.
  • Visible wallet connection status.

2. Wallet Integration Wireframe

• Purpose: To guide users through the process of connecting and managing EOS EVM and EOS Native wallets.
• Key Elements:
  • Step-by-step guide for connecting wallets.
  • Visual cues for successful wallet connection.
  • Option to switch between different wallet types.
  • Information icons for additional wallet help.

3. Bridging Interface Wireframe

• Purpose: To facilitate a seamless token bridging process for a variety of tokens.
• Key Elements:
  • Dropdowns or selectors for choosing tokens (EOS, USDT, SEOS, BOX, USN).
  • Clear indication of the source (EOS Native/EVM) and destination.
  • User-friendly input fields for amounts.
  • Information tooltips, especially for the memo field.

4. Memo Field Assistance Wireframe

• Purpose: To provide EVM users with guidance on the EOS memo field.
• Key Elements:
  • Pop-up or tooltip explaining the memo field.
  • Examples of memo field usage.
  • Warning alerts for incorrect memo usage.

5. Account Creation and Management Wireframe

• Purpose: To assist users in creating and managing their accounts.
• Key Elements:
  • Step-by-step creation guide.
  • Management options for the account (e.g., view balance, transaction history).
  • Security tips and information.

6. dApp Launcher Wireframe

• Purpose: To showcase relevant dApps in an accessible, mobile-optimized format.
• Key Elements:
  • List or grid view of popular dApps.
  • Sections for recent events and promotions.
  • Easy navigation to launch or learn more about each dApp.

7. Tutorials and Documentation Wireframe

• Purpose: To provide comprehensive, mobile-friendly tutorials on various functionalities.
• Key Elements:
  • Categorized tutorial sections (e.g., Bridging, Account Creation).
  • Interactive, step-by-step guides.
  • Visual aids and video links where applicable.

8. Responsive Menu and Footer Wireframe

• Purpose: To ensure consistent and easy navigation throughout the app.
• Key Elements:
  • Collapsible menu for mobile screens.
  • Quick links to important pages and features.
  • Contact and support links in the footer.

9. Feedback and Support Wireframe

• Purpose: To gather user feedback and provide support.
• Key Elements:
  • Simple feedback form.
  • FAQ section.
  • Links to customer support or community forums.

10. Language Selection and Settings Wireframe

• Purpose: To offer multilingual support and customizable settings.
• Key Elements:
  • Language selection dropdown.
  • User preference settings (e.g., notification, security settings).

[stephenpdeos]

Key problem areas to solve for:

1. User confusion with EOS Accounts and EVM Addresses: Users often encounter confusion when dealing with both EOS Accounts and EVM Addresses within the bridge interface. This confusion arises during the login process and account management. Users may find it challenging to understand which credentials to use and how to manage their source and destination accounts effectively. Improving the clarity and guidance in the login process and account management workflows will help alleviate this confusion and enhance the user experience.

2. Proper usage of the memo field: The memo field plays a crucial role in indicating the EVM Address for token transfers. However, users sometimes misuse or misunderstand the purpose of this field, leading to potential token loss. It is essential to provide clear instructions and educate users on the correct usage of the memo field. Additionally, exploring alternative terminology or user interface enhancements that make it more intuitive for users to understand and utilize the memo field correctly can help prevent token loss incidents.

3. Mobile optimization and site navigation: The current bridge interface lacks optimization for mobile web, which can result in a subpar user experience for users accessing the interface from mobile devices. To cater to a broader user base and ensure a seamless experience across different devices, it is crucial to prioritize mobile optimization. Additionally, improving site navigation and hierarchy will enhance the overall user experience, making it easier for users to navigate through the interface and access the desired functionalities. A lean design approach that allows for future advancements and expansion of functionality is recommended.

4. Understanding the purpose and acquisition of EOS tokens: External users who are not familiar with EOS may lack understanding of the purpose and acquisition of EOS tokens. It is essential to educate users on the significance of EOS tokens as gas tokens for EVM usage. Without EOS tokens, users may face limitations in utilizing the network effectively. Providing clear explanations, tutorials, or guides on acquiring EOS tokens and their importance within the EOS EVM ecosystem will help onboard and educate users, ensuring a smoother experience for all participants.