An Easy-to-Follow Step-by-Step Recipe For App Designers

On Friday I shared a video of a wayfinding app I prototyped using Torch and a lot of people asked how it was done. This post explains, step-by-step, how anyone could build a similar prototype in Torch.

There is no coding or special knowledge required. All you need is a iPhone (7 or newer) or iPad (Pro or 2017+) and

The experience demonstrates an app that leads the user from the front lobby of our building to our office, navigating stairs, two right turns, and a left turn, and covering about 150 feet total.

I recorded this all in one take on an iPad and in one project using just Torch (e.g. no outside special effects or video editing software or cloud anchors.)

Assets

I used two 3D assets — the robot guide and dancing storm troopers — and seven variations of the same 2D asset including a welcome card, the checkpoint cards, the bike room card, and the party found card showing you have arrived at our office. Depending on your own environment, you’ll need more or less checkpoint cards.

I chose the flying robot from Sketchfab because I knew it could be placed imprecisely without looking strange. It could float. It also afforded me some flexibility since it had a “front” and a “back.” I could use this orientation to give the guide personality and indicate when it was waiting (facing the camera) and guiding (facing away and moving). The toggle for this is simple to set up too.

I built the text cards in Illustrator. I then exported the artboards as 1024 x 512 PNG’s to Google Drive where I could import them into Torch using the Object Drawer →Browse feature.

The storm trooper model is included at the end as surprise/reward for following experience to the end. I used it because it is animated and can capture attention from far away. Really anything fun or interesting would do.

Execution

Since we don’t yet have proximity triggers in (coming soon, these will trigger interactions as soon as the user gets within the defined distance from the object), I used taps to trigger the interaction that would cause the guide robot to proceed to the next step and for the text cards to disappear in one spot and appear in the next. I thought about the progression from ground to the office and decided it was best to design a series of checkpoints — one at every turn the viewer would need to make.

Experimenting Before Designing

Before I began really designing, I first created a scene where I could sort out my asset sizes and placements.

This is prototyping. Don’t be afraid to experiment on all the little details like placement and interaction behaviors before going into fill design mode.

As it was, I knew I needed to at the very least do the following:

• Experiment with text card size, placement and appearance
• Experiment with interactions that animated the floating robot guide — how would it move fluidly from a waiting state to a guiding state
• Would this be a project with one long scene or many smaller scenes connected together using interactions. Read more about scenes here.

The cards looked best to me when scaled to 2.5 on all axes.

I had originally planned on the interaction of tapping the robot but decided during the quick test to go with tapping the instruction cards. I made a quick edit to the cards and re-exported. Also in that test is where I figured out my simple architecture.

Scene Architecture

Each scene consists of a start checkpoint card and a next checkpoint card. On the next checkpoint interaction, the scene would transition over after the animation curves complete. This gave me the ability to do some nice guiding animations with the robot (between the two checkpoints). It also meant I only needed one scene for every two checkpoints.

Recipe

It requires only four scenes to get the user from the lobby to the front door of the office. The scene plan (or information architecture) for our building is as follows:

1. Welcome Scene — guide user up the stairs
2. Top of Stairs — guides user to take a right past conference room
3. Take a Right — guides user to take a right past bike storage
4. Almost There — guides a user to take a left.

Each scene is basically the same except for the surprise ending.

Create each of the scenes you need first (tap the Scene pill →+ Scenes).