GO TO:  APP DESIGN  |  JOURNEY MAP & PERSONAS  |  PRODUCT DEMO  |  EMPTY STATE SCREENS  |  VISUAL DATA & ICONS

 

PRODUCT DEMO: THE CHALLENGE

Above, the original product demo. Note the green instructional arrow, dialogue box and dense copy. Click to expand.

When Veracity's software went live in Fall 2017, we switched gears from designing interfaces to designing marketing and sales materials. Chief among needs was a product demo. The Project Manager and CTO created one in Adobe Captivate. The green arrows and dialogue boxes are their UI contributions. The copy is theirs also.

Afterwards, they approached me for a design overhaul. I decided to make it feel more like an e-learning demo. I also saw a need to parcel out the learning. 

Questions we asked: How can we make the learning enjoyable? How can we familiarize users with the interface with minimal stress? How can we prevent info glut? I retooled the interface to make a more dynamic, tempoed, interactive learning tool.

 


PRODUCT DEMO: THE SOLUTION

Above, wireframes and style guides for our e-learning demo. I designed a menu of elements that could parcel different types of info. I crafted all the design elements, set typography and offered variations for color schemes. The CTO settled for the dark interface to match our product. Again: how to make good use of color against a black background? I thought of neon signs at night.
 


PRODUCT DEMO:  ANIMATED & ON VIDEO

I created a time-based animation that's both a video and a clickable HTML5 demo. This mini demo serves as a style sheet for tempo and design elements.