Shred

A mobile rhythm game UI, built around a guitar I'd already modeled in 3D.

A mobile rhythm game UI, built around
a guitar I'd already modeled in 3D.

Shred

A mobile rhythm game UI, built
around a guitar I'd already modeled in 3D.

YEAR

2026

ROLE

UX/UI Designer

TOOLS

Figma
Blender

STATUS

Completed

Range

A structured UX process applied
outside my usual B2B context

The #1 reason cat furniture
gets returned, solved before purchase

Genre fluency

Zero friction

Visual decisions grounded in rhythm game conventions, not generic UI

3D + UI

3D modeling and interface design
united in one deliverable

3D modeling and interface design united in one deliverable

3D modeling and interface design united in
one deliverable

Overview

Shred started with a 3D guitar model I'd already built, and became an excuse to practice UI design in a different context, with UX thinking kept at the center the whole way through.

Overview

Shred started with a 3D guitar model I'd already built, and became an excuse to practice UI design in a different context, with UX thinking kept at the center the whole way through.

Moodboard combining Guitar Hero and Guitar Rock Tour UI references with Spider-Man Into the Spider-Verse visual style, alongside the original 3D guitar model

Genre research on one side, visual attitude on the other: Guitar Hero for UI conventions,
Spider-Verse for an art direction that didn't feel generic.

Genre research on one side, visual attitude on the other: Guitar Hero for UI conventions, Spider-Verse for an art direction that didn't feel generic.

Borrowing the right conventions

Rhythm games have UI patterns players already recognize: note highways, combo multipliers, results screens with precision breakdowns. I studied Guitar Hero and Guitar Rock Tour to map what was functionally necessary.

For visual attitude, I looked outside the genre entirely:
Spider-Man: Into the Spider-Verse's clashing colors and kinetic energy became the reference for making the UI feel alive during high-stimulation gameplay, not just functional.

For visual attitude, I looked outside the genre entirely: Spider-Man: Into the Spider-Verse's clashing colors and kinetic energy became the reference for making the UI feel alive during high-stimulation gameplay, not just functional.

Mapping the full app

Before any visual work, I mapped the complete IA: main screen, collection, shop, events, social, tour, notifications, each branching into their respective sub-flows.

Shred information architecture flowchart showing all app sections branching from the main screen: play, collection, shop, events, social, tour, and notifications

The complete information architecture, mapped before any UI decision was made.

From paper to mid-fidelity

Paper sketches first: fast, disposable, focused on layout logic rather than detail. Then mid-fidelity wireframes to validate hierarchy and navigation before any color or typography decision.

The platform's configuration model emerged from real client behavior, not assumptions. Managers needed granular control, but operational overload was
a real risk.

Hand-drawn paper sketches of Shred's core screens including play, setlist, gameplay, and results

Mid-fidelity wireframes of Shred's six core screens in purple line art, showing main screen, setlist, song selection, gameplay, results, and collection

Validation

A basic interactive prototype in Figma validated the core navigation logic before moving to high-fidelity — making sure the flow between Setlist, Selected Music, Gameplay, Collection, and Results held together before investing in visual polish.

The platform's configuration model emerged from real client behavior, not assumptions. Managers needed granular control, but operational overload was a real risk.

Connected prototype flow diagram showing navigation logic between Shred's six core screens with directional arrows

Visual Design

Every visual decision had to serve clarity during high-stimulation gameplay. The palette leans into saturated, clashing color: Hot Fuchsia, Neon Ice, Bright Gold, against a dark amethyst base, echoing the Spider-Verse reference without copying it directly.

Shred color palette featuring Dark Amethyst, Neon Ice, Yellow Green, Hot Fuchsia, Harvest Orange, and Bright Gold

Typography needed the same energy: Barlow Condensed and Barlow Semi Condensed, chosen for their bold, slightly aggressive character that fits a rhythm game's pace.

Barlow Condensed and Barlow Semi Condensed typography specimens showing uppercase, lowercase, numbers, and symbols

Final designs

Six final high-fidelity screens for Shred showing main screen, setlist, song selection modal with 3D guitar preview, gameplay with note highway, results, and guitar collection

Result

As a personal concept with no live users, there are no performance metrics, and that's expected. What this project demonstrates is range: running a structured UX process, making deliberate visual decisions informed by genre conventions, and bridging 3D production with interface design in one cohesive deliverable.

Two screens remain as visual concepts rather than finished designs: the Main Screen, ideally showing the player's unlocked guitar collection inside a 3D room, and the Gameplay screen, envisioned as a full 3D stage environment. Both are directions for future iteration.

Reflection

Designing for high-stimulation contexts (gameplay, not enterprise dashboards) forced different priorities, legibility under motion, color as a functional signal, not just brand expression.

The next steps would be building out the 3D environments for the Main Screen and Gameplay screen, and prototyping the actual
note-hitting mechanic to test feel, not just layout.

The next steps would be building out the 3D environments for the Main Screen and Gameplay screen, and prototyping the actual note-hitting mechanic to test feel, not just layout.

Shred

A mobile rhythm game UI, built around a guitar I'd already modeled in 3D.

A mobile rhythm game UI, built arounda guitar I'd already modeled in 3D.

Shred

A mobile rhythm game UI, builtaround a guitar I'd already modeled in 3D.

YEAR

ROLE

TOOLS

STATUS

Range

Range

Range

Genre fluency

Genre fluency

Zero friction

3D + UI

3D + UI

3D + UI

Overview

Overview

Borrowing the right conventions

Borrowing the right conventions

Mapping the full app

Mapping the full app

From paper to mid-fidelity

From paper to mid-fidelity

Validation

Validation

Visual Design

Visual Design

Final designs

Final designs

Result

Result

Reflection

Reflection

A mobile rhythm game UI, built around
a guitar I'd already modeled in 3D.

A mobile rhythm game UI, built
around a guitar I'd already modeled in 3D.