Exploring the Design Decisions Behind Torch AR’s 100% 3D On-boarding
The art of teaching is the art of assisting discovery.
— Mark Van Doren
We Can All Be 3D Designers
I’ve been designing since 2002, when I began my focus in the area of graphic design in college. Since that time I’ve found myself in and out of design as a profession. I’ve worked at a bank as a writer and as a print designer in a press shop. I’ve worked in IT. For a five-year stint, I worked as backend software engineer on a creative technology team. Now, as an Immersive Product Designer at Torch, I regularly lean on all of my past experience and learned skills because what we are building requires structure, clear communication, visual design, interaction prototyping, and empathy.
Prior to joining Torch, my experience with 3D tools and concepts was…limited. I’d learned enough of Blender to be dangerous, but I could do little beyond simple boolean operations, and adding material to an object. I never progressed further with 3D tools because the challenge of using them was enough to put turn me away. It was the promise I immediately saw in Torch AR that brought me back to 3D.
Torch proves something that I’ve felt strongly about for some time: design skills are design skills. Whether it is 2D or 3D, print, or digital, skills translate. All the lessons I learned at the printing press, designing digital experiences for global brands, and even in the design and documentation of my backend work — all my experiences translate into 3D.
If I had one message for other designers it is this: you already have all the skills you need to design in 3D — I used mine to build the onboarding experience for Torch AR. In 3D.
Why Onboard in 3D instead of 2D?
With Torch AR, we’ve created a tool for designing experiences in augmented space. We put the onboarding in 3D space, as opposed to on the glass, because we didn’t create a tool for designing on glass. To stick the UI there would have been a missed opportunity.
As we discussed this onboarding project, it became clear that putting it on the glass would have been a mistake. We’d already done the work of building the tool to do that, so we asked ourselves, “why not put our onboarding in the world?“
A key benefit of doing so was that we could reduce screen real estate down to the tools needed to use the app. One of our earliest lessons and a constant theme at Torch is: in AR, the camera image is sacred. That means keeping the screen clear as much as possible. This is also one of the lessons we want to convey to 2D designers getting started in 3D — you are no longer limited to what is on the glass, so keeping the view clear is paramount.
Putting the onboarding UI in space also reinforces the spatial aspect of AR. It demonstrates that 2D UI in 3D can play an integral role. In 2D app/web design, we are always looking down on the UI — there’s a single perspective. AR has no fixed perspective. It encourages movement, exploration, viewing the experience from many perspectives. It is easy to overlook a key piece of an experience if the viewer is not looking around in their environment.
Placing our UI in 3D adds another layer to what designers learn out of the gate with Torch AR. Using subtle cues, like shadow, helps designers learn they need to move around to work in an AR experience.
The On-Boarding Project
As the video above demonstrates, the Torch AR onboarding encourages movement and exploration. In the spirit of that exploration, we designed the Gesture Gymnasium to teach basic gestures:
This project is the front door for designers using Torch AR for the first time. It literally begins with a sort of welcome mat. Stand here! So, it has to convey a lot in a small space and short time frame. It needed to establish our voice immediately. It should feel empowering from the onset. It needed to be accessible. We chose colors that have a high visibility across all forms of color blindness. We arranged the experience in a ring, to make sure it could be experienced in large and small areas alike.
The onboarding itself consists of three main sections, all interlinked with familiar 2D buttons that serve as navigation. Designers entering the experience learn the basics they need to start building their ideas with Torch AR. Second, we get into all of the ways they can use gestures to scale, move, and rotate objects. Lastly, collaboration is presented, because the real fun in designing for AR comes when you start working with others in real-time.
The experience was designed in a tiny 10’ x 4' closet-slash-room we use for podcasting and taking private calls. The idea was that anyone should be able to stand in one spot and complete the whole experience. The Google AR Design Guidelines, which are worth reading, place heavy emphasis on awareness of the environment and encourage movement where feasible. Not everyone has an open space. So, I chose to conserve space but show people AR is about movement and exploration. I decided to place the UI in a ring around the designer. With a ring-like structure, that asks one to turn instead of walk around, anyone could complete the onboarding in any space, from a warehouse to a broom closet.
Tips for Using 2D elements in 3D
One of the main challenges of using 2D elements in 3D is actually part of the nature of the design tools we have been using for years. In the flat universe of 2D design, everything lines up on the depth (or Z) axis. This simplifies things for the designer, including a uniform sense of scale. Our CEO, Paul Reynolds, wrote a short post covering some of the peculiarities designers encounter when they first design for 3D.
In 3D, on the other hand, objects don’t all live on the same plane. The parallax effect can cause objects to look as if they are aligned, when they are far apart but of differing size.
In the video below, note these equal size purple creatures right beside each other. Look again! The shadows beneath the objects, where available, are a useful hint of real size and position.
Another challenge is decoupling our design brains from the flat world. As 2D designers, we have grid, grid, grid baked into our approach. Grids are still useful in 3D, but the third dimension opens up a grander space for engagement. UI can be above, below, left, right, and all around. Arranged incorrectly, UI can be overlooked altogether.
It can be hard to treat 2D elements in AR, because their very nature keeps us thinking in a flat plane. This is the result of years of conditioning we need to unlearn. Otherwise, we are at risk of missing out on something more interesting.
Finally, there’s the manner of workflow. With a classic 2D workflow, most of the design and testing happens in a single place. Designing for AR will require designers to get comfortable designing in multiple places — at their computers and in the world. Getting up and walking around will be requisite to assessing their work. Throughout the design of the onboarding experience, I often had to walk to the other end of the room to learn what I’d created wasn’t working, or merely to find out I had made a simple typo.
Lessons Learned
Learning to work in 3D is like learning to drive a manual transmission car if you’ve only ever driven an automatic. It takes some adjustment but you quickly forget a time when it didn’t feel natural.
There are many concepts and practices that translate directly from one to the other. You’re still telling a story. You still need to rely on affordances to take people on a journey. On the other hand, there are concepts — like the parallax effect and the single-perspective grid — that take some rewiring of what you know. Your mental habits are challenged as you start to make sense of what makes sense in 3D. But the good news is, you will feel more familiar than you might think. Your internal storytelling brain will be engaged. Your sense of space will adapt and grow. The tools and skills you possess will come in handy.
I’ve also learned that it no longer takes years of experience in 3D design to start designing for AR. You don’t need to do a turkey dance to convey your ideas. I started at Torch with almost no experience when it came to putting a 3D scene together. Torch AR changes that by opening up a new dimension in which designers can work. The result? Access — the inclusion of a community that has been kept away from 3D by the Wall of Pain.
What we need now, in 3D design, are more perspectives, more input. And, perhaps, for the first time ever, you have the tool you need to get started, today.
