Fallon and Sierra Bravo Help Travelers Get Found in a Flash Web Application
Partner Program Project: Find an Agent, Travelers Insurance
Partner and Client Profiles
Since Fallon’s founding in 1981, they’ve been guided by one simple idea: Outsmart. It’s never gone out of style. It’s never become irrelevant. It’s never been a more accurate description of their mission, their people and their clients.
Fallon’s client Travelers offers a wide variety of property and casualty insurance and surety products and services to businesses, organizations and individuals in the United States and in selected international markets. Products are distributed primarily through independent insurance agents and brokers.
Objectives
Travelers wanted a cool online tool for customers to use to find their agents with ease. Sierra Bravo and Fallon came up with an application in Flash that would help insurance seekers hook up with Travelers agents through an intuitive online search tool. To do so, Sierra Bravo built their implementation on top of the Google Maps API.
Based on the creative design of Fallon, this application would have to allow agents to be located by either a radius from an address or by agent name. The results of the search display with customized graphics would be seamlessly integrated with Google’s existing map services (map or satellite views, dynamic zooming and scrolling, and driving directions).
Technology: Architecting for Agility
Sierra Bravo built this application using a model/view/controller methodology separating the application’s logic into discreet layers. During development, this allowed us to aim our testing on focused blocks of functionality to ensure quality. For future-proofing, as this application ages, portions it can be changed (e.g. the database or mapping service) without needing to rewrite it entirely.
Travelers’ replaced a standard HTML application for agent searching that generated a long list of agents for seekers to have to sift through. The client wanted an application to make the agent-search process more user-friendly, dynamic and visual. Also, Travelers’ formerly used a third-party service that was not cost-effective.
Solutions
Sierra Bravo provided a set of pages constructed in XHTML, CSS and Flash. The scripting for the site was built in PHP and JavaScript.
View: Google Map Base
The backbone of the data presentation was built on top of Google’s mapping service. The site was built around three views of the agents — country level, city level, neighborhood level.
- On the country level, each of the cities listed in the city database is displayed at its coordinates with the icon designated in the city database used as a pushpin.
- The city level was problematic. With 13,000 agents in the database and approximately 25 cities on the map, small cities can have hundreds of agents and larger cities have thousands. In order to display this amount of information effectively, we aggregated agents in clusters.
- The neighborhood level shows pushpins for each agent in that view or in the search result. Clicking a pushpin displays a customized info window displaying the agent’s information from the agent database.
City Database
A web application caches information on each city to generate views. The city database stores information on positioning the label for the country view, the zoom level and latitude and longitude for the city view, and a link to the icon used on the Google map for each city.
Agent Database
An agent database caches information precompiled on each agent in the system. It is recreated by an automated process from the data feed at a regular interval. During import, each agent’s address is geo-coded to determine its specific latitude and longitude for use in radius searches. Once the latitude and longitude have been determined, each agent is assigned to a neighborhood of the city for display in the city level view.
View: Search Widget
Even though it is a smaller element of the page physically, the search form combines a significant amount of functionality with two different modes of search — a dropdown city selection list and a results box. All of these functions need to integrate with the rest of application and not invoke a page load. In order to accommodate that level of functionality — and to respect our partner Fallon’s design intent — we built this portion of the application in Adobe Flash.
Controller: Application API
The controller is the portion of the page logic that bridges models and views. It schedules contacts to the database and updates all views when the application’s state changes.
Results
“Our end-to-end, big-picture vision was a valuable asset to Fallon and Travelers,” said Sierra Bravo programmer/analyst Ben Dolmer. “Our front-end and back-end developers kept in synch as they worked with Fallon’s designers and interactive producer. Together, we began the project with a clear end in mind.”
As searchers in densely-populated areas tend to home in on their neighborhoods, we had the idea to cluster multiple agents and offices. From these manageable clusters, searchers get the geographic details they need to make a convenient choice.
The data feed is automatic; each new agent is literally on the map as soon as they’re entered into the database.
Visitors entering the Find an Agent site are welcomed by a Flash video of the U.S. map and a personal hostess giving instructions on how to proceed in using the site. Basically, if your city is on the map you’ll see a red umbrella — Travelers logo (you are here). If your city isn’t on the big map, you are instructed to type in your address. Here you can also specify how far you’re willing to drive to meet with an agent. The guide/voiceover also instructs users to type in an agent’s name, if known.
By clicking a city (red umbrella) on the big U.S. map, users jump to the next screen – a map of their city. This time, there may be multiple umbrellas — these represent different agents within the area to choose from. If there are multiple red umbrellas, users make a choice that best suits them.
At any point during the search, users can specify whether they want personal insurance or business insurance — from each, users can select from a drop-down list of subcategories. Click on an office/umbrella and your mouse exposes their street address, and you can click to get directions to or from the location — all piggybacked on top of GoogleMaps.
Travelers’ success is built upon an ability to provide innovative insurance and risk protection products and services in-synch with their customers’ needs. Sierra Bravo and Fallon have furthered Travelers’ success by putting them on the Find an Agent map.