Some more brand to build in banana tech company

Project

Building Digital Products for Online Gaming

platform

Desktop Web, Mobile Web, and Internal CMS

Responsibilities

I collaborated with cross-functional teams to design and continuously improve product experiences based on business goals, user behavior, and usability findings. My responsibilities ranged from creating new features and optimizing existing workflows to maintaining the design system, writing product documentation, supporting Jira tickets, and ensuring design consistency throughout development.

Product Type

B2C Digital Platform

1. Case Study Overview

a. Feature Design & User Experience

  • Authentication (Email & Phone OTP)
  • Search Experience
  • Payment Experience

c. Design System & Design Operations

  • Design File Organization
  • Component Library
  • Component Variants
  • Design Tokens
  • Team Collaboration
  • Scalability

b. Product Documentation & Cross-functional Collaboration

  • User Stories
  • Acceptance Criteria
  • Jira Documentation
  • Functional Specification
  • Happy Path & Edge Cases
  • Cognitive Walkthrough

d. Data-informed Product Optimization

  • Google Analytics
  • User Behavior Analysis
  • Customer Feedback
  • Marketing Insights
  • Traffic & Revenue Analysis
  • Product Optimization

2. Feature Design & User Experience

Feature design must consider business rules, technical constraints, and system architecture before moving into UI design. Close collaboration with Product Managers, Business Analysts, and Backend Engineers is essential to ensure each solution is feasible and scalable.

Email verification

  • Email verification is relatively straightforward compared to phone verification, as it does not rely on third-party OTP providers. However, the interaction still requires validation rules to prevent abuse and ensure a smooth recovery flow.
  • The flow was designed together with the Backend team to define rate limits and validation rules for repeated verification requests. If verification failed, users were allowed to request another verification email after a five-minute cooldown period.

Phone verification

  • Phone verification required additional business logic because OTP requests depended on a third-party service provider. Frequent OTP requests could increase operational costs, making request limits and validation rules critical.
  • Each OTP remains valid for 5 minute. After the validity period expires, the code is automatically invalidated and users must request a new OTP.
  • Users are allowed a maximum of three incorrect verification attempts. After each failed attempt, the system displays a progressive validation message (e.g., “2 attempts remaining” or “1 attempt remaining”). After the third failed attempt, the current OTP is invalidated and users must wait five minutes before requesting a new verification code.

Conclusion

=> Designing authentication is not only about creating user interfaces. It requires balancing usability, security, technical feasibility, and operational costs. Close collaboration with Product Managers, Business Analysts, and Backend Engineers ensured the solution was both user-friendly and scalable.

Search Experience Optimization

  • Search is one of the primary navigation methods for helping users quickly discover games within a large product catalog. The goal was to reduce search effort while improving discovery speed and overall engagement.
  • To reduce typing effort, the system provides real-time search suggestions based on matching keywords, allowing users to reach their target content more quickly.
  • Search suggestions are triggered after users enter at least three characters. This threshold reduces unnecessary API requests while improving suggestion relevance and minimizing noisy results.
  • The final solution balanced user experience, search performance, and backend efficiency, enabling faster product discovery while reducing unnecessary system requests.

Payment Experience

Deposit Experience

  • The deposit amount input provides real-time validation to guide users throughout the payment process.
  • The Deposit button remains disabled by default and is enabled only after users enter a valid amount within the configured minimum and maximum limits.
  • Invalid inputs immediately display validation messages below the input field, preventing users from continuing until the error is resolved.
  • This interaction reduces input errors, improves task completion, and ensures users clearly understand why an action is unavailable.
  •  

Withdraw via Bank

  • The withdrawal flow is designed to ensure secure transactions while minimizing user errors.
  • Users must register and verify a bank account before making their first withdrawal.
  • The Withdraw button remains disabled until all required information is valid, including the withdrawal amount and bank account.
  • Real-time validation prevents withdrawals outside the configured limits or exceeding the available balance, providing immediate feedback to users.
  • Happy case
    • The Withdraw button changes from disabled to enabled once all required conditions are satisfied, allowing users to submit the transaction.
  • Validation Cases:
    • Validation messages are displayed when the entered amount is below the minimum or exceeds the maximum allowed limit.
    • Users are also notified if the withdrawal amount exceeds their available balance.
    • Users must correct any invalid input before they can continue.

3. Product Documentation & Cross-functional Collaboration

Designing a feature is only one part of product development. Clear documentation and close collaboration with Business Analysts and engineers ensure that every requirement is implemented consistently and reduces ambiguity during development.

User Stories & Acceptance Criteria

  • Worked closely with Business Analysts to review User Stories and Acceptance Criteria before designing.
  • Ensured every UI state and interaction matched documented business rules.
  • Reduced ambiguity between design and implementation by aligning designs with functional requirements.

Functional Specification

  • Defined feature logic, user flows, validation rules, and interaction states.
  • Covered system responses for both successful and exceptional scenarios.
  • Maintained documentation as a single source of truth for designers and developers.

Happy Path & Edge Cases

  • Designed not only the primary user journey but also uncommon scenarios that could affect usability.
  • Considered invalid inputs, empty states, loading, API failures, permission issues, and business constraints.
  • Ensured users always received clear guidance regardless of the outcome.

