Designer - Pet Shop Business Card

Designer

Designer - Pet Shop Business Card

Introduction

In this video, we’ll be taking a look at a business card AR experience we created for a fictional pet shop using the Designer tool.

For further context on the project, please check out this video where we discuss the idea behind the experience.

Designer Overview

ZapWorks Designer is our web-based AR solution, offering users of all levels the ability to bring the physical world to life.

Designer is best utilized by overlaying content such as videos, images and photo albums on a target image, as well as allowing the user to transition between multiple scenes, and linking through to websites and social media pages.

Experience Overview

In this project we’ve overlaid the physical tracking image with the digital assets and added a prompt for the user to tap to navigate to the following scene where we've included a video of a cat as well as some useful links to a website, phone number and location.

We’ve used transitions to add polish to the experience, as well as to draw the user’s attention to certain elements, such as the tap icon in the first scene. We’ve also included a background sound to add to the ambience of the experience.

Project Breakdown

We’ve split our experience into two distinct scenes.

The first scene acts as a mirror of the tracking image with a prompt to navigate to the second scene, which includes a video and three buttons linking to a website, phone number, and location.

Image Placement

In the first scene we've scaled and positioned our images to match up with the physical target image.

The images were uploaded using the image upload option and scaled and positioned by clicking and dragging.

You can also fine-tune the placement of content in Designer using the text fields above the canvas view.

Transitions

For most items in this first scene we wanted them to quickly fade in, so we've set the scene transition to ‘fade in’ with a length of 0.5 seconds.

As we wanted to make the ‘tap’ image stand out, we gave it a transition of its own, a ‘scale down with fade’, delayed by 0.5 seconds to make sure the other elements had completed fading in.

The tap image also has a transition out, sliding out to the left when the second scene transitions in.

The other images in this scene transition out in varying different ways, this variation in transition helps create a dynamic changeover.

Scene Navigation

The navigation to the second scene is handled by the tap image.

The image has a ‘Go to scene‘ action attached, which navigates to the second scene.

Background Sound & Grab and go

The background sound for the experience we sourced from Audioblocks, a great place to get royalty free music.

We’ve also enabled grab and go so that the user can still see the content when the tracking image is no longer in view.

Further Transitions

In the second scene we have a video surrounded by various buttons for the user to interact with. We’ve used the scene transitions option adding a transition-in delay of 1.5 seconds, this is because we’ve added individual transitions to most of the elements in this scene.

For those elements without individual transitions, we want to make sure the first scene has fully transitioned out before they appear.

In our first scene the longest ‘transition out’ we have lasts 1 second and has a delay of 0.5 seconds, giving us the 1.5 second delay we need to add to elements transitioning in on the second scene.

Video

We got our video from Videoblocks, a sister site to Audioblocks that specialises in video footage.

Within the video’s properties, we set it to play automatically, loop, and have its controls hidden. We’ve also positioned the video at the back of the scene using the ‘send to back’ option just above the canvas view. This allows the video to be nicely framed by the background png that is placed in front of it.

This video was uploaded directly from our computer, not linked to from YouTube or Vimeo. When linking to YouTube or Vimeo videos they will open in their respective website or app whereas we want to keep the user immersed in the AR experience.

Interactive Buttons

The buttons that appear on the tracking image now have actions associated with them when the user taps on them:

  • The first dials a telephone number.
  • The second links to a website.
  • The third links to a Google Maps location.

While you can use the button object to add interactivity to your experience, it’s best practice to upload your own images and use them as buttons by adding actions to them from the actions panel.

We’ve also added a small ‘tap’ image next to one of the buttons to indicate that they are interactive elements and the text beneath the icons makes it clear what will happen when the user taps on them.

Studio and Widgets Projects

Use the links below to be taken to the Studio and Widgets project videos, as well as the asset preparation video:

Open in new window