wemakedotcoms

Interactive map for TATA Communications

This post actually covers a project that spanned over the past three years, culminating last February with the launch of the TATA Communications brand. Started as the VSNL International network map, this application grew to various connectivity and services maps. I was responsible for the design and production of the Illustrator maps but also their porting to flash and development of an interactive application.

The creation of the maps was in itself a huge undertaking. Especially as the network grew in size and complexity. A lot of time was spent researching the data. I created all the icons, services and data structure. For three years I was dubbed “Mr. Map” as I created or updated all the major maps used by the organization.

For the launch of TATA Communications I redesigned all the maps and also rewrote the original application from the ground up. The new version uses OOP and is more manageable. All the data is external (maps, layer data, configuration, etc…) The 2008 version included the following new functionality:

• Layer visibility management
• Interactive layer palette
• Fullscreen mode
• Scrollwheel support
• Custom printable view
• Full OOP (30+ classes and sub-classes)
• Vector only GUI (full use of flash effects and filters)

The actual application (GUI & code) is only 44kb. The Most complex map came in at 100kb. Pretty amazing

View the interactive Global Footprint Map.

The interactive maps can be accessed from the Our Network page.

A little experiment with a 3D map chooser…

Below are samples of the static map designed for this project.

Detail of the GUI

Flash Video (or FLV) doesn’t need an introduction. Thanks to sites like youTube, FLV is the de facto solution for deploying videos online. On top of leveraging the Flash player install base it offers excellent scripting to allow for interactive video applications.

Globalnumberportability.org’s flash demo uses FLV and incorporates a navigation and close captioning to synch the text with the animation. It also includes navigation controls to jump to a specific section. It uses an XML playlist that also include the copy for captions and cue points info.

The TATA Communications main homepage flash also incorporates FLVs.

3D renders of one option for a new logo icon

In late 2006 STC was commissioned by Arbinet to re-brand and re-design their site. As part of the exercise, I was asked to design some of the comps that were to be submitted to the client for review. Although these were rejected, I think they are cool enough to make it here…

Detail of the homepage design comp

For this project (developed through Cyber Sytes) I was contracted to design the site and create all the flash elements. Including a brochure application using a flip book effect. The brochure used a dynamic back-end and an XML layer to carry data to and from Flash. Created to be flexible this book is still online today. It generates revenues via ad placements.

Functionality included: Search/Filter, bookmark and custom printing of listings. Coded in AS2 the application uses OOP and Classes to manage elements and ensure modularity. At the time this was one of the most complex application I had created.

Click here to view the brochure application.

The site’s homepage design has been changed from the original one I created (see comps below).

Flash 6 goodness

Take Flash 6, TextField.getFontList(), HTML text support, a list component and a textfield: you have the STC fontBrowser. A few thousand users later we have a hit. It helped STC’s site rank higher and generated a buzz around the agency’s interactive production. Pretty nice considering that it was a very simple tool to develop.

Click here to use the original STC fontBrowser.

An updated version of the fontBrowser in AS2 and with a new GUI.

Following the success of the fontBrowser I developed the STC Timetracker an online tool to keep track time spent on tasks. Although a lesser success I still get emails from people using it today.