Cognitive Walkthrough

  • Identified usability issues before development.
  • Improved button labels, validation messages, and interaction flows.
  • Reduced user confusion during critical tasks such as authentication, deposits, and withdrawals.
  • Helped ensure smoother implementation by validating user scenarios with stakeholders and developers

Ex:

  • Can users understand why button OTP is disabled?
  • Can users understand why the amount cannot be submitted?
  • Do users know the withdrawal was successful?
    • after finished which will be redirect to transaction history

4. Design System & Design Operations

A scalable design system requires more than reusable components. It also depends on a well-organized file structure, clear documentation, and collaboration across Product, BA, and Engineering to ensure consistency and efficient delivery.

Organizing Design Files

  • Organized design files by feature, user flow, and validation scenarios.
  • Shared component libraries and design tokens across multiple brands.
  • Structured files to improve collaboration between Designers, BAs, PMs, and Developers.
  • Reduced maintenance effort and ensured design consistency across products.

The main pages are structured into separate sections:

  • Grouped related screens, components, and user flows into a single feature workspace.
  • Included interaction states, validation cases, and business rules for every feature.
  • Helped cross-functional teams quickly understand the complete product flow.

Feature Organization

  • Organized each feature into a single workspace with all related screens and user flows.
  • Grouped interaction states, components, validation scenarios, and popups together.
  • Made it easier for stakeholders to review features and understand the complete implementation.

5. Data-informed Product Optimization

Stakeholder Alignment with Marketing & Operations

  • The objective of the workshop was to identify user pain points and align business goals across Marketing and Operations.
  • Analyze user traffic flow to understand how users navigate from marketing channels to key pages, identify high-traffic areas, and prioritize UX improvements that increase engagement and conversion.
  • Discuss User Experience, user pain points related to operate to make trouble by users. Ex: key Issues Identified as:
    • Slow deposit processing.
    • Complex interaction flow.
    • Low visibility of critical information (e.g., QR Code).

Qualitative Feedback on Payment Optimization

  • User feedback identified several usability issues in the deposit flow.
    • Slow deposit processing.
    • UI usability issues.
  • Concerns & Issues
    • Bank Selection
      • Large bank selector creates visual clutter.
      • Replace it with a searchable dropdown to improve usability.
    • Suggested Amounts
      • Preset amounts don’t match user behavior.
      • Recommend frequently used deposit values based on transaction history.
  • Improvements & Optimizations
Personalized Deposit Suggestions
    • Recommend deposit amounts based on historical transaction patterns.
  • Enhance QR Payment Experience
    • Display essential payment information in a clear and structured layout.
    • Highlight important payment and security information.
  • Improve the deposit experience, increase user confidence, and drive higher conversion rates.

Data-Driven Product Optimization

  • Design decisions were driven by analytics data and cross-functional user feedback.
    • Use Google Analytics to identify high-traffic pages and focus design efforts where they create the greatest business impact.
    • Example focus on the top 5 high-traffic pages for immediate improvements:
      • Homepage
      •  Deposit Page
      •  Withdrawal Page
      •  Transaction History Page
      •  Other high-traffic pages that
  • Device-Specific Optimization
    • Analyze device usage to prioritize platform-specific design improvements.
    • If mobile traffic is 10x higher than desktop and tablet, mobile-first design should take priority. Example:
      • Optimize the most common mobile screen sizes to maximize usability and business impact.

=> Data-driven design enables better prioritization, improves user experience, and increases conversion.

Beyond Traffic: Data-Driven Product Decisions

  • Beyond traffic analytics, product decisions were also guided by key business metrics:
    • ✅ Revenue & Profit
    • ✅ Total Users & New Users
    • ✅ Top-Selling Products & Key Product Categories
    • Analyze product performance to identify growth opportunities, prioritize high-value products, and optimize category strategy.

=> These insights drive data-informed UX decisions that improve engagement and conversion.

Data-Driven Product Prioritization

  • Analytics showed that over 60% of users engaged primarily with Card Games and Lottery, exceeding Sports.
    • Prioritize high-demand categories by placing them at the top of the homepage.
    • Display the highest-performing games first based on turnover and user activity
  • Move low-performing products lower in the list to improve content relevance and visual focus.

=> Prioritized content helps users discover relevant products faster, increasing engagement and conversion.

5. Lesson learned

  • Developed a deeper understanding of the game domain, including authentication, payment systems, product ecosystems, and user behavior across different game categories.
  • Effective product design goes beyond UI. Every design decision should balance user needs, business objectives, technical feasibility, and operational constraints.
  • Cross-functional collaboration is essential to align Product, Business Analysts, Engineering, Marketing, and Customer Support, ensuring solutions are practical and implementation-ready.
  • System thinking improves product quality. Designing scalable components, considering edge cases, and maintaining consistency across complex user flows reduce implementation risks and improve long-term maintainability.
  • Data should drive design decisions. Combining user feedback, analytics, and business metrics helps prioritize high-impact improvements instead of relying on assumptions.
  • Well-structured design operations improve team efficiency. Organized design files, reusable components, and clear documentation enable faster collaboration and more consistent product delivery.

Previous

E-commerce project for workers

Next

Charity project

Hotline
077.804.9797