An engaging B2B2C Gachapon system connects hands-on consumer gaming with reliable merchant control tools. This setup helps keep arcade traditions alive in a digital market.
CapsuleHub is a digital Gachapon system that aims to recreate the tactile joy, excitement, and community feel of traditional Japanese capsule machines in an online shopping setting. The platform has two main parts: an engaging consumer experience for collectors (CapsuleHub) and a reliable control panel for independent store owners (CapsuleHub Admin).
The physical Gachapon culture is experiencing a quiet crisis. Rising retail rents, property taxes, and the soaring costs of arcade machines are forcing passionate independent store owners to close their beloved shops. A dedicated community of collectors and anime fans still craves the unique thrill of the capsule drop, but physical locations are disappearing quickly.
As a product designer, I aimed to create a digital haven for this nostalgic hobby. By translating the mechanical and tactile aspects of physical Gachapon into an easy-to-use web platform, we eliminate the costs of physical space and machine upkeep. This approach allows collectors to enjoy their favorite hobby from anywhere in the world. It also provides merchants with a profitable and accessible online storefront to maintain and grow their businesses.
Role: Lead Product Designer (End-to-End Product Strategy, Service Architecture, and B2B2C Design Systems).
Timeline: 6-week sprint.
B2B Customer: Independent toy merchants and arcade owners looking to digitize inventory, cut physical costs, and protect operating margins.
B2C Customer: Global anime collectors, hobbyists, and nostalgic gamers seeking a reliable, enjoyable, and genuine gachapon experience.
Deliverables: High-fidelity merchant dashboard, adaptive responsive front-end customer web interface, global service blueprint, and a complete cross-platform component design system.
Traditional e-commerce is straightforward: a user clicks on a product, pays a fixed price, and receives that item. Gachapon changes this completely by introducing the idea of Variable Rewards. The value comes not just from the final product but from the moments of anticipation—the thrill created between inserting a token, turning the crank, and waiting for the capsule to open.
In shifting from physical to digital, my research aimed to capture that same dopamine loop. I studied user behavior in arcade settings and mystery box platforms. I found that the digital experience falls flat when it resembles a lifeless loading screen. To address this, the interface on game platform spaces out the interactions intentionally. This builds anticipation and transforms a simple checkout into an emotionally rewarding collector's experience.
The biggest issue with online chance-based mechanics is user skepticism. If users think the system is rigged, engagement drops to zero. A key part of my UX strategy was to build total transparency into both sides of the ecosystem:
For the Admin: The merchant engine uses strict logic where odds need to be calculated and balanced. This is set up directly with inputs such as Percentage (%) on Add Prize Details screen. This approach helps protect business overhead.
For the End-User: By placing the visible prize pool carousel right next to the machine interface on game's front-end interface, which shows exact visual rarity indicators like the red LIMITED EDITION tag, the UX gives players clear expectations before they play. This fosters a foundation of trust that encourages long-term customer loyalty.
An immersive consumer interface relies on a strong, reliable backend operational system. To make CapsuleHub a reality, I designed a two-sided ecosystem where the CapsuleHub Admin platform and the consumer-facing machine are connected in a continuous, real-time data feedback loop.
Every variable set on the admin side directly influences the front-end user experience. When a merchant updates properties within Gachapon Settings, such as changing the machine name to Taiko no Tatsujin, adjusting the Price Per Play ($), or uploading a customized Machine Cover Photo, those changes immediately update the visual assets and transactional rules on the front-end interface. This service structure ensures that internal management tools directly support external customer engagement without causing engineering issues.
True senior-level UX design combines front-end interactions with back-end database limitations. Instead of creating an idealized happy path, I outlined the service architecture to systematically manage transaction security, probability rules, and fulfillment logistics.
The Decoupled Credit Pipeline: To keep payment compliance secure without disrupting the experience of a physical arcade, the system uses a separate payment checkout process. It generates digital Game Cards that link specific financial values to unique alphanumeric strings (e.g., DPREQAY0) with automatic status notifications (Available). When entered on the consumer UI, it shows verified balances and allows for real-time play.
The Intentional Odds Calculation Engine: To protect merchant business margins and ensure platform trust, the product layer enforces relational mathematical parameters (Percentage in total of 100%). Admins set explicit parameters on the prize details panel when they set up inventory like Donko or Don Wada. The system manages this logic on the backend, preparing the data structure needed to show clear visual odds directly on the player interface.
The Closed-Loop Fulfillment Bridge: The service flow effectively closes the loop by transforming a fun front-end game win into a standard commercial delivery ticket. When a user wins physical collectibles, the front-end shifts from gameplay to a streamlined shipping capture flow. This sends data directly into the master queue, organizing customer details, the group of won prizes, and shipping tracking methods into a clear row for warehouse fulfillment.
Administrative interfaces should reduce cognitive load and avoid input errors that affect business margins. In designing the internal dashboard for CapsuleHub, complex game mechanics are turned into organized and predictable digital forms:
Inline Contextual Modification Loops: On the main product interface, clicking "+ Add Product" shows an entry canvas right above the data grid. This setup keeps the current prizes in view while you add new ones.
Predictive Data Gating: The configuration fields simplify complex rarity math into clear inputs: Percentage (%) and Inventory. These correspond directly to the table rows under clear visual summaries, such as showing Rate: 10% and Inventory: 9 for the Donko character prize. This makes inventory auditing instant.
System Status Transparency: Key metric blocks on the main landing view summarize platform states (Total Products, Total Orders, Generated Cards) into simple, easy-to-read values. This helps provide quick performance tracking.
For a digitized novelty experience to succeed, data must flow smoothly from a fun front-end interaction to clear back-end operational queues. The interaction setup ensures this consistency across two important financial workflows:
The Voucher Lifecycle (Game Cards): The system separates real-time payment from gameplay issues using a programmatic game voucher loop. Generating a voucher links unique tracking numbers (e.g., DPREQAY0 on Game Cards screen) with an associated face value, real-time availability states, and automated timestamps. This process creates a reliable audit trail for customer service management.
Fulfillment Pipeline Tracking (Orders): When a user wins physical collectibles, the backend smoothly moves data blocks into the global shipping interface (Orders screen). Customer information, various prize groupings, and shipping methods are organized in a single horizontal row. This setup turns regular e-commerce delivery into a practical operational command center.
Defining rates
Inventory aggregation
Consolidated checkout calculation
Back-end packing row
Physical fulfillment introduces real-world overhead costs that digital apps often overlook. In the configuration logic for CapsuleHub, merchants have the ability to toggle Enable Shipping and define complex, multi-tiered shipping rate variables directly within global settings:
Shipping Costs = Regular ($5 Base + $0 Additional) vs. Express ($10 Base + $0 Additional)
From a consumer UX standpoint, hitting a player with a surprise shipping fee for each physical capsule won causes immediate checkout abandonment. To solve this business-critical friction point, I designed a Consolidated Checkout Flow:
The Digital Inventory Vault: As players win prizes, they are collected in a local state array rather than triggering individual checkouts. Users can access this at any time using the VIEW MY PRIZES (3) CTA button on gachapon game screen.
Slide-Out Inventory Drawer: The custom slide-out container on view prizes panel aggregates all accumulated physical prizes (Neko and Shaxy, Donko, Don Wada) under a single "MY PRIZES" summary interface, prioritizing the high-impact action button: CLAIM ALL PRIZES.
Aggregated Multi-Item Fulfillment: Clicking claim triggers the claim prizes panel layout. The checkout system bundles the user's winnings, calculating a single, flat-rate base shipping fee ($5.00) rather than individual parcel charges.
Operational Consolidation: On the back-end admin dashboard (Orders screen), these items are packed into a single shipping manifest. The system maps the order ID 6V9WYzNnNzQ79tUypJpy to a nested bulleted list of won prizes under a single customer row, saving warehouse packing materials and reducing processing overhead.
One of the most complex visual challenges of this project was designing a cohesive aesthetic identity for an ecosystem that serves two entirely different user mindsets. To solve this, I developed a dual-branded visual system that bridges emotional consumer excitement with crisp, professional business utility:
The Consumer Experience (CapsuleHub): Displayed on gachapon screen, view prizes panel, and claim prizes panel, the interface is designed to evoke the vibrant, nostalgic, and high-contrast atmosphere of a Japanese gaming arcade. It utilizes bold, saturated primary tones, playful capsule motifs, and dynamic cover configurations to trigger immediate emotional delight and curiosity. Rarity alerts utilize high-contrast visual signifiers, such as the vibrant red outline and LIMITED EDITION tag for rare prizes.
The Merchant Ecosystem (CapsuleHub Admin): Transitioned entirely toward professional confidence, systemic accessibility, and data density. As displayed on the game dashboard, products prizes panel, game cards screen, and orders screen, the interface transitions to a highly clean, neutral palette of crisp grays, structured borders, and a trustworthy, high-contrast primary blue accent (#1d4ed8). This eliminates visual noise, allowing store operators to manage complex configurations without cognitive fatigue.
To ensure effortless engineering handoff and bulletproof visual consistency across both product domains, every interface element was built as a reusable, responsive component conforming to strict WCAG 2.1 AA contrast guidelines:
1. Color-Coded Interaction Hierarchies
Primary interactive triggers are mapped to clear color paths to prevent merchant errors and prioritize critical workflows:
Primary High-Impact Action: Solid deep blue containers (such as + add product on products screen, save settings on admin setting screen, or CONFIRM DELIVERY DETAILS on Claim Prizes panel) anchor the user's focus onto positive transactional pathways.
Secondary/Dismissal Action: Clean neutral ghost states (such as EJECT CARD) allow alternative pathways without competing for visual hierarchy.
Destructive/System Warnings: Explicit red accents applied exclusively to high-consequence controls (such as the trash can delete icon on game cards screen and the global sign out navigation tab) to eliminate accidental merchant data loss.
2. Highly Scannable Data Rows & Input Form Fields
Forms are engineered on a responsive structural grid with explicit field boundaries to maximize data density while preserving comfortable touch target boundaries:
Inline Contextual Fields: Lightweight horizontal inputs used on screens like add prize details for mathematical entry (Percentage (%) and Inventory) align with the underlying data columns for intuitive tabular consistency.
Dynamic Status Indicators: Pill-shaped, high-contrast status labels with muted background weights (such as the vibrant green available label on game cards screen and the soft orange pending label on order screen) are strategically sized to support rapid merchant status auditing in under three seconds.
3. Structured Visual Taxonomy & Navigation
A clear, high-contrast left sidebar sets up the merchant’s navigation path. The simple vertical hierarchy (Dashboard → Settings → Products → Game Cards → Orders) uses a subtle light-blue background highlight on the active row, like the one shown on orders screen, keeping users oriented within the platform's layered structure.
Design value is proven through measurable business and user outcomes. To validate the success of the CapsuleHub ecosystem, I defined three core performance pillars to monitor post-launch:
Merchant Activation & Feature Adoption Rate: Tracking how quickly newly onboarded admins move from their dashboard to active product setup add prize details and complex shipping structures setting screen. Success means a low time-to-value (TTV) for store configuration.
Fulfillment Accuracy Rate: Monitoring the rate of successful shipments on the orders screen. By designing consolidated order lines that bundle multiple items (e.g., Don Wada, Neko and Shaxy), we aim to measure the reduction of fulfillment error rates compared to standard individual checkouts.
Gameplay Friction Reduction: Auditing checkout exit rates on the Stripe-integrated payment modal purchase game card and tracking credit authentication states on game cards screen. Lower drop-offs during payment validate that the decoupled game card framework successfully optimizes checkout velocity.
A product design is never truly finished; it simply evolves based on user behavior. Looking ahead, the immediate priority is optimizing the system's dead-ends into proactive engagement tools:
Integrated Bulk Shipping Actions: As merchant order queues scale beyond individual entries on orders screen, future iterations will support bulk action checkboxes. This allows store operators to check multiple rows and run a unified "Print Shipping Labels" sequence, drastically reducing manual administrative workload.
Direct-to-Home Live Tracking Integrations: While the current system successfully guides customers through shipping captures on the claim prizes screen, integrating real-time courier APIs (like USPS or DHL) directly into the customer slide-out drawer will provide users with live tracking statuses alongside their digital collection history, maximizing end-to-end platform retention.