Access Code UI

Spatial Onboarding Experience

Designing an augmented reality access interface that allows users to unlock physical spaces through spatial UI interactions and access codes.

Context

Atmos was developing a WebXR headset designed to support immersive interactions with physical environments. As part of a smart-home demonstration scenario, the team explored how users could interact with real-world devices through augmented reality.

One of the concepts involved allowing users to unlock doors using access codes displayed directly in AR.

Problem

Traditional smart-home interfaces rely on mobile apps or physical keypads. For an immersive XR system, the interaction needed to happen directly within the user's field of view, while remaining clear and intuitive.

The challenge was to design an AR interface that could:

Guide the user through the access process.
Clearly communicate authentication feedback.
Remain readable and comfortable in spatial environments.

My Role

As WebXR Designer/Developer I:

Iterated on an initial interaction concept created by a teammate.
Designed the UI layout and interaction sequence.
Created high-fidelity mockups for the AR interface.
Ensured visual consistency with the existing Atmos UI design system.

Key Design Decisions

1. Design a clear authentication sequence

The interface communicates each stage of the interaction:

Entering the access code.
Validating the code.
Granting or denying access.

2. Optimise readability in AR environments

The interface layout and typography were designed to remain readable while floating within a real-world scene.

3. Maintain visual consistency across the platform

The UI follows the same visual language used across other Atmos interfaces, ensuring a coherent user experience.

Outcome

The resulting interface provided a clear spatial interaction for unlocking doors through AR, demonstrating how immersive interfaces could replace traditional control surfaces for smart-home environments.