Dhimas Portfolio

Hire Me

Designing the Future of Sports & Crypto: DRX Sportnet App Project

UI UX Project

DRX Sportnet App (2024 - 2025)

What is DRX?

DRX is a Web3-based company headquartered in Indonesia. It has launched a crypto product called DRX Token—an Ethereum-based cryptocurrency designed to build an inclusive and sustainable digital sports ecosystem. By integrating blockchain, gamification, and community utility, DRX creates a bridge between sports enthusiasts, athletes, and Web3 technology.

You can learn more by visiting their official website at drxtoken.com.

What is DRX Sportnet App?

DRX Sportnet is a sportainment app powered by Web3. Get real-time football scores from global and local leagues, the latest sports news, and live DRX Token prices from top crypto exchanges.

Plus, users can scan NFC-enabled DRX products—like jerseys and sportswear—to instantly claim and collect them right in the app. It’s your all-in-one hub for sports and crypto fans.

Problem Statement:

Designing DRX Sportnet wasn’t just about making a slick app — it was about solving the complexity of merging two totally different worlds: Web3 and Sportainment.

On one hand, we had crypto enthusiasts who are already familiar with tokens, exchanges, and NFT-based claims. On the other, we had sports fans who just want live scores, news, and cool merch — with zero interest in blockchain tech.

The challenge? Creating one seamless experience for both audiences without overwhelming either side. The goal was to make a complex ecosystem feel intuitive, inclusive, and exciting for everyone.

Possible Solution:

To bridge the gap between Web3 users and sports lovers, DRX Sportnet was designed as a unified platform that feels familiar for both sides — without compromising on the tech or the thrill.

We focused on intuitive UI, clear navigation, and purpose-driven features: live scores for instant sports updates, claimable jerseys with NFC for seamless interaction, and a live token tracker to keep crypto users engaged.

By simplifying complex blockchain elements and integrating them naturally into sports content, we aimed to create a smooth, fun, and functional experience — no matter who the user is.

About the Project:

My Role

As the solo UI/UX Designer, I was responsible for shaping the entire design experience — from early user research to final interface design. I conducted in-depth research to understand both sports fans and crypto users, ensuring every interaction in the app felt intuitive, purposeful, and exciting.

Key Features

DRX Sportnet combines powerful features to engage both sports and crypto enthusiasts. It offers real-time live scores from football leagues worldwide, up-to-date sports news, and a live token price tracker for DRX across multiple exchanges. The app also introduces an innovative product claim system using NFC technology, allowing users to scan and collect official DRX merchandise. With a dedicated user profile section, users can easily track their claimed items and stay connected with the DRX ecosystem.

Impact & Result

DRX Sportnet successfully connected two passionate audiences — sports fans and crypto believers. Sports enthusiasts can now easily follow news and matches, while crypto users gain more trust and confidence in DRX through transparency and utility. The result? Increased user engagement and boosted token interest — leading to higher conversions on centralized exchanges.

The Guidelines

In this project, DRX Sportnet has established a strict rule regarding the use of a predefined color palette. These colors must remain consistent throughout the design, creating a strong and uniform brand identity for DRX. The biggest challenge for me was ensuring the design remained innovative and engaging while being bound by these fixed color guidelines.

However, despite the strict rules around colors, DRX offers flexibility when it comes to font family selection. This allows for greater exploration in typography, providing the freedom to make adjustments that align with the brand’s character while maintaining the right visual message.

Understand the Requests & Problems:

Before jumping into design, I dug into the core target and context of the app:

Who’s it for?

  • Sports fans looking for the latest news and live scores.
  • Crypto enthusiasts interested in DRX Token and Web3 innovations
  • General users who enjoy sportainment and digital collectibles

When do they use it?

  • Anytime — whether during match days, token updates, or casual browsing

Where are they from?

  • Global — accessible for users from any country, with a special focus on football fans and Web3 communities worldwide

Defining Research Questions:

