Visitors fold an origami hummingbird, scan an installation and bring Kio to life through AR on their phones. I designed the on-screen experience during my practicum with NGX Interactive.
Role
UI / Interaction Design
Team
NGX Interactive
Timeline
Feb — Apr 2026
Status
Live at Oakridge Park
Kio’s Wall on location at Oakridge Park.
01 · Overview
A physical story brought to life on a phone
Kio’s Wall is an immersive augmented-reality installation at Oakridge Park in Vancouver. It combines physical installation design, tactile origami and mobile AR.
Visitors fold an origami hummingbird, scan the installation and meet Kio through the camera. They can change the bird’s colours, pose with it, capture photographs and share the result.
Experience sequence
Fold an origami hummingbird
Scan the physical installation
Activate Kio in the camera
Change colours and interact
Switch to selfie mode
Capture and share
Project type
Practicum project
Browser-based AR
Public-space installation
Shipped in 2026
02 · The brief
Design inside an established system
I joined after the core concept, journey and some client screens had already been established. My responsibility was to complete the interface while respecting the approved flow, Oakridge Park’s brand guidelines, the selected art direction, browser-based AR requirements and the physical environment.
The interface had to remain clear over unpredictable camera backgrounds in a bright, busy public space—and work for visitors of different ages, including people with no previous AR experience.
Scope: the broader concept, initial flow and final direction were collaborative team work. My contribution focused specifically on UI and interaction design, with guidance from the project designer.
03 · Interface states
Six states, one simple public journey
01
Landing
Align and scan the QR code to activate Kio.
Adapted02
Details
Enter a name and email before continuing.
Adapted03
Confirmed
Confirm successful submission and continue.
Designed04
Decline
Return to camera and reopen details later.
Designed05
Photo mode
Pose with Kio inside an Oakridge-branded frame.
Designed · Priority06
End state
Keep the camera open with a simple thank-you.
Designed
04 · My role
Honestly scoped contribution
Designed the remaining AR interface screens from the established flow
Explored visual directions and refined the selected approach
Prepared interface assets and documentation for development
Supported product testing with the NGX Interactive team
Iterated through feedback from the project designer
05 · Process
From rigid geometry to natural movement
I studied the existing journey and Oakridge brand system, then explored how its shapes, colours, typography and line work could translate into a camera experience.
Two directions emerged: a lighter, simpler treatment and a darker direction with stronger shapes and contrast. The dark-green direction won because it remained visible over a live camera feed while supporting Oakridge’s premium identity.
Through review, rigid geometry softened into flowing forms that carried through onboarding, the details form, camera controls and photo mode.
Design principles
Strong contrast over live video
Short instructions and clear actions
One primary task per state
Brand framing without covering Kio
Minimal controls for first-time AR users
01 · Align the QR code02 · Enter visitor details03 · Compose and capture
06 · Final design
Scan, interact, capture and share
The final flow moves from activation to a camera experience without unnecessary branches. Dark-green surfaces protect legibility, while the Oakridge logo, gold line work and hummingbird symbol connect the mobile interface to the physical installation.
Launch flow: load, allow the camera, scan and enter details.Camera flow: interact, switch to selfie mode, capture and share.
07 · Outcome
A city-scale AR installation, live in 2026
Kio’s Wall opened at Oakridge Park as a public augmented-reality installation. It was my first shipped project combining digital interaction design, augmented reality, physical installation and public-space experience design.
The project designer completed the final refinements before launch.
