Phantom - Cross-Platform UI/UX Design
Industry
VR
Team
Solo Project
Role
UI/UX Designer
Project Timeline
1 week
Designed a spy-themed video game, across three platforms — Desktop, Mobile, and VR. The goal was to create a consistent, immersive, and modern UI/UX, tailored to each platform’s strengths and limitations.
Figma Prototype Link
https://www.figma.com/proto/
Figma Prototype Link
https://www.figma.com/proto/
Project Overview
Design Brief
“Create a landing experience for an app for three different platforms (Mobile, VR, and Desktop). The app is called Phantom, a spy-themed video game where you can recruit different spies to carry out missions. Designs should feel modern and sleek and must remain cohesive across all three platforms. Include core menu buttons (Play, Shop, Track Missions, Profile, Settings)."
Goal
Interpret that “landing page” as the game’s main menu screen, where players immediately access core features in a spy context, and adapt it across Desktop, Mobile, and VR with a unified design system.
Deliverables
Cross-platform design system
High-fidelity UI designs & prototypes
Functional Desktop prototype
ShapesXR mockups for VR
Project Overview
Design Brief
“Create a landing experience for an app for three different platforms (Mobile, VR, and Desktop). The app is called Phantom, a spy-themed video game where you can recruit different spies to carry out missions. Designs should feel modern and sleek—but not overly sci-fi—and must remain cohesive across all three platforms. Include core menu buttons (Play, Shop, Track Missions, Profile, Settings)."
Goal
Interpret that “landing page” as the game’s main menu screen, where players immediately access core features in a spy context, and adapt it across Desktop, Mobile, and VR with a unified design system.
Deliverables
Cross-platform design system
High-fidelity UI designs & prototypes
Functional Desktop prototype
ShapesXR mockups for VR
Project Overview
Design Brief
“Create a landing experience for an app for three different platforms (Mobile, VR, and Desktop). The app is called Phantom, a spy-themed video game where you can recruit different spies to carry out missions. Designs should feel modern and sleek—but not overly sci-fi—and must remain cohesive across all three platforms. Include core menu buttons (Play, Shop, Track Missions, Profile, Settings)."
Goal
Interpret that “landing page” as the game’s main menu screen, where players immediately access core features in a spy context, and adapt it across Desktop, Mobile, and VR with a unified design system.
Deliverables
Cross-platform design system
High-fidelity UI designs & prototypes
Functional Desktop prototype
ShapesXR mockups for VR
Project Overview
Design Brief
“Create a landing experience for an app for three different platforms (Mobile, VR, and Desktop). The app is called Phantom, a spy-themed video game where you can recruit different spies to carry out missions. Designs should feel modern and sleek—but not overly sci-fi—and must remain cohesive across all three platforms. Include core menu buttons (Play, Shop, Track Missions, Profile, Settings)."
Goal
Interpret that “landing page” as the game’s main menu screen, where players immediately access core features in a spy context, and adapt it across Desktop, Mobile, and VR with a unified design system.
Deliverables
Cross-platform design system
High-fidelity UI designs & prototypes
Functional Desktop prototype
ShapesXR mockups for VR
Project Overview
Design Brief
“Create a landing experience for an app for three different platforms (Mobile, VR, and Desktop). The app is called Phantom, a spy-themed video game where you can recruit different spies to carry out missions. Designs should feel modern and sleek—but not overly sci-fi—and must remain cohesive across all three platforms. Include core menu buttons (Play, Shop, Track Missions, Profile, Settings)."
Goal
Interpret that “landing page” as the game’s main menu screen, where players immediately access core features in a spy context, and adapt it across Desktop, Mobile, and VR with a unified design system.
Deliverables
Cross-platform design system
High-fidelity UI designs & prototypes
Functional Desktop prototype
ShapesXR mockups for VR
Research & Discovery
Competitive & Visual Research
Analyzed landing/menu layouts from games like Half Life Alyx, Splinter Cell, and Hitman.
Looked into VR UI conventions by studying games using ShapesXR, Meta Quest design patterns, and accessibility guidelines.
Identified color palettes and typography often associated with stealth/spy aesthetics.
User Goals
Easily navigate to core game functions (Play, Track Missions, Shop, Upgrade).
Understand context quickly across different devices.
Maintain immersion without overwhelming sci-fi aesthetics.
Research & Discovery
Competitive & Visual Research
Analyzed landing/menu layouts from games like Half Life Alyx, Splinter Cell, and Hitman.
Looked into VR UI conventions by studying games using ShapesXR, Meta Quest design patterns, and accessibility guidelines.
Identified color palettes and typography often associated with stealth/spy aesthetics.
User Goals
Easily navigate to core game functions (Play, Track Missions, Shop, Upgrade).
Understand context quickly across different devices.
Maintain immersion without overwhelming sci-fi aesthetics.
Research & Discovery
Competitive & Visual Research
Analyzed landing/menu layouts from games like Half Life Alyx, Splinter Cell, and Hitman.
Looked into VR UI conventions by studying games using ShapesXR, Meta Quest design patterns, and accessibility guidelines.
Identified color palettes and typography often associated with stealth/spy aesthetics.
User Goals
Easily navigate to core game functions (Play, Track Missions, Shop, Upgrade).
Understand context quickly across different devices.
Maintain immersion without overwhelming sci-fi aesthetics.
Research & Discovery
Competitive & Visual Research
Analyzed landing/menu layouts from games like Half Life Alyx, Splinter Cell, and Hitman.
Looked into VR UI conventions by studying games using ShapesXR, Meta Quest design patterns, and accessibility guidelines.
Identified color palettes and typography often associated with stealth/spy aesthetics.
User Goals
Easily navigate to core game functions (Play, Track Missions, Shop, Upgrade).
Understand context quickly across different devices.
Maintain immersion without overwhelming sci-fi aesthetics.
Research & Discovery
Competitive & Visual Research
Analyzed landing/menu layouts from games like Half Life Alyx, Splinter Cell, and Hitman.
Looked into VR UI conventions by studying games using ShapesXR, Meta Quest design patterns, and accessibility guidelines.
Identified color palettes and typography often associated with stealth/spy aesthetics.
User Goals
Easily navigate to core game functions (Play, Track Missions, Shop, Upgrade).
Understand context quickly across different devices.
Maintain immersion without overwhelming sci-fi aesthetics.
Moodboard & Design Direction
Created a visual tone that feels modern, sleek, tactical.
Moodboard & Design Direction
Created a visual tone that feels modern, sleek, tactical.
Moodboard & Design Direction
Created a visual tone that feels modern, sleek, tactical.
Moodboard & Design Direction
Created a visual tone that feels modern, sleek, tactical.
Moodboard & Design Direction
Created a visual tone that feels modern, sleek, tactical.
Color Palette
Balanced cold tones for mystery and warm accents for calls to action.
Color Palette
Balanced cold tones for mystery and warm accents for calls to action.
Typography
ANTON for headers: bold, clean, futuristic but readable
VCR Mono: used sparingly for stylized retro-terminal feel
Typography
ANTON for headers: bold, clean, futuristic but readable
VCR Mono: used sparingly for stylized retro-terminal feel
Design System
Design System
Platform Adaption Process
Desktop
Full-width layout with immersive visuals
Hover effects, subtle animations
Functional prototype (navigation + active states)
Mobile
Initially explored landscape, but pivoted to portrait for accessibility and engagement
Adaptive UI for smaller screens with larger touch targets
Scrollable vertical layout with stacked CTAs
VR (ShapesXR)
Used ShapesXR for immersive mockups
Scaled 2D designs to VR-appropriate dimensions (1000px = 1m)
Considered user gaze distance, floating panels, and interactive comfort
UI elements placed in a curved radius for better ergonomics
Platform Adaption Process
Desktop
Full-width layout with immersive visuals
Hover effects, subtle animations
Functional prototype (navigation + active states)
Mobile
Initially explored landscape, but pivoted to portrait for accessibility and engagement
Adaptive UI for smaller screens with larger touch targets
Scrollable vertical layout with stacked CTAs
VR (ShapesXR)
Used ShapesXR for immersive mockups
Scaled 2D designs to VR-appropriate dimensions (1000px = 1m)
Considered user gaze distance, floating panels, and interactive comfort
UI elements placed in a curved radius for better ergonomics
Narrative Consideration
Designed around a thematic spy experience:
“Phantom” as a covert operative organization
Menu buttons reflect game features: Recruit, Track, Upgrade, Shop
Tooltip/hover texts and small descriptions enhance narrative immersion
Narrative Consideration
Designed around a thematic spy experience:
“Phantom” as a covert operative organization
Menu buttons reflect game features: Recruit, Track, Upgrade, Shop
Tooltip/hover texts and small descriptions enhance narrative immersion
Iteration Process
Version 1
Feedback: “Feels a little sci-fi.”
Revised button styles, reduced futuristic visuals, replaced UI HUD with spy dossiers, paper textures, and “classified” markers.
Version 2
More grounded, thematic and balanced interface
Clear visual hierarchy and consistent branding across platforms
Iteration Process
Version 1
Feedback: “Feels a little sci-fi.”
Revised button styles, reduced futuristic visuals, replaced UI HUD with spy dossiers, paper textures, and “classified” markers.
Version 2
More grounded, thematic and balanced interface
Clear visual hierarchy and consistent branding across platforms
Final Design
Final Design
Key Achievements
Successfully adapted UI across 3 platforms, each respecting the user environment.
Maintained visual and functional consistency with variations tailored to each device.
Followed accessibility, immersive interaction, and modern aesthetics while staying within thematic boundaries.
Key Achievements
Successfully adapted UI across 3 platforms, each respecting the user environment.
Maintained visual and functional consistency with variations tailored to each device.
Followed accessibility, immersive interaction, and modern aesthetics while staying within thematic boundaries.
Reflection & Learnings
Balancing narrative immersion with functional UI is critical in game UX.
Platform adaptation goes beyond resizing — it’s about restructuring experience for how players engage on each device.
Even when rejected, projects like these add real value and maturity to design practice.
Reflection & Learnings
Balancing narrative immersion with functional UI is critical in game UX.
Platform adaptation goes beyond resizing — it’s about restructuring experience for how players engage on each device.
Even when rejected, projects like these add real value and maturity to design practice.
NEXT PROJECTS
