<- Back

Neon City

VR City Building Sandbox Toy
Skills
Unity, C#, Figma, Maya
Role
Interaction Lead (Design & Engineering)
Timeline
Aug 2022 - May 2023
Overview
‍Neon City is a VR City Building Sandbox Toy. In this experience, players embark on a playful and meaningful experience of building a digital city for millions of lost AI citizens.
My Contribution
As the interaction lead, I oversaw the design, prototyping, and implementation of all hand-based interactions and unique spatial gameplay features. My work on Neon City demonstrates my multidisciplinary background in art, engineering, and user-centric design thinking. I utilized a wide range of tools to effectively communicate ideas and iterate quickly, including Unity C#, Figma for interactive prototypes, and Maya for modeling.

For each interaction concept, I conducted numerous iterations based on weekly user playtesting and feedback sessions with industry professionals at USC. I collaborated closely with the game director to ideate and develop robust interaction concepts through working prototypes and concept visuals. Additionally, I worked with designers and engineers to ensure seamless communication and feature integration. I've included a glimpse of some of my work below, but feel free to take a look at our game design document for more details!

Neon City was recognized as the top game project at USC in 2023, and it was presented to major game industry leaders and university boards across Southern California.
Team
About 26 USC undergraduate and graduate students
Game Design DocDemo WebsiteDownload Link
Gameplay Overview
Feature - Block Editor
Overview
Block editor is the user's primary tool that allows users to modify block's size, type, and place it into the design table.
Block Editor Design
The goal of the block editor design is to enhance hand-tracking interaction into gameplay and make block interaction more interesting and intuitive to users. Block editor is one of the features that has gone through the most number of iterations as well as experimentation with different gesture interaction.
‍
Block Editor Prototype / Process
I prototyped and implemented multiple iterations of the block editor, evolving it from a static UI to a dynamic palm-up editor. Leveraging Meta's Interaction SDK, I developed a seamless palm-up interface with poke, pinch, and swipe detection. Given the inherent challenges of hand-tracking, such as limited accuracy and instability, it was essential to iterate and devise solutions to stabilize palm-up gestures and manage multiple gesture collisions effectively.
‍
Feature - Tutorial Sequence
Overview
Neon City's tutorial includes unique hand-gesture tutorial and gameplay tutorial that allows users' smooth adaptation to gesture commands and interaction features.
Tutorial Sequence
While VR-familiar users quickly adapted to the interaction and gameplay features, new VR users often experienced confusion and difficulty due to their unfamiliarity with hand-tracking. Additionally, as this was the first launch of Meta's hand-tracking support via their SDK, specific constraints on each hand gesture further complicated the user experience. To address these challenges, I introduced a dedicated gesture tutorial that guided users through the necessary hand gestures.

For the gameplay tutorial, extensive playtesting revealed the importance of focusing on one concept at a time. I minimized distractions by disabling unnecessary features beyond the current prompt and incorporated ample visual cues to facilitate smooth user guidance. This approach reduced the time users spent completing the core gameplay tutorial by 80%.

‍
Tutorial Sequence Prototype / Process
Feature - TV Bot
Overview
TV Bot is a interactive UI module that guides users through city building process by reflecting user progress and district states. User can navigate through tabs to view their achievements as well as learn more about the building rules and tips to help understanding game rules.
TV Bot Interactive Menu
TV Bot Prototype
Feature - Street View and Locomotion
Overview
Avatar represents user's own position and rotation within the design table that affects user's 1:1 scale street view.
I experimented with the most seamless way for users to manipulate their view with the use of Avatar as well as other ways to effectively navigate inside street view.
Street View Design

‍
Street View Locomotion Prototype

‍
Feature - Wrist Watch
Overview
The Wrist Watch is an experimental micro-interaction feature designed to connect users with the city and its citizens. While it was only developed to the prototyping stage before the Beta launch, it remains a key feature for the next phase of Neon City
Wrist Watch
Feature - Settings
Overview
Settings page triggered on secondary hand pinch (Quest default in-app menu command) allows users to modify additional gameplay setting such as volume and subtitles.
Game Settings
Game Settings Implementation
LinkedinResume Email