Designing a product walkthrough

With Justinmind, you can a simple walkthrough for a mobile app prototype using Dynamic Panels and On Swipe events.

Walkthroughs and guided tours are helpful tools for user onboarding. In our example, we create a beverage walkthrough in which the user can follow instructions to enjoy their drink, by swiping between screens. 

0-interactive-prototype-walkthrough-mobile-app-prototype

To create a walkthrough for your mobile app prototype, follow these steps:

Designing your prototype’s walkthrough in your prototype

  1. Create a new iPhone prototype.
    • Go to the Outline palette and select the Screen to customize it. In our example, we have made the background color yellow.
  2. Drag a Dynamic Panel to the canvas, resize it to 375 x 503 pixels, and position it in the center of the canvas.
  3. Double click on the Dynamic Panel to edit its contents and drag an Image widget and Paragraph widget into it.
    • Resize them to match our example.
    • Add an image to represent the first screen of your walkthrough and add the text you wish to display in the first screen in the Paragraph widget.
  4. Right click on Panel 1 in the Outline palette and duplicate the panel twice so that you have three panels in total.
    • Replace the images and text in the second and third panels to represent your second and third screens.
  5. Below the Dynamic Panel, drag three Ellipse widgets, resize them and align them horizontally to match our example by using the Align option in the toolbar.
  6. Make the left Ellipse yellow, and the other two gray.
    • Then, select all three Ellipses and group them together by right clicking and choosing the “Group” option.
    • Each Ellipse corresponds to a screen: the left ellipse to the left screen (Panel 1), the center ellipse to the center screen (Panel 2), and the right ellipse to the right screen (Panel 3).
    • 1-interactive-prototype-walkthrough-setup
  7. Finally, add a Rectangle behind the Ellipses, resize it to 375 x 224 pixels, and change its style as desired.
    • In our example, we have made the background color white.
    • 2-2--interactive-prototype-walkthrough-setup

Adding events to your prototype

We will now add events to the panels in the Dynamic Panel to allow the user to swipe between them.

  1. Select Panel 1 of your Dynamic Panel from the Outline palette and go to the Events palette.
    • Add an “On Swipe Left” + “Set Active Panel”, selecting Panel 2.
    • Below, add a “Slide left” transition effect and click “OK”.
  2. Add another action: right click on this event and select the ‘Add action after selected option.
    • Add an “On Swipe Left” + “Change Style” event, selecting the Ellipse on the left.
    • Below, tick the background box and change the color to gray.
    • This will change the left Ellipse to gray, signifying that it is not currently visible when the user has swiped away from the left screen.
  3. Add another “On Swipe Left” + “Change Style” event, this time selecting the center Ellipse. 
    • Below, tick the background box and change the color to yellow.
    • This will change the center ellipse to yellow, signifying that it is currently visible when the user swipes to this screen.
    • Change the links between the events to “WITH previous”.
    • 3-interactive-prototype-walkthrough-event
  4. Copy these events to Panel 2, changing the active panel and the dots in the change style events.
  5. Go to Panel 2 and add an “On Swipe Right” + “Set Active Panel”, selecting Panel 1. Below, add a “Slide right” transition effect and click “OK”.
  6. Add another action: right click on this event and select the “Add action after selected option”.
    • Add an “On Swipe Right” + “Change Style” event, selecting the Ellipse on the left.
    • Below, tick the background box and change the color to yellow.
    • This will change the left Ellipse to yellow, signifying that it is currently visible when the user swipes to this screen.
  7. Add another “On Swipe Right” + “Change Style” event, this time selecting the right ellipse. 
    • Below, tick the background box and change the color to gray.
    • This will change the right Ellipse to gray, signifying that it is currently visible when the user has swiped away from the right screen.
    • Change the links between the events to “WITH previous”.
    • 4-interactive-prototype-walkthrough-event
  8. Finally, copy these events to Panel 3, changing the active panel and the dots in the change style events.

And that’s it! Click ‘Simulate’ to see and interact with your prototype. You will be able to swipe left and right between screens to view the content on each screen. The Ellipses will change color depending on the screen you are viewing.

You can download our example here.