Esportbet.io
Esportbet.io is a comprehensive e-sports platform that helps beginners find information and place bets. Our design team revamped the UI, defined a new design language, and restructured the interface to enhance user experience. The goal was to make Esportbet.io 2.0 more trustworthy and user-friendly than version 1.0, creating a consistent brand style and better usability.
Service
-
Defined Problems
-
Flowcharts
-
Motion graphic
-
UI mockups
-
Design systems
-
Prototypes
Support Device
RWD
APP
Designer
Product Designer
Jin
Product Designer
Dolly
Product Designer
Yves
My Role
In this project, I coordinated and managed designers, understood pain points from the Marketing and CS teams, and proposed new design solutions. The goal was to enhance consumer trust and provide a consistent visual and user experience. I restructured the content architecture, defined a new interface style, and improved user flows. I delivered designs for the homepage, account page, betting page, promotion page, and wallet page.
Workflow
Stakeholder Pain Points
-
Users need consistent content width because currently, some pages are full-width while others are constrained within a narrower range, which affects my browsing experience.
-
Users need uniform icon and button styles and colors because currently, they vary across different locations on the site, leading to confusion and inconsistency.
-
Users need a modern and flexible design because the current design style is outdated and rigid, which detracts from the overall user experience.
-
Users need an intuitive wallet interface because currently, the poor usability of deposit and withdrawal features causes me to leave the page immediately after opening my wallet.
Overall Design
-
Complete the website theme redesign within one month to ensure timely delivery and a fresh look, which will help attract and retain users.
-
Redefine the site's grid system and design system for a consistent layout, enhancing user experience and navigation efficiency.
-
Reduce excessive vibrant colors and strong animated prompts to create a more professional and user-friendly interface.
-
Add trusted licenses or prominent partner brands or figures to build credibility and trust with users.
New players
Reduce content with overtly tempting, highly sensual, or money-suggestive themes to promote a healthier gaming environment.
Provide simple and easy-to-understand content on the homepage, such as clear categories and options to enhance navigation.
Make registration, deposit, and withdrawal processes faster and simpler to improve user onboarding.
Use safe, trustworthy, and stable colors to create a sense of security.
Experienced players
-
Keep players engaged with continuous site visits by introducing new discoveries, gameplay modes, and missions regularly.
-
Offer higher odds and greater rewards to attract seasoned players.
-
Enhance players' sense of achievement with features like rankings, level completion, and treasure hunts, creating a feeling of ongoing progress and continuous unlocking of new missions.
-
Provide diverse and rich informational content to keep them engaged and continuously discovering new strategies and insights.
Design Goals
Information Architecture
Through restructuring the information architecture, I clarified all functions and organized the overall information categories. This helped the team understand the entire website's functionality and scale, allowing for a clearer reorganization of the site's content and better scheduling of the development timeline.
Wireframe
By creating wireframes, I facilitated discussions with the product owner and team about the website's UI information distribution and UX experience. Through continuous discussion and revisions, we adjusted the UI structure to achieve a website architecture that meets usability, marketing needs, and development consensus.
Design Mockup
I first designed the platform's homepage, providing designs for both pre-login and post-login states, as well as web and app versions. This defined the basic style guide, enabling other designers to follow these design guidelines when creating additional pages.
Breakpoint & Grid System
I planned the website's breakpoints for different screen sizes and defined the grid column gap. This addressed the issues of the previous site's small fixed container width and broken content images on tablet sizes. The RWD planning allows designers and developers to follow this grid system for development and design.
Account Page
I designed an account button on the top bar that opens a mini bar with frequently used shortcuts. The full account page, organized as a dashboard, consolidates all account-related functions for easy, one-page navigation.
Wallet Page
On the Wallet page, I designed a shortcut bar for frequently used functions, allowing users to access buy/sell currency and preview balance quickly. The full wallet page is also organized as a dashboard, enabling users to view all assets and perform actions like buying, depositing, and transferring currency easily.
Deposit with Metamask Flow
In ESB2.0, I designed a new Metamask deposit feature. This allows users to directly link and authorize Metamask for deposits, similar to minting NFTs. Users can enter the deposit amount on the ESB website, quickly transferring assets from their Metamask wallet to their ESB2.0 user wallet.
Deposit with Metamask Flow
Send me a message or connect on LinkedIn, I’d love to chat about new opportunities or anything design related!
Mobile : 886 91877183
Email : guojin.studio@gmail.com
Let’s connect!
Other Projects
Style Guide
Working with the design team, we supplemented and refined the initial design guidelines to build a comprehensive design library system. This approach reduces redundant design efforts and ensures consistency in design style across the team.
