Arcade UX

A next-generation digital ecosystem that unifies the physical arcade with a seamless, engagement-driven mobile app, built to remove onboarding friction and reward long-term loyalty.

Role Lead UX Designer
Year 2025
Team Independent project
Platform Mobile app
Figma Prototyping Journey mapping User-flow charting Wireframing Usability testing
← Back
Arcade interior: atmospheric dark hall with glowing game cabinets
The challenge

Bridging the physical arcade and the digital player

Pixel-art arcade cabinet labelled 'Challenge Cabinet' showing a dragon vs knight boss battle on screen, representing the design challenge.

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.

Journey mapping

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."

PeakCade's user journey map, 'From Local Hero to Global Legend': each step illustrated with the player's emotional highs and lows, from discovering the app to returning to play.
The full journey map charts every emotional high and low from first discovery to 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.

Information architecture

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.

PeakCade navigation flow chart: a central Home Page linking to Scanner, Leaderboard, My Score, Map and News pages plus a Game Detail screen, with slide-in overlay panels for the menu and notifications.
A hub-and-spoke architecture with the homepage as the central anchor for every gaming and social feature.
Wireframing

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 row of eight hand-drawn homepage wireframe options exploring different layouts, annotated with stars marking key decisions.
Eight low-stakes homepage sketches: quick enough to gather stakeholder feedback before a single pixel was polished.
Prototyping

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.

A Figma canvas showing the low-fidelity PeakCade prototype: dozens of greyscale screens connected by user-flow arrows.
The connected lo-fi framework: used for hallway usability tests and to refine touch-target sizes for an arcade-fast feel.
Visual design

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 PeakCade homepage shown evolving left to right, from a greyscale wireframe through low fidelity to a polished high-fidelity purple interface.
From skeleton to high-energy interface: structure preserved, polish layered on top.

The result retains the structural integrity of the initial research while delivering a modern, high-energy gaming aesthetic.

High-fidelity prototype

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

Branding

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.

Design system

Colors, type & iconography

Color palette

  • Cyan #00D4FF
  • Magenta #F72D6A
  • Purple #7B1FF5
  • Navy #0D0921
  • White #FFFFFF

Typography

Aa

DM Sans Display · Regular 400 · Bold 700

Aa

Inter Body · Regular 400 · Semibold 600

Type scale

  • Ag Heading Section titles
  • Ag Lead Lead paragraphs
  • Ag Base Body copy
  • Ag Small Captions, labels

Iconography

PeakCade app icon
App icon Rounded square · dark navy canvas
PeakCade wordmark
Wordmark Cyan & magenta · bold outline
PeakCade QR emblem
QR emblem Functional QR · physical touchpoints
Outcome

Process over pixels

The final PeakCade homepage: featured games carousel, daily quest card, high score and live activity feed.
The shipped homepage.

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

Next project

PeakABoo
AI / MLConversational UX

PeakCade AI Assistant

An in-app assistant that turns arcade data into a personal game guide.