Sandbox demos help you present your products in a non-linear manner. Let’s look at the step by step process of creating one yourself.
Step 1:
Decide which screens should be accessible in the demo. Take Mailchimp for example. In this case, let’s say you’ll want the viewer to access the home page and all the pages in the side menu.
Step 2:
Open the home page of mailchimp and capture it.
Step 3:
In the side menu, open the first page and capture it. Capture the next page. Repeat this process for each menu item you want to make clickable in your demo and name them accordingly.
Step 4:
Name the screens in a way that it’s easy for you to find during the linking process. You can do it while capturing the screens with extension, or after your screens are in place - by opening the editor and changing the names there.
Step 5:
The next step is to link each menu item to the respective page. To do this, open your demo in the editor.
Step 6:
Click the first item in the menu, and select ‘Link’.
Step 7:
Choose the respective screen from the popup and save. This is where using the right names is important.
Step 8:
Repeat this process for all the pages in the menu you want to link. If you have many screens to link and are struggling to find the right one, use ‘Ctrl+F’ to search by the screen name.
Step 9:
Use hover guides if you want to provide some explanation for 'clickable' elements on the screen.
