UX / UI Case Study Gaming Mobile App

PeakCade

A social-first arcade ecosystem connecting physical play with digital loyalty.

← Back to work
PeakCade welcome screen

Project overview

Role Lead UX Designer
Type of project Mobile app / Gaming
Deliverables Research · Wireframes · Prototype

Problem statement

Arcades are inherently social — people go to compete, show off, and share moments. But once players leave the arcade, that experience evaporates. There's no digital thread connecting the physical gameplay to a wider community, no persistent identity, and no reason to return.

Hypothesis

If we give arcade-goers a seamless way to log scores, connect with other players, and unlock achievements through a mobile companion app, we can bridge the gap between physical and digital play — creating habitual engagement beyond the arcade visit itself.

Goal

How might we bridge the gap between physical arcade entertainment and digital user engagement?

Eliminate friction in user onboarding and create a social-first gaming environment that rewards long-term loyalty.

Research

Survey objectives

Before wireframing, I mapped the end-to-end experience across 15 user touchpoints — from first hearing about PeakCade through discovery, download, onboarding, first play, and return visits. Each step surfaced a friction point or emotional peak that became a design constraint.

Competitive audit

Reviewed four competitors in the gaming loyalty and social play space to identify gaps PeakCade could own.

01

No physical-digital bridge

Existing apps focus on mobile gaming only — none connect to physical arcade cabinets via QR or NFC.

02

Friction in onboarding

Competitors required 5–7 steps before a user could log their first score. Players abandoned before completing setup.

03

Weak social hooks

Leaderboards existed but were isolated — no friend activity, shared moments, or community challenges to drive return visits.

04

Loyalty programs underused

Points systems existed but weren't tied to social status or progression — no emotional incentive to keep playing.

15-step PeakCade user journey map

Style guide

Font

Display Aa Bb Cc Dd Ee Ff Gg DM Sans
Body Aa Bb Cc Dd Ee Ff Gg Inter

Colors

Cyan #00D4FF
Magenta #FF2D8A
Purple #7B3FF5
Navy #0D0921
White #FFFFFF
PeakCade neon logo

Logo concept

The emblem combines a QR code with an arcade cabinet silhouette and neon glow effects. The QR code is both functional and symbolic — it's the literal bridge between the physical arcade cabinet and the digital app, designed to be scanned in-venue to log scores instantly.

Cyan and magenta were chosen to mirror the electric atmosphere of an arcade environment — two complementary neon colors that feel energetic and retro-futuristic simultaneously.

Design process

01

Navigation architecture

With 15 journey stages mapped, I designed the information architecture using a hub-and-spoke model with one strict rule: no feature more than three taps from home. This constraint forced clarity and surfaced the most important actions to primary navigation.

Navigation flow diagram
02

Wireframe exploration

The homepage design went through 40+ iterations. Starting from paper sketches, I explored multiple layout paradigms — community feed first, leaderboard first, discovery-first — before landing on a Daily Quest hook that creates an immediate reason to open the app.

Paper wireframe sketches Homepage iteration explorations on whiteboard
03

Final wireframe set

The final wireframe set (iterations 31–40) refined the information hierarchy — Daily Quest card above the fold, score display adjacent, and Live Activity below. The Scan button was elevated to a persistent top-bar action after usability testing showed it was buried in earlier versions.

Final wireframe set iterations 31-40

User testing

Prototype iterations

The design evolved across three fidelity levels. Each level answered different questions — lo-fi tested structure and flow, mid-fi tested information hierarchy, and hi-fi validated brand feel and micro-interactions.

Prototype evolution from wireframe to high-fidelity

Usability findings

Two critical issues surfaced before hi-fi polish was applied:

Finding 1

Social feed vs. leaderboard conflict

The social feed and the global leaderboard competed for the same visual zone, causing users to pause and re-orient on every visit.

Fix → Separated into distinct tabs (Friends · Leaderboards) with the social feed as the default landing state.

Finding 2

Buried QR scan CTA

The QR scan — the core action bridging physical arcade to app — was 3 taps deep. Users didn't discover it until the fourth session.

Fix → Elevated to a persistent button in the top nav bar, visible on every screen.

High-fidelity prototype

With structure validated, the full brand identity was applied: neon-noir visual language, high-contrast arcade typography, and motion cues that echo the excitement of physical play.

PeakCade loading / splash screen
Loading screen
PeakCade welcome / onboarding screen
Onboarding
PeakCade home feed
Home feed

Takeaways

What worked best

Starting with a 15-step journey map anchored every design decision in user reality. When stakeholders asked "why is X here?", there was always a journey stage to point to. Structure before aesthetics prevents aesthetic churn.

Lessons learned

The QR scan CTA lesson was the most valuable: the feature that is most central to the product's value proposition needs the most prominent placement — even when that feels visually heavy. Don't bury the core action.

Possible future improvements

Deeper social features — arcade squad challenges, group leaderboards, and in-app messaging between arcade regulars — would strengthen the "social-first" promise. The current design lays the foundation; the next phase builds the community layer.

"Starting with a 15-step journey map ensured that the high-fidelity UI was built on a foundation of user needs, not just aesthetics."