Project type
Browser-based gamified portfolio — a navigable 2D street environment where each shop is a content section, designed for both immersive exploration and fast-track access.
Illustrated Personal Website
Role & Responsabilities
End-to-end Product Designer — responsible for UX strategy, information architecture, interaction design, motion system in Rive, UI design system, and prototype delivery.
Key outcomes
Validated a dual-navigation concept with 5 users, achieving 9.6/10 onboarding effectiveness and 400% faster task completion via map — confirming the game-feel approach without sacrificing usability.
You decide how deep you want to go — 30 seconds or 30 minutes, it's up to you.
Figma file available at the moment.
My Journey
Tap any icon for a quick look into process and outcomes
1
Strategic Pivot
Documented the decision to abandon a vertical layout for a navigable 2D world — and why that was the most strategic move for the project.
2
Market Landscape
Benchmarked RPGs and immersive portfolios
and elaborated a dual-navigation strategy.
Explorer mode for those who want to roam, Fast-Track mode for those who just need the answer.
3
Structural Ecosystem
Instead of a sitemap, I designed a street in which proximity encodes semantic relationship. Three maps define how the system moves, not just what it contains.
4
Inclusive Journey
The Recruiter needs outcomes in 60 seconds. The Enthusiast wants Easter eggs. Designing for both required locking accessibility constraints before opening Figma.
5
Wireframing
HUD elements locked before any visual styling. Low-fidelity wireframes carried real copy to validate user inten.
6
Visuals & Motion
EPS vector assets built as atomic components, three directional walk cycles in Rive, and a deliberate choice of Rive over Lottie for real-time state control.
7
UI & Design System
A golden aura as the universal interactivity signal, validated across colour perception variants. A system built to scale, documented to hand off without a call.
8
Usability Test
9.6/10 onboarding effectiveness. 400% faster task completion via map versus street scroll. The Snake minigame read as reward, not friction.
9
Prototyping & Constrains
Free WASD movement is fundamentally incompatible with Figma's fixed-state logic. I documented the constraints explicitly and turned the disclaimer into a stakeholder alignment tool.
10
AI-Powered Workflow
Used AI to compress benchmarking cycles and stress-test flows via synthetic personas. Achieved Rive proficiency within 72h through targeted tutoring.
Fast lane
Click on the button below to see the final prototype.
Scenic Route
Key steps from problem analysis to prototype and user test.
Deep dive
Tap any step to open details about research, iterations, and outcomes.