From Flat To Spatial
Problem: How does one think about design in a three-dimensional space?
Assignment
Set up a prototyping spatial environment using the Bezel, Figma, and other tools introduced in the course with a focus on the VisionOS interface.
My Concept
I delved into a proof of concept envisioning an XR headset experience that guides people with physical disabilities through their own home-based physical therapy. The potential impact of this technology is enormous in the rehabilitation space.
Tools Used In This Lesson
Figma - for designing my user interface elements using Apples’s Vision Pro figma toolkit.
Bezel - for quick spatial prototyping.
Skybox AI - for generating a 360° 3D environment from my prompt.
My Process
Visual designs move differently once you put on a headset and start exploring them. One of my main UI takeaways from this class is that it’s a better experience to “invite” your user to play with the environment than to “tell them.” This way of thinking is far different from the CTA’s on websites I use every day in my day job as a UX designer. Surprise and delight is more…delightful.
Our first assignment was to learn a spatial computing rapid prototyping tool called Bezel and create an environment with it. My creation is in this first video.
Creating My Concept in Bezel
I sketched out my idea, found Apple’s initial VisionOS design kit for Figma, and got to work on design. Pulling rough 3D models helped flesh out the concept. The 3D person is meant to be an customizable avatar that would do the workout with the user, providing another form of feedback. Progress! Check out the video below.
If you want to interact with this environment yourself, click here to open the file in Bezel. Click and drag to move around the space. And be sure to click on the wheelchair to trigger the animation.
3D models were pulled from existing online assets. There is a lack of 3D models of people with physical disabilities, so I found a wheelchair and a sitting person, and placed them together.
Below show my file screenshots using Figma and Bezel.
Learnings & Reflection
One outstanding question I have for our group during our next class:
How is VisionOS’s interface accessible with the glass texture background? Much to learn.
Refinement of Concept
(Post-Assignment):
I had the fortune of having this assignment selected for review! Bezel’s Daniel Marqusee feedback to me included refining the panel animation to ensure the visual heirarchy is maintained on the panel in focus. Maybe dimming the panels or darkening the panels could be a solve. He thought the animated interface was effective. He also appreciated the concept.
Something else I wanted to try was to use Skybox AI to create a 360° environment. I should have saved the AI prompt I wrote to create this environment—will do next time. It was something like “create an interior meditation space using natural materials and plants. A calm nature scene is seen through the windows.”
Below is my refinement.
If I had more time, I’d play more with how the skybox image works to make it look more seamless. But this is an improvement from my first iteration.
Want to play with the prototype? Prototype here. The wheelchair is the trigger for the animation.
