Kondor+ interactive diagram

Concept

The client wanted an interactive diagram showcasing their financial industry product on their new website. I designed an animated diagram with contracting/expanding sections, so the user could explore different aspects of the product without being overwhelmed with text. The end result was to go on their tablet-friendly website, so that put Flash firmly of the picture. The technology of choice was HTML5, and the diagram works great on both desktop and mobile devices.


Design Process

The offering of the client is fairly large so we wanted to break it down piecemeal, focusing on one aspect of the product at a time. The user can expand and contract parts of the interactive chart, and move easily between different sections. The slick animations and good use of space and typography makes the experience pleasant and easy to use.

Technology

Since this was a fairly animation heavy piece, I decided to author it in Flash and export to SVG/HTML5 via Google's wonderful Swiffy tool. HTML5 canvas could have been used, but that would have meant coding everything including the animation engine and event handlers from scratch - not a viable proposition with the timescale involved. The SVG route worked a treat and looks beautifully crips at all resolutions and on all devices, including iOS.