Design for XR — Part 5: NoCode Tools

Apple’s RealityPro AR/VR headset is coming next week, here’s how to Design for XR and get ready for Spatial Design using the latest tools.

Avi Barel
UX Collective

--

Apple’s Reality Pro — Rendered by Marcus Kane

In case we’ll finally see Apple’s AR/VR Headset at WWDC2023, I believe getting familiar with XR (AR/VR) Design will be a huge advantage for creative people’s career in the near future. So, according to reports, Apple will finally reveal their VR/AR headset, and their vision & plans for the upcoming future of Spatial Computing era— I think there’s no better time to dive into XR and prepare for this exciting future! Especially for us, the creatives (XR Designers and Developers) So, to me — “See Different” is just an extension to Apple’s “Think Different” just like XR (Extended Reality) is an extension to our reality ;)

Over the past 5–6 years, I have written several articles and tutorials about VR/AR Design tools and UX/UI principles. But now, we finally have more solid tools (you can find all of my articles on my Medium and iBarel blog). But since XR is an emerging technology, things change and evolve so fast, it’s exciting even more than the days after the 1st iPhone launch and the days after the AppStore was introduced to devs & creators.

Ex-Apple employee says that Apple aims for ”The Macintosh Moment (So this could be even bigger than “The iPhone Moment”). Even if Apple comes up with a New and Revolutionary UX/UI Design Paradigm for XR (different from current AR/VR products), I believe that most of the UX, HCI and Ergonomic principles will still remain relevant.

Modern Tools

So what XR Design tools are out there? Last week, my TL;DR post about XR Design & Development Tools on LinkedIn became extremely popular and I was happy to see in the post analytics that thousands of people reached it and found it useful & helpful. So, here are my favorite tools for XR Design and Prototyping in 2023:

1. ShapesXR

A free Creation, UX/UI Prototyping and Collaboration Platform for Remote Teams, it is native for VR/MR headsets (Quest 2 / Quest Pro etc.) and it’s very intuitive to use. There’s Figma and Unity integration, and more features coming up. They also have VR/AR UI libraries and Design Systems you can use (MRTK2 + OculusOS UI) and a lot of examples you can duplicate to create, experiment, or learn.

I use ShapesXR from the days it was known as “Tvori”, and I was also among the first 20 designers in their Beta plan to test AR/MR Pass-Through capabilities, so here are few prototypes and experiments I made with this amazing tool:

The AR holograms are in full-color, but the reality is B&W because Quest 2 has only B&W tracking cameras. In QuestPro everything (including my old projects) are in full color. More of my demos here.

2. Bezel

A free (currently in Beta) Online Design and prototyping tool (just like Figma), so even if you don’t have a VR/AR headset, you can still create UX/UI designs and prototypes for XR and test them on your smartphone (VR&AR mode). So, I wanted to re-create my old Apple’s xrOS prototype, but this time in Bezel (to learn this new tool, which is currently in Beta). Surprisingly, it took me only 10 minutes to create this interactive AR prototype, and it also works on my MetaQuest headset, in VR/MR (AR Pass-Through).

It’s the 2nd time I’m trying Bezel and I must say, it’s pretty intuitive, especially if you ever tried Flash / After-Effects. But it’s not pre-rendered, it’s a LIVE interactive prototype! Here’s what I made in few minutes:

I made this AR/XR prototype in 10 minutes. Here’s the original post on LinkedIn

3. Figma

XR Design in Figma?! Yep! Well, Figma is a well known “Old 2D tool” from the “Flat-world” era of screens (Mobile & Desktop), but it’s still the Go-To tool for Designers (and even some PMs and Devs). So, you can’t really design in 3D, or Immersive and Spatial Computing experiences (because Figma is not a “Spatial Design” tool), but it’s good enough to plan, design, and prepare assets for Bezel and ShapesXR.

In fact, you can explore initial XR ideas and conduct some research, wire-framing and user-flows in Figma, before creating the actual XR Designs or putting-on your VR/AR glasses. There are also some VR/AR plugins for Figma, such as Microsoft’s MRTK 3, VR Design System, ShapesXR Guidelines and Bezel Community resources and a great tutorial by one of my friends at Bezel, Daniel. Also, if you’re gonna use Figma and ShapesXR, you should check Albert’s article.

