Animated & Interactive Cityscape
May 14, 2015
Earlier this month saw the launch of one of the most exciting and engaging projects I’ve had the pleasure of working on. The Smarter Security microsite features an animated cityscape allowing the user to navigate the interactive city and explore inside each building to discover the associated solutions.
Created as a sales-tool for NG Bailey, Smarter Security features each of their target markets represented by a corresponding building on the map, when each is selected the user is taken to a cross-section detailing the service offering, along with information about the solutions and corresponding benefits.
Design & development
Producing an interactive isometric microsite provided many enjoyable challenges to me as a designer, from strategy to development and everything in-between. The main target market for the project was desktop/laptop users in a sales-pitch environment, but the website ultimately had to be accessible on any browser and device. Modern technologies and techniques were used to create a flexible and adaptable website including jQuery, CSS3, SVGs, and responsive design.
The underlying strategy required to produce an engaging customer-experience for mobile, tablet and desktop users was equally challenging to the coding and production techniques required to create a website of this nature. A consistently engaging experience regardless of device was the goal, and early feedback suggests that the hard work and project plan has paid off.
Collaboration
NG Bailey, the UK’s largest independent engineering service provider, approached ISEEPR to run an innovative campaign to bring their solutions to market. Peter Hinton Design has collaborated closely with ISEEPR and NG Bailey to deliver Smarter Security for their sales-team to generate interest and educate potential customers.
A little something extra
What’s an animated cityscape without a little fun? There’s a number of easter eggs and ‘discoverables’ for desktop users, see if you can spot them all.