To keep the design focused and effective, I narrowed the key questions down to:

  1. How can we design an intuitive interface that appeals to both sports fans and crypto users?

  2. What kind of content and features do users expect in a sportainment + Web3 app?

  3. How can we simplify complex crypto data (like token prices & transactions) for general users?

  4. What would motivate users to claim DRX products via NFC technology?

  5. How can we create an engaging app experience that builds long-term trust and drives DRX Token adoption?

 

Design Research:

To ensure the success of DRX Sportnet, I began by conducting a deep-dive design research phase. I analyzed a wide range of local and international apps in both the sports media and crypto/Web3 sectors to identify best practices, patterns, and pain points.

This process helped me understand how leading platforms structure their user flows, present real-time data like live scores and token prices, and engage diverse users through features like product claiming, news feeds, and gamification.

Based on these findings, I collected key visual and functional inspirations — which you’ll see in the design references below. This solid research foundation allowed me to craft a user-centric and future-forward interface that balances clarity, accessibility, and modern visual appeal.

 

Breakdown Features:

As the sole UI/UX Designer behind DRX Sportnet, I took full ownership of the design process — from defining the user experience to crafting each screen. While I collaborated closely with the IT and marketing teams to gather and align feature requirements, all design decisions, user flows, and visual executions were entirely my responsibility.

This section showcases a breakdown of features from both Phase 1 and Phase 2 of the project. You might notice some raw and fast-moving iterations — that’s the nature of designing solo in a fast-paced environment. The goal was clear: build a functional, scalable, and user-friendly product under tight deadlines.

From core match listings to Web3 integrations, I aimed to keep the interface intuitive and focused, while continuously adapting to technical constraints and evolving business needs.

The Sketches:

After collecting design references, defining the style guidelines, and breaking down all the required features — it was time to bring ideas to life. Since I was working solo as the only UI/UX Designer on this project, speed and clarity were everything.

Instead of spending extra time on wireframes, I jumped straight into sketching by hand. It was the fastest and most effective way to communicate layout ideas, structure the user flow, and align with the dev and marketing teams — all while keeping the project moving forward.

These sketches became my blueprint. They helped me stay focused, move fast, and turn complexity into something clear and buildable. It might not be fancy, but it got the job done — and that’s what counts.

High Fidelity (Hi-Fi) UI Phase 1

As the sole designer handling this project under a tight deadline, I focused heavily on building a highly functional and purpose-driven user interface. Backed by insights from various sportainment apps—both local and global—I designed the layout and features to align with real user behaviors and expectations. My priority was to keep everything as user-friendly and familiar as possible, tailored specifically for our diverse audience: sports enthusiasts and crypto lovers. Here’s a preview of the Hi-Fi design that brings that vision to life.

Loading -> Login -> Register -> Forgot Password Screen

Splash Screen

  1. Promotional Visual Banner:
    The banner on the splash screen acts as an early promotional element before users register or log in.
    Visual content is used to immediately catch the user’s eye and highlight DRX’s key messages.

Login Screen

  1. Login via Email & Password:
    We chose email and password over usernames for clarity and ease of use.

  2. Horizontal Banner (16:9):
    Added as a visual promotional asset upon request from the marketing team.

  3. Two Login Options:
    We provide only Sign in with Google and Sign in with Apple to ensure seamless access across Android and iOS platforms, while keeping the login experience simple.

Register Screen

  1. Only 5 Form Fields:
    Email, Username, Phone Number, Password, and Confirmation Password — kept minimal for better usability and quicker onboarding.

  2. Why Phone Number is Included:
    Phone number data is needed for marketing purposes, such as notifications about events, product releases, or DRX Token updates.

  3. Finish Registration Page:
    This confirmation page reassures users (especially non-tech-savvy ones) that their registration is successful — improving trust and overall onboarding clarity.

Forgot Password Screen

  1. OTP via Email:
    We decided to send the OTP (One-Time Password) through email instead of phone or WhatsApp due to the complex third-party procedures required for SMS-based verification.

  2. Efficient & Cost-Free Solution:
    Sending OTP via email provides a faster, more practical, and cost-effective way to help users reset their passwords — as aligned with our internal IT team’s recommendations.

Home Screen (Phase 1)

