I joined an XR design competition
Introduction and context
In my previous project, I did a very basic Unity prototype for reimagining interior design for XR. I wanted to further develop my ability to bring my ideas to life so I decided to join the XR Design Competition. The theme is diegetic design/natural affordances. Diegetic means “part of your world” so the idea is to design something that integrates or merges the UI of an application with the world the user occupies.
What was submitted
As I had to do this project on nights and weekends and we only had the month of June to do it, I wanted to do something simpler and more manageable.
So I looked within my daily life for inspiration and decided to do a Pomodoro timer. The Pomodoro technique allows you to focus by having you do work in cycles of 25 minutes focus and 5 minutes break. I use this technique daily and wanted to reimagine it for XR. Heres what I did:
How I got here
Initial version and critique
Initially I wanted to have the core natural affordance be the tomato kitchen timer. It is the object that comes to mind when people think of the pomodoro technique. However, I could not envision how to implement the twisting motion accurately in Unity. Therefore, by process of elimination I decided to use the hourglass to symbolise the passage of time instead.
I designed it naively on Figma and Bezi and then imported it Unity to continue. I prepped a simple prototype that had most of the key functionality:
- Flipping the hourglass to start the timer
- Dimming lights and playing soothing music while you work on your desktop to help you get in the zone
- Flipping back to pause
I sent it for critique, and here’s the main pieces of feedback:
- The hourglass attracted too much attention. Although the user can place it wherever they want, it’s big size detracts away from the main screen
- To look at the time the user would have to turn their head
- Rotating it can be more ergonomic. As it follows my hand movement 1:1, I have to flip it halfway and then flip it the rest of the way to make it completely upside down.
Design improvements after the critique
First, I decided to have the hourglass be minimised and docked to the top instead of being placed anywhere like in the first version. I also show the time upfront since that’s the most pertinent information needed.
The hourglass flipping interaction is something I wanted to keep so the top area is now the designated hot zone that people can look at to activate. Once activated, the user can just grab it like they’re using the force (aka a “distance grab”) from their position and flip the hourglass from there.
I wanted to incorporate the key time related actions a user can take into flipping the hourglass. This meant including: starting, pausing and resetting the timer. Flipping to start and flipping back to reset matches real life quite well, but what about pausing? It may not be obvious, but when you place an hour glass horizontally, the sand no longer falls from top to bottom anymore.
To make the flipping/rotating the hourglass more ergonomic, I increased the range for each action, splitting the full 180 rotation into 3 buckets for each action. This means the action triggered is based on which bucket the rotation falls into:
- Flipping it back to original position (0 to 60 degrees): Resets the timer
- Flipping it to be horizontal (60 to 120 degrees): Pauses the timer
- Flipping it upside down (120 to 180 degrees): Starts the timer
Of course there is a label shown in front to signify which bucket the user currently is in.
Future ideas
As this is a prototype, it’s far from perfect. Here are some ideas to push this concept further:
Setting the time
Right now the prototype only defaults to a 25 minute Pomodoro session. If we keep the hourglass idea, we could potentially have a small and medium size hourglass shown to the user at the start. The small one could be the standard 25 minutes while the large one could be a longer 45 minutes.
Another approach would be to use a dial instead of an hourglass. This means the user could turn the dial to set the time. The dial would then turn back to signify the passage of time.
Music controls and customisation
We could have controls to mute and unmute the music plus potentially have the option for users to customise what music is played. This is why in the original splash screen, there is a button for settings. That’s where all of these customisation functionality could be housed.
Augments
Finally, Meta announced Augments in 2023’s Meta Connect event. They are persistent digital objects the user can put throughout their house. However, it has not been shipped yet. If it does come out, this pomodoro timer would be a perfect candidate for this. The hourglass can be placed at the user’s desk or wherever they normally do their work at. The user would just pick it up and flip to start the whole interaction. When done, they could flip it back to reset and leave it on their desk.
Learnings
Unity and closing the skill gap with AI tools
While working on this project, I’ve learnt and practiced how to bring my ideas to life using tools like Unity, Bezi and ShapesXR. To me, a big part of design is how things work, and currently to test out how the interaction feels, the prototype needs be on Unity. Unity has a learning curve and knowing how to code is very beneficial for this. To close this skill gap, AI tools like ChatGPT and Perplexity can be used to generate code for this. However, the code may not work and the ability to debug and think logically would then come into play.
Ideal workflow
Going through this process I managed to find out the rough ideal workflow for me. I would sketch out my ideas on pen and paper, then make some UI panels on Figma and source for 3D models as needed. Then, I would bring all of these into Bezi or ShapesXR to see how things look in space. Once ready, I would import from those tools into Unity to continue with implementing the detailed interactions.
One small benefit I noticed was that Bezi imports their assets as a prefab into Unity. This means if you wanted to sync the latest changes from Bezi to Unity, your previous Unity work would still be maintained. ShapesXR does not do this. Imagine my surprise when all my Unity work disappeared once I synced the latest changes from ShapesXR 😅
Conclusion
Overall, this XR design competition was great as it gave me a platform to polish my skills while also getting feedback from industry professionals. I remember a previous mentor mentioned to me that such feedback is gold so that was important for me.
Personally while doing this project, I felt like I hit a wall in terms of ability to bring my ideas to life. This wall is due to my lack of 3D modelling skills. That would be the next mountain to climb.
In the meantime, all the best to everyone working on their craft, and thanks for reading!
Update: Did a small iteration on FocusTime 🚀
Iterated on a few key things based on personal learning goals as well as some of the feedback received.
- Wanted to learn some Blender to do simple 3D modelling and animations and thus added focus and break time animations
- Received feedback that it was unclear how much to rotate to switch between continue, pause and reset states. Therefore redesigned the indicator to be more like a speedometer to indicate how much to rotate
- Fixed minor bugs and added polish that would be utility features in future XR projects such as enabling the system recentering behaviour, hover states and using Tweening for animations.
Cheers!
