How we built a metro style website for TapeTrack

A new step in the evolution of web UI designs is the Metro style — simply open TapeTrack, and you’ll be greeted by this refreshing set of tiles around the page.

The Metro style UI we built for TapeTrack

These softly moving tiles are inspired by the fresh look and feel that comes with Microsoft’s Windows 8 and Windows Phone.

Bringing smiles to an important client

TapeTrack is a tape management system run by one of our clients, Denver-based GazillaByte Pte Ltd and led by Gerard Nicol. Their product has over 4000 global users, including many Fortune 500 companies.

When it came to explaining how rtCamp was going to do the Metro style design, our creative designer Ganesh didn’t take chances with clarity.

After reading through the requirements, he decided to create a blueprint on a whiteboard and email a picture to the client. The blueprint was enough to trigger a conversation about our team’s readiness to implement the idea.

Modern tools to achieve our goals

A diligent team led by Prasad used tools that are at the frontiers of evolving web technologies.

Complex animation effects were achieved by using jQuery instead of Flash, which is passe. Moreover, the site was built using HTML5 and CSS3.

Supporting Internet Explorer 7/8

A study of the site’s analytics revealed that many visitors still used the legacy Internet Explorer 7 and 8. Apart from making the site run on all major browsers and mobile devices, the team ensured that these legacy browsers were supported as well.

An eye for usability

Visitors to TapeTrack’s site are treated to a pleasant animation when they try to look around. If you click on any of the tiles or tab links, the browser never refreshes – the information you’re looking for is right there in less than a second!

The end result is a more engaging website, with reduced chances of turning back visitors.

Our design team reckoned that not many visitors might be familiar with the tile-based design and right tab, and thus included tooltips to explain first-timers about their use.

‘Something Unique’

The rtCampers looking into TapeTrack’s challenges all through were anxious to see their ideas materialize.

But at the end of all the hard work, little can be more rewarding than the reaction of CEO Gerard, who believes “the folks at rtCamp stood out as people who relish the opportunity to do something unique.

Leave a Reply