Home Screen

  1. Top Summary Cards – “My Points”, “My Token”, “My Items”:

      • My Points: Points earned across DRX platforms like Telegram Mini-App and DRX Kick Soccer. These points can be converted into DRX Tokens—similar to an airdrop system found in many crypto projects.

      • My Token: Displays the total DRX Tokens a user owns, whether acquired through conversion or purchased directly from CEX platforms.

      • My Items: A visual inventory of DRX physical products (jerseys, jackets, etc.) the user has claimed using our NFC system.

  2. Live Match Data
    Real-time football match scores are shown in the Live Match section. Users can easily browse current, upcoming, and previous matches via a clean tab system for smooth navigation.

  3. League Standings
    A dynamic table showing updated club rankings across global football leagues—with a special highlight on the Indonesian league and other major international leagues. This helps users quickly track the progress of their favorite teams.

  4. Sports News Feed
    An automatically updating section powered by a 3rd-party API that delivers the latest sports news in real-time—keeping users engaged with fresh, relevant content at all times.

  5. NFC Scan Modal
    A quick-access modal that activates the NFC scanner. This allows users to instantly claim and verify their DRX products—enhancing the merge between physical and digital experiences.

Match -> News Screen (Phase 1)

Match Screen

  1. Detailed Separation of Data:
    I separated Upcoming Matches and Previous Matches into two distinct sections to provide better focus for users. This helps reduce confusion and allows users to find the match information they need quickly and clearly.

  2. Consistent with Home UI:
    The layout and structure are consistent with the Home screen to maintain familiarity, but with a more in-depth display of football match data.

  3. Better User Navigation:
    By minimizing mixed data in a single scroll, users are encouraged to explore matches in a more targeted and less cluttered experience.

News Screen

  1. Search Bar at the Top:
    A search bar was implemented at the top of the screen to help users find specific news articles more easily, increasing control and personal relevance.

  2. Auto-Fetch News via API:
    News content is integrated using a 3rd party API and updates in real-time, making the app a reliable source for fresh sports updates.

  3. Missing Filter Feature (Known Limitation):
    We acknowledge the absence of a filtering system (by category, date, etc.). This was due to time constraints and backend API limitations at the time of development.

  4. Planned Future Improvement:
    The filter feature has already been scoped and logged as a post-launch enhancement to further optimize user experience and content control.

Store -> Profile Screen (Phase 1)

Store Screen

  1. The Store Screen currently features only three buttons, due to the absence of a finalized concept, user brief, or specific business request for this section.

  2. Since DRX Asia partners with top Indonesian e-commerce platforms—Tokopedia, Blibli, and Shopee—to sell their physical products, we decided to provide direct buttons that redirect users to DRX Asia’s official store pages on each platform.

  3. This solution ensures a seamless shopping experience without the need to develop an internal e-commerce infrastructure within the app at this early stage.

Profile Screen

  1. The Profile UI was inspired by popular social media platforms to ensure familiarity and ease of use for the users.

  2. By adapting this recognizable layout—complete with editable profile details, grid-based item display, header, and user avatar—users can intuitively navigate without a steep learning curve, especially under tight development timelines.

Edit Profile

  1. Users can update their Name, Bio, Date of Birth, Website/URL, and Wallet Address.

  2. The inclusion of a Wallet Address field is essential for future integration with Web3-based features, staying true to the application’s core vision.

Hamburger Menu

  1. The menu includes 5 key entries:

    • Account Settings

    • Connect Wallet

    • Transfer Item

    • Receive Item

    • Claim Item

  2. While some of these (like Transfer and Receive Item) will be developed in future phases, they’ve been conceptually laid out in this early version to reflect DRX’s long-term vision.

  3. The Connect Wallet feature is also part of the Phase 1 concept, and its execution will depend on executive direction (COO & CEO) and evolving user needs.

Item Detail Screen -> Alert (Phase 1)

Item Detail Screen

  1. Complete Product Info
    This screen provides key product details such as Item ID, SKU, Season, Color, Size, and Description, to ensure users can verify the authenticity of their claimed products from our official store.

