<- 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
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.
Design Process
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. Initial block editor was static panel which limited the user's movement and quite inefficient to use. I introduced palm editor that user can easily use by holding up hand.

Block editor has gone through numerous design iteration based on our weekly playtesting feedback. The final design accounted for considerations including hand tracking accuracy and user intuitiveness.

Development
Leveraging Meta's Interaction SDK, I developed a palm-up editor interface with poke, pinch, and swipe detection. I overcame challenges of limited hand-tracking accuracy and stability by introducing easing and delays into gesture detection, and iterated with UI scale and spacing to enhance the best user experience.
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.
Design Process
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%.

Development
TV Bot Menu
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.
Design
Interaction Development
Street View Entry and Locomotion Prototype
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 Entry & Locomotion Design and Iteration
Street View Locomotion Prototype
Wrist Watch Prototype
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 Prototype
Game 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 Design
Development