Prototyping an AR Concept

We wanted to learn more about design sprints and AR, so we took two weeks to tackle both.

We prototyped and tested our AR concepts in a design sprint, in the first week. The second week was about learning more about AR prototyping tools.

Our Challenge

Build a concept that lets kids bake their own cake in a playful way with AR or VR, to complement TV show Taarten van Abel.

Taarten van Abel (‘Abel’s Cakes’) is a Dutch TV show where children surprise loved ones with custom-made cakes. A friendly baker helps the kids while they chat about the person they’re baking the cake for.

Week One: Design Sprint

In the design sprint we came up with a concept for the app. If you’re not familiar with the process, here’s a rough outline of what such a five-day sprint looks like (even though we did it in four days).

Day 1: Gather knowledge
Set a sprint goal and questions, learn from experts, set up a small user journey and choose what to focus on this sprint.

Day 2: Sketch concepts
Following a strict time-boxed planning, sketch out concepts that meet the sprint goal as well as possible.

Day 3: Make decisions
Decide which concepts are most likely to meet the sprint goal and fit with the business. Create a storyboard for the prototype.

Day 4: Create a prototype
Using the most efficient method, create a prototype that’s realistic enough for the concept to be tested with users.

Day 5: User test
Use the prototype to determine whether or not the concept is a good fit with the target audience.

But enough about the process. Here’s what we learned during this sprint.

The positive

• We turned a vague idea into a concrete concept
• Through individual exercises, we prevented group-thinking
• We generated lots of ideas in little time
• In one week, we created a lot and made many decisions
• We learned fast about the idea and the team
• Sparked creativity and enthusiasm within the team

The negative

• Self-set time pressure can feel like a burden
• Combining the concepts into a testable storyboard took a lot of time and effort
• Without a clear starting point, a design sprint can be hard
• Unclear if combining ideas is the best way to go

Week Two: Prototyping the AR Concept

After the sprint the concept was clear: create an app for users to design their own creative cake for a loved one. We would create the shapes and decorations in AR for a more realistic experience. After designing the cake, the user should be able to send it to their loved one with an AR selfie.

Cool idea, but because this was a design sprint, we had to test it first. That meant prototyping it. No one in our team had previous experience with AR tools, so we had our work cut out.

We started with what we knew and created a static prototype in InVision and used a few other apps to test the AR interaction. During the tests, we noticed it was really hard for users to imagine how the real app would work. It was clear: we needed a real, working AR prototype.

That was easier said than done. We needed to research which tools would be best for the task at hand. We eventually came up with these options:

• After Effects and Cinema 4D: Yes, the result is a video, but it makes the concept very clear.
• A-Frame: A HTML/Javascript solution that requires a bit of coding knowledge.
• Framer Studio: A well-known prototyping tool that can use A-Frame for AR.
• Halo Labs: An AR/VR prototype tool with a UI. We thought it looked interesting.
• Zapworks: Similar to Halo Labs — a tool with a UI, but a bit more advanced.
• Unity: A beast of an app with every bell and whistle you can think of.
• Xcode: One of our colleagues dabbled in AR using Xcode before, so this was a no-brainer.

Next, we’ll walk you through the various applications we came across, including their pros and cons.

After Effects and Cinema 4D

Learning curve: Medium
There’s a lot of documentation and there are many tutorials about both of these tools. The interface is pretty complex, but if you follow along with a tutorial you can produce a video pretty quickly.

Prototyping options
We didn’t really get an interactive prototype as a result. What we did get was a convincing video mockup showing how the interface could work. Importing design assets from programs like Sketch was easy, too.

Pros
Total freedom when it comes to visual possibilities and effects, so you can fake it ‘till you make it.

Cons
You get a static example, so testing interactions wasn’t possible. You couldn’t really test it and play with the interface.

A-Frame

Learning curve: Medium-High
Since A-Frame works with frontend code, you need basic HTML and CSS skills. You also need to get a JavaScript plugin working, so the learning curve is quite steep. However, the A-Frame JS library is well-documented. Implementing it is pretty doable.

