Our XR Design Journey: Challenges and Discoveries

24th of August 2023 ✍️ by Rebecca Somaya Bakkejord

Hello, fellow XR explorers!🚀

I'm Rebecca, an XR designer at Fynd Reality. Lately, my team and I have been on a journey to enhance the user interface of Fynd CORE, our platform. We've had our fair share of ups and downs, but these experiences have taught us so much! We would now like to share some of our knowledge with you.

Designing for VR: Navigating Challenges for User Comfort and Clarity

Our journey initially started with designing for PCs, which was the logical choice due to our familiarity with it. However, when we expanded to VR, we had some challenges. It felt like trying to fit a square peg into a round hole – so not good.

Here are some of the things we've learned:

💡Comfort is key: especially for newcomers. In VR, dealing with a limited field of view, physical constraints, and motion sickness, can be daunting. And let's be honest, these challenges might stick around for a while. In the meantime, there are some things we can do to make it more comfortable.

🚀Keep it simple, stupid!: We try to keep information and elements as simple as possible, only showing what is important. Visual information is placed where you can see it comfortably, over extended periods (our 3D Tablet in VR for Main Menus for example). We place interactive elements in areas where interaction is relaxed (our Quick Menu, context menu, and 3D world objects). Our first iteration with the PC menu had too much information all at once, which was quite overwhelming in VR.

🚀The size of interactable elements (such as buttons) will depend on the input method. Head tracking, eye tracking, hand tracking, controllers, touch controls, or computer mouse, will all have different levels of accuracy, which means the less accurate the bigger the buttons should be.

🚀Font sizes and elements should be appropriate for legibility on each platform and technology. Semi-bold and Bold sans-serif fonts work great in VR. Line length should be around 20-40 symbols max per line in VR. With bigger fonts, it should be even shorter.

Make sure to put text on a surface like a UI element with a background, plane, or different mesh. Text floating on no surface is slightly less readable. The user's eyes can converge on the text and diverge on the background giving them double vision. Set labels to always face the user to make sure they can see them.

🚀Dark mode ftw!: VR headsets still have low resolution, making it difficult to make out details. Very bright lights can also result in sensory strain on the eyes. Light-on-dark graphic modes, aka. Dark Mode gives increased visual comfort and makes graphics such as fonts and icons look much sharper.

Our Quick Menu and Keyboard in VR


Elevating the Main Menu: Transitioning from Unity UI to Web UI

Initially, we used Unity UI as the foundation for our main menus. It was the logical choice, given unity's familiarity and integration benefits. However, Unity UI had limitations in performance and scalability. Our main menus were getting bigger, and more complex, and needed to adapt to various XR devices. Keeping it all together was becoming a challenge.

🚀So we decided to transition to Web UI, powered by 3D WebView, a web browser plugin for Unity. This approach brought flexibility, scalability, and customization options, enhancing performance and accessibility.

We teamed up with web designers to bring our vision to life. With this change, we could finally create UI that not only met the demands of complexity, but also excelled in terms of performance, scalability, and more importantly (to me as a creative designer at least) visual appeal.

Despite the challenges with Unity UI, we still use it for simpler menu systems, like our Quick Menu. Unity UI is the way to go when we want to create menus that are closely linked to our Fynd CORE XR experience (especially in VR).

The new vs the old: Login and Session Menu UI on PC


Design Chaos: The Early Days Without a Style Guide

In the beginning, the absence of a style guide left our UI designs scattered and inconsistent. Recognizing the need for a more cohesive approach, we decided to give Figma a try. I can't speak for everyone, but I love it! I find Figma to be highly structured and easy to use. Sharing the designs with the rest of the team is easy.

Figma: The birthplace of our XR Menus

In Figma, our XR menus come to life. This is where we craft each button, icon, and layout before passing them on to our web developers. Figma's simplicity and its collaboration-friendly features are an ideal match for our design team.

Guided by a Style Guide

Within Figma, we've established a comprehensive style guide. This guide is our North Star, guiding us in ensuring consistency and coherence along every aspect of our UI design. From color palettes to typography, our style guide keeps our menus aligned with our vision of simplicity, intuitiveness, recognizability, and creativity.

This ensures that our XR experiences, while immersive, remain friendly and familiar. Icons, buttons, and interactions are designed to be easy to use, so your XR journey feels comfortable and recognizable, across all devices.

