How to Prototype VR Designs Without Code
With every week that passes I get more and more excited about the possibilities new innovations in virtual reality (VR) provide. At the same time, what we really need now are use cases — cases where VR makes sense and provides value. During my time as a creative resident at Adobe, I had the opportunity to work on a project related to “the future of work.” I was tasked with thinking about what work will look like in the future, specifically in the next 5–10 years.
My key takeaway: when looking at the way we work and will work in the future, there is a lot of potential to use VR for certain tasks. This became increasingly obvious in the months since the COVID-19 pandemic began and the lockdown took place in most countries. We are living now in a world where remote work is officially here, bringing tons of advantages (and potential disadvantages) with it.
I wanted to understand the main pain points of remote work to find good use cases for VR. After my initial research, I came up with these main pain-points:
- It can be difficult to concentrate when working from home.
- There can be many distractions during work.
- It can be difficult not having a dedicated workspace.
- It can be difficult to collaborate on projects.
- It can be difficult to do remote workshops.
- It can be difficult to have ideation sessions online.
What became clear after the research is that people have problems with concentration; it’s difficult for many people to focus in places they don’t call their usual workspace. Secondly, people need better ways to collaborate, especially during workshops, ideation sessions, or even normal meetings.
The best way to integrate VR into our workflows is to use it for these two areas. This means only using VR for specific dedicated tasks, but not throughout the whole workday. I am convinced that the future of work will be all about collaboration and concentration! So I got to work prototyping a VR prototype that would enable just that.
The power of prototyping for VR ideation
In this post, I will guide you through my project and how I prototyped this project. I am a designer, not a developer. My goal is always to come up with a great solution, a great design that I can test, and to build a prototype without coding something myself.
Prototyping was extremely important in this project. It helped to validate ideas quickly, do user testing, and adjust the design. Starting a virtual reality project means using the right methods and tools which helped to design the experience. Here are my three quick tips on how to get started in VR by using the right tools and methods.
3 tips for designing in VR
The best recommendation for all digital designs is probably: Try it out! You shouldn’t design for VR without building a prototype that can be tried in a headset itself.
1. Start with pen and paper
Virtual reality is just the medium, and regardless of whatever medium, you should always make sure to start with the product design basics:
- Who am I designing for?
- What is the problem I am trying to solve?
- Where and what context will this be used in?
- Why are we doing this?
Think about the goals you want the user to achieve and perhaps even formulate a little elevator pitch for your experience.
Describe the scenes needed as a storyboard and scribble up some possible assets and UI alternatives. There are also grid templates available that can help you draw up a scene as a 360° panorama.
2. Asset creation
After finishing the sketches, you can head right into Adobe XD where you can create the assets for your design. Start by creating different artboards for different scenes. The design process for VR is very similar to the usual process for digital designs for apps and websites; but, what is very important to keep in mind is that the navigation is a key element of this experience.
For the topic of my VR prototype, collaboration and concentration, I focused on different elements that you can move around in a virtual space, allowing you to personalize your whole workspace. For the concentration workspace, the idea was that the user can change it to meet their needs with all necessary information and tools. For example, that might be notes from a meeting, sketches or even first design ideas.
To do this, I created a curved virtual working space in front of the user at a 90° angle. It was super important for me to test whether this angle actually worked, presenting the right amount of information without overwhelming the user.
3. Prototyping your VR experience with the Draft XR plugin
Draft XR is a free plugin for Adobe XD that allows you to create a realistic VR prototype, and it was an immense help during this project. Using it, you can quickly test your ideas and iterate on your designs.
Prototyping with VR tools requires some basic coding skills and takes much more time. The most valuable thing you can do, as a designer prototyping VR experiences, is to be able to put a VR headset on and test your designs out, right in Adobe XD.
For designers, VR is a game-changer
For us designers, it’s important to keep up to date, experiment with tools, and prototype our ideas to be able to consult the client in the best way and come up with the best solutions for the problems the future will throw at us. The new dimension and immersiveness of VR opens up so many new ways to design experiences.
I think it’s super important to stress that ideating does not require any fancy tools or coding skills. Prototyping and being able to test your ideas early in the process with real users is incredibly valuable. My forever favorite quote, from Tom and David Kelley, says it best, “If a picture is worth 1000 words, a prototype is worth 1000 meetings.”
Patricia Reiners is a freelance Innovation Designer based in Berlin. She is focussing on web 3 and XR technologies.
Want to receive some fantastic freebies and be the first to know about new resources, including classes and bonus content? Sign up for her free UX newsletter here.
👉 Follow her journey on Instagram and Twitter!
Read my full case study of working with the Draft XR plugin in Adobe XD.
Visit XD Ideas for more unique insights and authentic points of view on the practice, business and impact of design.
Join a free Daily Creative Challenge to sharpen you UI/UX design skills
Learn about Adobe XD, the powerful platform where teams collaborate to create designs for websites, mobile apps, voice interfaces and more.
Originally published at https://xd.adobe.com.
