Imagine you just created your new product and now you want to demo its highlights in a product tour. That’s a good decision because such product tours are not only a quite cool teaser of the product and visual eye-catcher, they help to explain your product with mainly images and few text only. It’s an easy way to catch your future-customers’ attention!
What to consider when creating a product tour?
- Step by step: Guide the user through your USPs.
- Spotlight: Highlight the most important product aspects on one slide.
- Brevity: Keep your key value propositions short, but clear.
- Action: Let your product tour end with a call to action to turn your visitor into a customer.
Now that we have the basic information, we commence prototyping our animated product tour. And here’s how it goes …
1. The project setup
To visualize the product tour, I created a mobile app called “Interactive Product Tour”. This mobile project contains a total of 4 pages, whereas each one represents one product highlight, and 8 layers that include a footer as well as 7 additional animated outstanding features.
On the first page (“Start of the tour”) I added some rectangle and ellipses to represent the mobile device and also used the drawing stencil to paint a cloud at the bottom of the mobile app. On the following three pages (Highlights of the tour – 1/2 and End of the tour) I repeated that, and only created a new drawing to represent the second part of the cloud at the bottom, because later I want to create an animation that lets the cloud move.
Screenflow of the pages that of the Product Tour
Additionally, I created layers that later appear automatically when showing a new screen. These layers contain the content of the product highlights that “fly in” on each page. For instance on the first page, I added two magnifier objects to zoom into buttons of the app and on the last page I added three icons to demonstrate that the product is available on other devices too.
Layers are used to create auto-pop-up highlights
2. Creating the interactive tour
Now that we have build the basic structure of our product tour, we continue with the interactions. On the start page we build an interaction chain that consists of multiple reactions triggered by only one user action. To do so, we open to the interaction dialog and add the action When the user “loads the page”. I will split it into three parts – pop-ups, page jumps, and loop – to make it easier to understand the entire chain. Just keep in mind that you need to add the reactions in the order as they are supposed to appear.
Preview of the complete interaction chain
2.1. Add pop-up highlights
Since we integrate automatically appearing highlights that are placed on layers right at the beginning on the first page, we include those layers into our interaction chain. To do so, we remain in the same interaction dialog that we have already opened and add the reaction “change layer visibility”. Then we select the layer that should pop up, set the visibility to “show” and add a delay. (Note: Delays are used in subsequent order so you need to count forward from the beginning of the first user action.) Here: I started with the layer “1-1 Highlight bubble” and made it appear after two seconds upon the first page load. Then I added the second highlight bubble with the same settings and only adjusted the delay and repeated that for all the other layers.
Adding layers to the project
2.2. Jump from page to page
Now it’s time to jump to the second page. So we add the reaction “show page” and select the page that is supposed to come next (Here: “Highlights of the product – 1”). To have a neat transition, we use the option “instant link” and the animation “slide in from right”. To automate the transition a delay has to be added. Here I used 5 seconds. I repeated that step for the other pages and only changed the delay to 10 and 15 seconds so that the pages change every 5 seconds after the first trigger.
Adding page transitions to the project
2.3. Infinite loop
Finally, we want the product tour to start again. To do so, we add the last reaction. So we select “show page” and choose the first page “Start of the tour” again. This time we have to change the options and set “Link with reload – open in same page”, add a fade animation and a delay of 17 seconds so that the product tour quickly starts over again.
Creating an animation loop
3. Simulation
Voilà! To test your product tour, take your mobile device, open the Pidoco app (available via Google Play or the App Store) and start the simulation of your project by selecting it from the project list.
That’s it! You just finished your demo a product tour.
Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!