A screenshot from Figma showing A list on the right side with: Logos, Icons, 01-Typography, 02-Elevation, 03-Buttons, 04-Colors, 05-Radio toggle and switches, 06-Sliders and progress bars, 07-Input fields, 08-Tooltips, 09-Navigation, 10-List items, 11-Dropdowns, 12-Modal/Dialogue windows, 13-Warning and Error messages, 14-Avatar selection, 15-Table tool. In the window next to the list there is a module of number 10-List items.
Our styleguide is ordered into chapters. Each chapter a guide for different elements within the design and how to use them.
A screenshot from Figma showing how we structured our Login Menu. There is a bar on the left side showing the pages which are seperated into PC, VR, Mobile and concepts. The window on the right is showing the Login menus for PC.
Screenshot from our Login Concepts in Figma. On the side you can see we have a separate page for each device.
A dymamic GIF showing a Figma prototype of our main menus for VR. The menus are seperated into: Home (here you see your avatar and the user list), tools (with a textbox tool), Object library (with different categories, the one in the gif is behicles), Enviornments (a grid with image buttons of different environments), The scenario player (showing an image grid of different scenarios you can play through), A sharing menu (for sharing files), A settings menu (with general settings, sound settings, language settings and credits), the last one is the exit menu, where you can choose to leave the session, swith app, log out or close the application.
A prototype in figma for the VR meny that will be on a tablet in VR
A screenshot from Figma showing all our icons.
We make our own icons! Here is an overview of our Icons in Figma


Prototyping for XR: Bringing Menus to Life

When it comes to menu prototyping, we rely on Figma for main menus and Unity's Interaction Toolkit, or VR Interaction Framework, for quick, in-context testing. Here's why we recommend designers to dive into Unity:

👍 Seamless Collaboration Understanding Unity as a designer allows us to speak the same language as our developers, enhancing communication between our design and development departments. The shared understanding results in smoother development and ensures that our creative visions come to life more seamlessly, with let's face it, less arguing.

👍 Rapid prototyping If you learn to use unity as a designer it empowers you to create interactive prototypes swiftly, by yourself! Are you sick of not being able to test out your designs because the developers are ALWAYS busy? No more! Testing concepts early will ensure that they are not just visually appealing but also functionally robust before development kicks in.

We also use third-party platforms for prototyping:

🚀 Boost Productivity: These platforms offer time-saving solutions, so we can focus on the art of XR design rather than reinventing the wheel.

👍 Community and Collaboration: They introduced us to a lively XR community, like joining a busy marketplace of ideas.

👍 Simple prototyping: Easier and faster to set up than Unity's interaction toolkit. These platforms make it easy to quickly set up our XR designs for testing.

💡 Testing Ideas: Creative prototyping allows us to experiment without making permanent decisions.

I'm enjoying Figma, but I am curious to test out ProtoPie for more prototyping options. Figma is great for structure, but a bit limiting when it comes to prototyping. However, Figma has a great community with people creating add-ons that make it possible to do more.

We are excited about the future of prototyping. Unity will soon launch its AI tool Unity Muse. It will probably revolutionize the way we work as designers, giving us amazing options to see our designs come to life, without having to learn too much coding.

A GIF of an immersive VR experience demonstrating the prototyping of nametags. Within a futuristic space environment, an astronaut robot avatar is showcased. A "Next" button operated by a laser pointer guides the user through various nametag designs displayed above the astronaut's head
Here I was testing different name-tag concepts in Unity. Seeing how readable they were and showing them to the rest of the team in VR so we could discuss after.
A dynamic GIF presenting a conceptual 3D whiteboard within a virtual space. The whiteboard is equipped with user interface elements, including interactive buttons for toggling between a whiteboard and a blackboard background. Additionally, for PC users, there is an option to expand the whiteboard to full-screen mode, enhancing the immersive experience of virtual collaboration.
Future whiteboard concept made in figma
A dynamic GIF featuring a virtual sticky note within a digital environment. Surrounding the sticky note are user interface buttons for interaction. The sticky note itself displays dynamic text being written, illustrating the process of adding and editing notes in a virtual space.
Here I am testing the font-size and the limit for a sticky note concept, in Unity.
A dynamic GIF capturing a person in a virtual environment as they place a sticky note onto a digital whiteboard. The action showcases the seamless interaction of adding notes to a virtual whiteboard, enhancing collaboration and organization in the virtual space.
Here I am using VR framework package in Unity. I am testing the size of the sticky note on the whiteboard and how readable it is in VR.
A dynamic gif showcasing a conceptual 3D login screen in a virtual reality environment.
There are also some VR plugins for Figma. Here I was testing DraftXR
A dynamic GIF illustrating a virtual reality sharing concept. In a VR environment, the user selects a file and utilizes an eyedropper tool to seamlessly transfer and display the chosen content onto a virtual screen. Here they are sharing a google docs presentation which automatically adds two buttons for navigation on the screen.
Testing a concept we had for sharing content to screens in VR


The more gaming the better!

💡Games are the best source for inspiration, practical knowledge, and a deeper understanding of what makes virtual experiences engaging and enjoyable. There is a lot of knowledge in the game industry that can be applied to the world of XR. However, we must tread carefully, keeping in mind that the majority of our users aren't gamers. Balancing the excitement of gaming elements with accessibility and user-friendliness is important.

What's next?

Our next step? We're going all-in on improving the user experience. We will create custom-made onboarding for each device. Taking into consideration their different advantages, strengths, and weaknesses. And to make life even easier for everyone, we're building a knowledge base full of guides. In addition, we will continue working on our Scenario Builder, which you can read about in another blog post.

So, join us on this XR voyage, where simplicity, recognizability, and creativity are the guiding lights. We will continue to share our journey with you in future posts, stay tuned! 🌟🚀🌎