I’ve been thinking quite a lot about the best way to bring an idea to life, in such a way that it can be pitched or easily communicated to a cold audience. Previously I think I’ve worked with the assumption that you either provide a static visual design, or an interactive demo.
A static visual mockup can communicate a lot about the brand, tone, exactly what is important about the service, and generally provide an intuitive reaction about whether you are hitting the right spot.
An interactive demo can generally go much further in demonstrating how a user might go about a typical scenario that your product would be used for. This can really help to communicate the concept behind the product, and how easy or difficult the important processes are.
A data driven interactive demo can be put together quite fast, but you’re still really talking about 2 – 3 days work. In addition, making rapid last minute changes and redeploying to a demo laptop can be a little more involved than is ideal, and it’s quite easy to end up unduly stressed and flapping around.
I’ve had a little revelation about how to make this whole process much more efficient. It’s really much faster to work on a design in photoshop. If you have a scripted demo, then there is a linear path about what you click on, and where you end up. In terms of what you see during a demo, there is very little difference between a real interactive demo, and presenting a linear sequence of images in a browser, set up with anchor elements to allow click through to the next snapshot. This approach is much less work, and allows quicker turnaround and less stress.
The end result looks very similar to a typical person. They see a user clicking elements of a page, and progressing through a scenario. Generally it means that clicking anywhere on the interface will progress to the next page. If you require a little more control, you can add anchor elements, style them to have dimensions and absolute positioning to overlay the main image and provide hotspots. This can provide conditional branching in your demo – for example, clicking the logo to return to the start of the demo from any page.
It feels a little like cheating, but is actually much easier and allows you to focus more on the design, and the aspects of the service that you want to capture and present.