Claim Info Screen

  1. Claimed vs Transferred Status
    I designed two variations of the “Claim Info” view to clearly differentiate between:

    • Items claimed directly by the user via NFC.

    • Items received from other users through transfers.

  2. Timestamp Indicators
    Each transferred item displays a timestamp, providing users with visible proof and a log of the transfer for transparency.

Alert System

  1. Success Alert
    A confirmation alert appears after a successful claim, reassuring users that the product has been added to their profile.

  2. Already Claimed Alert
    This alert is triggered if a user attempts to claim an item that has already been registered under their account—preventing duplication and data conflicts.

High Fidelity (Hi-Fi) UI Phase 2: Product Expansion & Strategic Enhancements

As we move into Phase 2 of the DRX Sportnet app development, the focus shifts toward expanding core functionalities and introducing strategic features based on real-time needs and stakeholder goals. In this stage, we implemented a series of UI/UX design updates, feature enhancements, and even major layout changes—while working under tight deadlines tied to specific milestones.

Some of these feature rollouts were aligned with the DRX Token Launching Event held on March 2, 2025, and were designed to be publicly showcased during the event. Meanwhile, other features were added post-event to be displayed directly to the DRX community and token holders, aiming to build stronger trust and credibility in the DRX Token ecosystem.

This phase played a critical role in increasing user engagement, strengthening community confidence, and ultimately driving a surge of token purchases by retail users through various Centralized Exchanges (CEXs).

Home Screen Development Phase 2

Home Screen

In Phase 2 of the DRX Sportnet app, we introduced several updates and enhancements to the Home Screen to align with both the DRX Token Launch event and the growing demands of the Web3-based ecosystem. These adjustments not only aim to improve functionality and clarity but also to increase user engagement—especially among crypto-enthusiasts and sportainment fans.

Key Improvement:

  1. Streamlined Header Section: The previously displayed token balance (“My Token”) was removed to simplify the user interface and avoid redundancy, since token balance is now prominently shown under “Live Price.” The header now focuses solely on two essential user assets:

    • My Points: Points collected from DRX Mini Games and other activities, which can be converted into DRX Tokens.

    • My Items: A count of DRX products (merchandise, apparel, etc.) owned and claimed by the user via NFC or other methods.

  2. Web3 Features Integration: A brand-new “Features” section has been added to showcase the core Web3 capabilities of the DRX ecosystem, Each feature redirects users to its corresponding webpage, allowing deeper interaction with the Web3 platform without overloading the mobile UI. including:

    • Staking

    • Swap

    • Play to Earn

    • Referral

    • Airdrop

    • Experiences

  3. Live Token Price Display: To meet the demands of the crypto-savvy audience, we integrated a Live Price module showing the real-time value of DRX Token—updated via CoinMarketCap API. This helps users keep track of token fluctuations at a glance, directly from the Home Screen.
  4. Our Games Section: Another major addition is the “Our Games” section, which lists the mini-games developed under DRX, Each game includes a quick preview and a direct link to play. This reinforces DRX’s commitment to the sportainment concept while also supporting its tokenomics through Play-to-Earn mechanisms. such as:

    • DRX Telegram Mini Game

    • DRX Penalty Kick

Match Screen Development Phase 2

Match Screen

In Phase 2 of the DRX Sportnet app, the Match Detail Screen underwent a significant enhancement to provide a richer and more immersive experience for football fans. This screen now serves as a real-time, data-driven match center where users can track live game progress, analyze statistics, and explore historical data—all from a single page. 

Key Enhancements:

  1. Live Score Integration
    The top section of the screen delivers real-time match scores, including the current phase of the game (e.g., “1st Half” or “2nd Half”) and live goal updates, giving users instant insight into ongoing matches.

  2. Detailed Match Tabs
    Two distinct tabs—Summary and Statistics—break down the match by half:

    • Summary Tab: Lists chronological match events, such as goals and player actions, broken down by 1st and 2nd Half.

    • Statistics Tab: Offers detailed match analytics, including Shooting, Attacks, Possession, Cards, Corners, and Free Kicks. This section updates progressively and provides a full-time snapshot post-match.

  3. Match Information Section
    Provides essential match context such as the Referee and Stadium details to add depth and transparency for match followers.

  4. Head-to-Head History
    A Head2Head section presents a compact visual of the most recent encounters between both teams, filtered by:

    • Overall

    • Home Matches

    • Away Matches
      This helps users compare past performance and better anticipate match outcomes.

  5. Team Standings Highlight
    The Rank section at the bottom highlights both competing teams within the league standings. This quick snapshot allows users to see where both clubs stand within their current league table, updated dynamically with match results.

