Scenery UI
Event and Animation System
Scenery is an iOS app that enables users to build AR/VR and Spatial Computing experiences.
I worked alongside the lead developer and designer to research, prototype, user test, file Git versions, build icons and interactions. This case study focuses specifically on the Event and Animation System in Scenery.
The experience was open to all and was launched on the 27.11.2023. It was the fourth experience launched following the campaigns in New York, Munich, Hamburg and Frankfurt.
Industry
Culture, Art, Tech
My Role
Wireframing, Concept,
Visual and
Web Design
Team
Designer, Developer
Timeline
Q4 2023
Tools
Problem
How do you build a smooth UI workflow for event and animations for an XR application?
Events and Animation systems are an integral part of build interactive Augmented Reality and Virtual Reality experiences.
We were iterating how to build a smooth workflow for event hierarchy's and animations into Scenery. To investigate this, I collaborated with the designer to research how existing XR tools have integrated these systems. We then considered the features we had worked with as designers in other 3D tools such as Spline, Blender.
Scenery App Icon for Apple Vision Pro
Context
Bringing monuments to life.
Explore the different UI workflows that exist for Event hierarchy and Animation systems. These systems exist in 3D tools, AR tools, Video Editing.
The developer and founder shared key features we were looking to integrate — Triggers and Actions for events, Timing curve for Animation.
Market Research and Insights
Accessible, responsive, and embedded information.
We researched the systems in tools like Blender, Spline, Spark AR, Adobe Aero, and Reality Composer Pro.
Understanding common ways other apps enable users to an events and animation systems gave us an understanding of common feature patterns.
Scenery App Icon for Apple Vision Pro
Ideation
Accessible, responsive, and embedded information.
We ideated based on key value we wanted to provide to the user, the interaction features, the types of triggers and ease motions and simplicity of usage.
Typeface and Colour Palette.
User Interaction Elements
Responsive and fast loading website using Framer.
Since I had 10 days to deliver the project, I worked on some quick wireframes using Figma, to identify the key UI elements.
Then I built the website using Framer.
User Interaction Elements
User Interaction Elements
Solution
Medium Fidelity Explorations
Since we were a small team working directly with the developer, we would iterate and ship without any low fidelity prototyping.
This was to ship and test the app as we were building it.
Wireframes in Figma
Interactive UI elements to make the information visually engaging.
Interactive Elements
I incorporated several interactive features to enhance user engagement. Animated transitions between sections
Interactive map showcasing AR experience locations
Hover effects on clickable elements for improved usability
Key Features
Interactive map of AR experience locations
QR code generator for easy access to AR experiences
Artist and sponsor profile galleries
Embedded video previews of AR experiences
Social media integration for sharing
Video overview of the live website
Scenery App Icon for Apple Vision Pro
User Feedback
Collected from Early Test Flight Users on Discord.
Increased interest and engagement with the AR experiences. The launch was easy to circulate and featured in several press releases.
Successful launch event with high attendance attributed to clear website information.
