Bridging the physical arcade and the digital player
PeakCade is a next-generation digital ecosystem designed to unify the physical arcade experience with a seamless, engagement-driven mobile app.
Despite the high energy of physical gaming spaces, the digital connection usually ends the moment a player leaves the building. The mission was to eliminate friction in onboarding and create a "social-first" environment that rewards long-term loyalty.
How might we bridge the gap between physical arcade entertainment and digital user engagement?
PeakCade was born from the need for a continuous ecosystem that guides players from their first discovery through to long-term loyalty: a mobile experience as fast-paced and rewarding as the games themselves, without overwhelming the user with complex navigation.
From Local Hero to Global Legend
I developed a comprehensive user journey map to visualize the full end-to-end player experience, from a player's first "Discovery" of the app to their final "Return Visit."
Key insight: mapping every emotional high and low point surfaced critical drop-off risks during the mid-journey achievement phase.
Outcome: the map became the blueprint for all functional requirements, keeping every design decision aligned with the player's goals.
A hub-and-spoke app structure
To translate the journey into a functional app, I built a logic-driven navigation flow chart that lays out the primary, secondary, and tertiary paths, keeping the full journey intuitive and never more than three taps away.
Rapid ideation on the homepage
I sketched multiple homepage wireframe iterations to experiment with content density and visual hierarchy. Early versions chased feature breadth; later ones moved toward a cleaner, card-based layout to reduce cognitive load.
A low-fidelity Figma framework
In Figma, I built a low-fidelity prototype framework to test core functionality and button placement, verifying the complete flow felt natural without the distraction of color or imagery.
The homepage evolution
A visual refinement pipeline tracked the homepage from a skeleton wireframe to a polished, high-fidelity interface:
- Phase 1: layout and structure (wireframe)
- Phase 2: spacing and typography (lo-fi)
- Phase 3: brand identity and visual polish (hi-fi)
The result retains the structural integrity of the initial research while delivering a modern, high-energy gaming aesthetic.
The final aesthetic
The final screens use a high-energy palette and modern typography designed to mirror the excitement of a physical arcade.
The welcome page uses a clear-action hierarchy to funnel new users into the full journey without hesitation.
The loading page treats the loading state as an intentional part of the experience, keeping players engaged while the app fetches real-time gaming data.
The homepage balances complex data, including rewards, active games and social notifications, inside a clean, card-based interface that prevents cognitive overload.
Interactive prototype
Explore the interface
Tap and interact with the live app
A logo that bridges two worlds
The integrated QR emblem embeds a working QR code directly into the logo, a literal bridge between the physical arcade and the digital app. Stylized arcade-cabinet and retro "invader" art signal the product's purpose without words, while a neon glow echoes the LED lighting of a gaming hub. It's built for physical touchpoints like machine decals and posters, where players scan to enter the ecosystem instantly.
The wordmark pairs a bold sans-serif with high-contrast cyan and magenta for a "neon-noir" feel, finished with a heavy outline and offset shadow that give it a sticker-like pop against any background. This streamlined version is optimized for the app's navigation bar and headers.
Colors, type & iconography
Color palette
- Cyan #00D4FF
- Magenta #F72D6A
- Purple #7B1FF5
- Navy #0D0921
- White #FFFFFF
Typography
Aa
Aa
Type scale
- Ag Heading Section titles
- Ag Lead Lead paragraphs
- Ag Base Body copy
- Ag Small Captions, labels
Iconography
Process over pixels
By grounding the design in a detailed journey map and iterating through multiple levels of fidelity, I turned a complex concept into a high-energy, intuitive mobile app. The final interactive prototype demonstrates a seamless flow that prioritizes player speed and social connectivity.
Key takeaways
- Process over pixels. Starting with a thorough journey map ensured the high-fidelity UI was built on a foundation of user needs, not just aesthetics.
- The power of iteration. Moving from wireframes to low fidelity caught navigation friction early, saving time during the high-fidelity branding phase.
- Scalability. The homepage design system is modular, so future features can be added without breaking the core experience.
Tools & deliverables: Figma · journey mapping · information architecture · user-flow charting · iterative wireframing · hi-fi mockups · interactive prototyping