And here’s how I use Figma (in VR) to design for VR.

HCI, UX & Software:

xrOS

Last week we’ve discovered that Apple has trademarked 5 names for its OS (Operating System) for the AR/VR (XR) Headset (and future AR Glasses), but xrOS is most likely the one they chose in the end.
I’d say xrOS is also my favorite, but I’m biased because my XR-UX concept from 2016 for AR/VR OS was called “XR-OS” (Damn, I should have trademarked it, hah?! 😅 ). Well, I’m ready for xrOS, it’s gonna be exciting to design and develop for another new platform by Apple! How about you?

Responsive iPad Apps

In my Part 4 article I wrote about why XR won’t kill “Mobile First” design approach, and based on some reports, looks like Apple’s xrOS will support 2D iPad apps, so maybe I was right about that. But we can already see how Responsive Design is extremely important in VR and AR, not only when you go to the XR Browser in your headset to visit regular websites, but also when you run current Android apps (smartphone & tablet) on Meta Quest headsets. You can clearly see how well-designed “Responsive” apps work in VR/AR, I use Office, Video editing, and even Figma in VR(!) and they all work well.

HCI & UX

In my Part 2 article I wrote (back in 2019) about HCI and UX, and the way we’ll interact with XR glasses. I’ve mentioned Controllers, Hand Gestures, and Voice commands. But now we already have Eye-Tracking on the Meta Quest Pro, alongside with some more PRO and expensive XR headsets, such as Varjo XR3 (which I already tried in DefenseTech, Flight Simulators, Military industries and Education / Training systems).

Eye-Tracking potential is huge for HCI and UX, and what we’ll be able to do with it. We can already see its potential in MetaQuest Pro, but it will be way more interesting to see what will Apple do with Eye-tracking. Not to mention, the “Other” (Apple Rings, Gloves and EMG Bracelets) interaction methods, such as EEG/BCI sensors (I tried few of them, from different Companies and Startups - I can only say that the potential is enormous!). Could be interesting, we’ll have to wait and see (hopefully in WWDC2023).

Updated my XR-UX & HCI slide: Added Eye-Tracking and EEG/BCI (Meta has experimental EMG)

In summary

Those who asked me what XR tools are there for UX / UI designers and creatives who don’t know how to code, or having an hard time with Unity 3D and Unreal Engine, this article is for you! :)

There are more and more XR tools you can use. But my favorite ones are definitely Bezel and ShapesXR! And in case you missed my post with the full XR Tools list, you can find it here. Let me know if you want me to elaborate on other tools I tried, it’s been a while since I wrote about XR Design and Prototyping tools on Medium and UX Collective.

Sadly, most of the tools I covered 4–5 years ago are no more (wiARframe, Torch, etc.) but some are still around / changed (Tvori turned into ShapesXR, etc). Also, expect some interesting fusion between XR & AI, or as I wrote in another article series “AI & XR are made for each other”. We can already see how GPT4 and ChatGPT helping creatives to build VR/AR experiences, apps, and games without writing code, the AI does it for you!

I would suggest to follow XR pioneers in your field (Design / Development) like I do on LinkedIn (you can see who I follow). But the best thing to do is to try, explore and use as many VR/AR apps, games, and experiences you can — I do it on my personal YouTube Channel. That’s the best way to get inspiration and learn from successful products, Btw, that’s why I also do The XR-UX Breakdowns on my other YouTube Channel.

Anyways, in case it helps — I’ve been always sharing my XR journey and what I’ve learned along the way. You can find my previous articles, research projects, XR prototypes and tutorials here: https://ibarel.com/imxr

To my previous articles in the XR Design series:

Part 1 — Design & Develop for XR

Part 2 — Tools & a few UX principles

Part 3 — Get into XR without coding skills

Part 4 — Mobile-first is dead! XR killed it?

The differences between VR, AR & MR

--

--

Ex-Microsoft & Cisco UX Lead | Mentor & Advisory Board for XR Startups | VR/AR/XR Creator | Freelance UI/UX Product Designer at iBarel.com | CEO at HoverSense