Prototyping options
We’re working with HTML and CSS, so the possibilities are endless. You can combine the script with your own interface elements. Importing and placing a 3D object is easy, but animating something is quite hard. You need a physically printed target to display the object on top of the real world.

Pros
The prototype works on any device. You also have complete freedom in interface elements overlaying the AR view.

Cons
You need basic knowledge of HTML, CSS and JavaScript. Also, animating something on the 3D object is hard.

Framer Studio (2018)

We used Framer Studio because Framer X wasn’t available at the time of our design sprint.

Learning curve: High
Framer Studio uses the same library as A-Frame, but implementing it in Framer is far from easy. You have to use a strange combination of plugins and techniques. With our limited JavaScript knowledge, it was too hard for us to get it to work.

Prototyping options
Like A-Frame, the possibilities are endless with Framer Studio. Well, except for animation in 3D space — that’s not possible. Plus you have to get it to work in Framer Studio, which is something we couldn’t get done.

Pros
The interface for designing the overlay and animations is nice.

Cons
We thought writing code was hard, and so was animating in 3D space.

Halo

Learning curve: Low
It has decent documentation, but we didn’t even have to use it. The interface is quite simple, so anyone could work with it.

Prototyping options
It’s easy to add 3D models or build some with simple shapes. You can create simple animations based on preset actions.

Pros
It’s super easy to get started with this tool. No coding knowledge required.

Cons
The tool only allows for 3D design, so you can’t add a separate 2D layer for controls, which you need when you design apps for AR. The animation possibilities are also limited. You can create keyframe animations, but no fancy physics. Lastly, you have to use a specific app to preview your prototype.

ZapWorks

Learning curve: Medium
ZapWorks offers two different tools. ZapWorks Designer is a very lightweight tool you can use to create a simple experience. It’s a bit too simple to build our artificial cake experience, however. ZapWorks Studio is a bit more complex and offers a lot more functionalities. This does make it a bit harder to master, but thanks to the clear documentation we could build our experience pretty smoothly.

Prototyping options
ZapWorks Studio offers you the option to use code to create your AR experience. This way, you can make your design as complex as you want.

Pros
There are tools for each skill level.

Cons
Very little documentation besides ZapWorks’ own. You also need the ZapWorks app to view your designs.

Unity

Learning curve: High
Unity offers everything (and more) we needed to create our AR prototype. However, the interface doesn’t feel very intuitive and you need to have quite a skillset. Lucky for us there are plenty of online tutorials.

Prototyping options
This tool clearly wasn’t designed to be used for prototyping, but with the right skillset it’s possible to create basically anything.

Pros
Build whatever you like. Plus it’s FREE!

Cons
It’s a bit too complex to be used as a prototyping tool for most people. If you know your code this one is golden.

Xcode

Learning curve: High
Without prior knowledge of Swift and coding, making an Xcode prototype can be very intimidating. On the bright side, there are plenty of tutorials and documentation.

Prototyping options
There’s a full package of ARKit features.

Pros
With the right knowledge and skills, you can create whatever you like.

Cons
Without the right knowledge and skills, it’s really hard to create a functioning prototype. And you can’t share your creation unless you have a paid developer account.

Final Thoughts

AR design and prototyping tools aren’t what we’re accustomed to as designers — we’re much more proficient with tools like InVision and Principle. We felt a little awkward using them to create and test our AR designs sometimes.

When you do test your prototype, it’s almost impossible to create the desired experience with a low-fidelity prototype that the user can interact with.

We recommend teaming up with a developer who knows a thing or two about native coding languages. By combining a designer’s creative insights and a developer’s executive force, you can hack a prototype app together. You’ll get a prototype that really works, while the developer takes steps towards building the real deal.

Do you have any experience with prototyping AR concepts? Let us know in the comments how you tackle this problem.

About Soda & Resoluut

We are two specialised design agencies in Amsterdam, and are part of Makerstreet. Soda designs products that people love to use with fluent interactions. Resoluut makes those products look awesome, with on-par branding.

Want to know more or work with us? Contact us at www.sodastudio.nl or www.resoluut.com.