Live Price DRX Token Screen Development

Live Price DRX Token Screen

In Phase 2, the Live Price Detail Screen is introduced as a comprehensive interface for tracking the real-time performance of DRX Token within the cryptocurrency market. Designed with clarity, flexibility, and user trust in mind, this screen empowers users to monitor their holdings and make informed decisions with confidence.

Key Features:

  1. User Wallet Overview
    At the top of the screen, users can view their personal DRX wallet address and their current DRX Token balance. This section serves as a quick summary of individual holdings, ensuring transparency and ease of access.

  2. Interactive Price Chart
    A dynamic candlestick chart is integrated to display token price fluctuations in real time. Users can toggle between multiple timeframes—1m, 30m, 1h, 1d, 1w, 1M, 1Y, or All—to analyze short-term movements or long-term trends. Prices are displayed in Indonesian Rupiah (IDR), localized for the primary user base.

  3. Market Information Panel
    This section provides a deep dive into market metrics, including:

    • Market Cap

    • 24h Volume

    • Fully Diluted Valuation (FDV)

    • Volume-to-Market Cap Ratio (24h)

    • Total and Max Supply

    • Self-Reported Circulating Supply
      These figures help users understand the market positioning and health of DRX Token.

  4. Buy DRX Token CTA
    A standout “Buy DRX Token” button is placed at the bottom of the screen. When tapped, it triggers a modal containing a list of supported centralized exchanges (CEXs) including:

    • Indodax

    • GudangKripto

    • MOGEE

    • Reku

    • Bitmart
      Each button redirects the user to the respective token purchase page on the chosen platform, providing a seamless pathway for investment.

Transfer Item Screen Features

Transfer Item Screen

The Transfer Item Screen in Phase 2 introduces a streamlined and intuitive feature that enables users to transfer digital items securely from one account to another. Designed with a user-first mindset, this screen reflects the outcome of extensive iteration and collaboration within our product team, ensuring both simplicity and efficiency in the user flow.

Key Objectives:

  • Item Transfer Logic:
    Once an item is transferred from one user to another, it is permanently removed from the sender’s profile and fully reassigned to the recipient—ensuring asset ownership integrity.

User Flow:

  1. Accessing the Transfer Menu
    Users begin by navigating to the Transfer Item menu, where they are presented with a searchable list of their owned items. A search bar is provided to quickly locate specific products, enhancing discoverability and efficiency.

  2. Selecting the Item
    Upon finding the item, users can tap to select it, initiating the transfer process.

  3. Choosing the Recipient
    Users can then search for the recipient by username using a dedicated recipient search bar, making the process accurate and user-friendly.

  4. Confirmation Step
    Once the item and recipient are selected, users must confirm their action via a modal prompt. This final confirmation ensures the user is fully aware that the item will be removed from their inventory.

  5. Awaiting Recipient Approval
    After confirming the transfer, the system enters a pending state—waiting for the recipient to accept the item. This provides a safeguard against accidental or unauthorized transfers.

This feature reflects the results of numerous discussions and design validations across cross-functional teams, leading to a clear, minimal, and reliable item transfer experience.

Receive Item Screen Features

Receive Item Screen

The Receive Item Screen is the counterpart to the Transfer Item feature, allowing users to manage and respond to incoming item transfers in a clear and controlled manner. This screen focuses on transparency, user autonomy, and seamless interaction—delivering an experience that feels both secure and intuitive.

Core Functionality:

  • Receive & Review Incoming Transfers
    When a user is selected as the recipient of an item, they will receive a notification within the Receive Item menu. Here, all incoming transfer requests are listed in an organized and actionable interface.

