Company
Personal Project
Year
Mei 2025
Category
Augmented Reality & Mobile Audio Streaming UI/UX Design
Role
UI/UX Designer
Project Overview
AR Radio APP is an exploratory UI/UX design project for a next-generation interactive radio streaming mobile application. The project blends the tactile nostalgia of vintage radio equipment with modern Augmented Reality (AR) and Spatial Audio technologies, creating an immersive, visual, and highly interactive audio streaming experience.
As the Lead UI/UX Designer, I led the end-to-end design process from conceptual user research and information architecture to crafting a scalable design system and high-fidelity interactive prototype in Figma.
Key Design Innovations & Features
- 3D Vintage Radio AR Visualization: Projects a tactile, realistic 3D classic radio model into the user’s physical environment via augmented reality camera feeds, complete with warm glowing vacuum tubes and interactive rotating frequency dials.
- Dynamic Neon Soundwave Visualizer: Real-time audio spectrum visualization with reactive neon glow waveforms that pulse rhythmically to the music tempo and bass frequencies.
- Spatial Audio & 360° Equalizer: An intuitive spatial sound positioning interface with a multi-band graphic equalizer designed for personalized acoustic soundscapes.
- Natural Gesture Controls: Fluid gesture interactions including horizontal swipe-to-tune frequency scanning, pinch-to-scale for 3D model resizing, and bottom-aligned thumb-friendly navigation.
- Dark-Mode Glassmorphism Design System: A sleek futuristic aesthetic utilizing translucent glassmorphism cards, WCAG-compliant high contrast ratios, and vibrant Cyan, Emerald, and Amber Gold visual accents.
Design & Prototyping Stack
- Design & Prototyping: Figma (Auto Layout, Component Variants, Smart Animate, Design Tokens & Variables)
- Research & Flow Mapping: FigJam, Information Architecture & User Journey Mapping
- Spatial UI Guidelines: ARKit & Human Interface Guidelines (Spatial UX & Mobile Ergonomics)
- Visual Assets: 3D Holographic Modeling Concepts, Vector Components, Typography Pairing (Inter & Space Grotesk)
Design Goals
- Bridging Classic Tactility & Digital Convenience: Recreating the joyful physical sensation of analog radio tuning inside a digital AR interface.
- Seamless Immersive Transitions: Ensuring smooth mode transitions between standard 2D playback controls and 3D Augmented Reality projection.
- Ergonomic One-Hand Usability: Placing all essential controls, station dials, and gestures inside the optimal thumb-reach zone.
- Developer-Ready Design System: Establishing modular atomic UI components, design tokens, and spacing grids ready for engineering handoff.
- Aesthetic Visual Comfort: Curating high-contrast dark themes suitable for extended ambient listening without visual fatigue.
Project Galery
A glimpse into the project
Eksplorasi Lengkap di Figma
Lihat seluruh canvas rancangan UI/UX, grid system, varian komponen, dan prototipe interaktif secara langsung di Figma.
Buka File Desain di Figma