Festive Decoration XR App Prototype

This is a school project from the Design of User Interfaces for VR course at MUNI. My task was to design a prototype of a simple application in VR. Let me take you through the design process.

At first, my ideas about the school mini XR app were more serious, like how to catch up with the news during mornin’ toothbrush routine or how could the extended reality help me build a fkn IKEA wardrobe. But the Christmas season was creeping up, and I could imagine non-XR realisation of previous problems without any problem. So, I ended up with the following question:

How might we decorate our homes (or any other place) with all the deco and lights and everything we wish for, just without being judged as too much and without tons of plastic junk?

It seemed like fun to make, and I couldn’t imagine the solution without the immersion provided by XR.

I like light decorations — a lot — all different types. Bulbs on the rope, small sparkling presents, pineapples, you name it. But, the wires get all tangled, and then it is out of the batteries, or you are too far from the socket. Moreover, it costs money, and the cheaper it is, the more I feel it will set something on fire.

So, imagine being able to turn on the mood without the wire/batteries/fire hassle and then turning it off or changing it whenever you feel like it. It should work as augmented reality in some futuristic glasses. But the best experience would be to immerse in the VR, just with a much better see-through option (that you see your surroundings in the glasses) than my Oculus has (where everything looks like a creepy horror movie).

Design Process

Moodboard

I took inspiration from various home design apps and interfaces for painting and easy graphics.

Ideation

I made a lazy Crazy 8, made three fast ideas, and further elaborated one into the storyboard to better imagine a user’s path. Next time, I would focus more on demonstrating the use of the app in the storyboard, which would help me understand the steps I need to prototype.

Prototyping in Shapes XR

I developed the low-fidelity prototype in a preset environment provided by ShapesXR. It allowed me to create in 3D without coding skills and focus on the process and the interactions.

👌 Moreover, ShapesXR has a handful of tutorials that helped me to onboard and start to create easily → https://learn.shapesxr.com/

When I became familiar with the Shapes environment, I made a timeline of the user journey in prototype and started creating the in Shapes.

Menu

I uploaded my menu sketch to the space to have it at hand and started creating the menu.

The main option from the menu is a shape picker. I leave out the colour picker due to the scope of the project.

Besides the main functions, every page of the menu has to consist of ❎ a close button, ↩️ a back button if any action has already been done, 🚪 an exit option, ⚙️ and a settings button. I wanted to use tooltips, but I used just elementary symbols that are well-known from the “real” world. So I decided to keep it without tooltips while it is so simple.

Users can use the menu directly with their hands, without the need for controllers. They can also place the menu in front of them and use one hand for decorating while keeping their other hand free.

❓One question remains: should I change the menu layout based on the hand dominance of the user?

It was fun to think about options I could give to users. For example:

• There could be different options for decoration attachment, like simply putting the object or swooshing it to the wall like Spiderman.
• Offer preset colour palettes for various occasions.
• Use AI to generate decoration.
• Users could save places for the next season, and so on.

But due to time, I stayed with the super basic prototype, even without shades.

In the prototype, the user goes through several steps. For each step, I used a different “stage” in ShapesXR. A stage is like a screen in a presentation, but in 3D, it displays everything in that particular stage + background. By switching between stages, you can simulate changes in the UI and user interactions. There’s also a background stage — whatever is put in the “background” appears in all “foreground” stages. I placed the menu panel in the background stage to make it visible in all the prototype steps.

I added interactions to launch different stages (like in Figma, you can add interaction to a particular object).

When you hover over the ornament, it changes colour, and if you click it, it will create the prototype of an editable clone that you can place somewhere in the flat.

The whole pass through the prototype looks like this:

When you pick the ornament, you can move it around the flat. The square around the clone changes colour to green when it comes near a surface, so you can place the object and add more.

Do not hesitate to visit my prototype in Shapes: Adx5w874

❤️ Thanks to Markéta and Vojta for their support and a great course.