Key Features:

  • Accept or Decline Options
    Each incoming item can be either accepted or declined, giving the recipient full control over their inventory and ensuring no automatic transfers occur without consent.

  • Sender & Timestamp Visibility
    For every transfer request, users can clearly see who sent the item, as well as the date and time the transfer was initiated—providing context and traceability.

  • Item Detail Preview
    Before taking action, recipients can view detailed information about the item being offered, helping them make informed decisions before accepting or rejecting the transfer.

This feature reinforces trust within the DRX Sportnet ecosystem by prioritizing transparency and user consent, while maintaining a smooth and minimal user experience. Its design was shaped through iterative testing and close team collaboration, making it a key part of the overall asset management flow in the app.

Settings Screen Features

Settings Screen

The Settings Screen serves as the central hub for user preferences and account management within the DRX Sportnet ecosystem. Designed with scalability and user autonomy in mind, it offers a clean, modular interface where users can easily manage their personal information, privacy, and core account controls.

Core Features:

  1. Personal Information
    This section allows users to update essential personal details:

    • Change Email

    • Change Phone Number

    • Change Username

    • Wallet ID Display

    • Personal Address

    Each field is editable with validation in place to ensure both security and usability.

  2. Change Password
    A familiar and straightforward flow that empowers users to reset or update their password as needed, reinforcing account security.

  3. Blocked List
    Users can view and manage the list of accounts they’ve blocked. This feature promotes user safety and control over their social interactions within the app.

  4. Privacy
    A forward-thinking section for profile privacy control—allowing users to lock or hide their profiles from others. This is designed as an initial implementation, setting the groundwork for more robust privacy features in future development phases.

  5. Language Settings
    Introduced as a scalable language selector, this feature enables users to switch between multiple languages, including Bahasa Indonesia, English, Portuguese, Thai, and more—ensuring accessibility for a global user base.

  6. Delete Account
    Full user autonomy is respected with a self-service Delete Account option, allowing users to remove their account entirely, in compliance with data privacy principles and user rights.

  7. Switch Account (In Discussion)
    While this feature does not yet have a UI implementation, it is currently under team discussion as of May 8, 2025. The vision is to allow seamless switching between multiple user accounts within one app instance.

  8. Log Out
    A standard yet essential feature, enabling users to safely log out of their account at any time.

This screen was developed with a strong emphasis on clarity, user control, and future scalability, based on iterative feedback and team collaboration. Each feature was carefully structured to ensure both technical feasibility and an optimal user experience.

Impact & Results:

Impact:

Although internal data remains confidential, the overall impact of the app was reflected in:

  • Increased platform engagement from both sports fans and crypto users

  • Higher user retention thanks to simplified flows and feature clarity

  • Strong design consistency across all screens, enhancing user trust and usability

Additionally, features like Live Match Tracking, DRX Token Analytics, and In-App Asset Transfers were well-received by stakeholders, signaling positive alignment with user expectations and market trends.

Result (Generalized without disclosing private data): 

  • A significant boost in user interaction post-launch of Phase 2 features

  • Improved navigation clarity through refined UX in Match, Transfer, and Settings flows

  • Strengthened user autonomy with features like privacy control, language localization, and account management

  • Laid the groundwork for future enhancements including multi-account handling and expanded language support

Conclusion:

The DRX Sportnet App was designed as a powerful digital ecosystem that bridges sports entertainment, crypto integration, and community interaction—packed into one seamless experience. Throughout its development, I collaborated closely with cross-functional teams to shape intuitive interfaces, build scalable design systems, and ensure consistency across core user flows.

This project not only challenged my design thinking, but also sharpened my ability to balance user needs with technical constraints, iterate through feedback, and deliver high-fidelity UI with real-world impact.

Links:

Feel free to explore and experience the DRX Sportnet App directly through the links below. This is the live product my team and I have worked hard to bring to life—designed with precision, developed with care, and built for real users.

Interested in seeing the full UI preview via Figma? Feel free to reach out to me personally for access.

Looking to build a similar app, need design consultation, or in search of a dedicated UI/UX Designer for your next product? Let’s connect—I’d love to hear about your project.

Hire Me