Creating a Non-Guided Demo – Walnut.io

This article will guide you through the steps to create a Non Guided demo. Before you get started, we recommend viewing the corresponding example if you haven’t already, it will make a lot more sense.

What is a Non Guided Demo?

A Non Guided Demo allows a viewer to explore your Walnut demo freely, depending on what they want to explore. The key elements of the demo are linked together using the “Links” functionality in Walnut.

Capturing screens for a Live Demo

To create a live demo, you’ll need to capture all the relevant interactions, for example drop downs, or hover menus and ensure they are linked together.

💡Bonus tips:

Use Continuous Capture to have your every click captured. This will make your creation process even easier!
Make all your captures in the same screen resolution size to make sure your demo looks consistent.

Editing a Non Guided Demo

1. Start at the home screen

Start at the home screen for your demo and add links to any of the key flows you would want a user to see. When you link screens together, users will see hotspots in their demo to understand they can click on something.

💡 Bonus tip: Rename your screens to make it easier to differentiate and link between them!

2. Create reusable elements

If you have any elements that are re-used from screen to screen, create a smart object so that you can apply any text and link edits to every screen with a single click. The most common example of this is the navigation menu in an app or website. You can learn more about smart objects here.

3. Link the other screens

By default, Walnut will now auto-link every link upon capture so you don't need to manually link screens together. But it's always best to just make sure the links are connected to the right screen, so you can decide the flow your viewer will experience. You can also customize the links if you want to change it from what was automatically generated.

💡Bonus tip: Make sure a user can always get back to the home screen by linking the navigation or top logo.

4. Test it out

Make sure your demo is working as expected by using the preview link or sharing with a teammate!