HumanaOne PlanPointer built with MS Ajax

We developed a very dynamic, responsive, and adaptive UI for a health insurance plan selection tool for Humana One. The original prototype for this application was developed in Flash and our stakeholders expected the sort of responsiveness and richness that Flash delivers, except developed in ajax (with MS Ajax, specifically).

One of the more major shifts in our development came when we no longer could make use of the MS AJAX Control Toolkit widgets as designed, by writing XML and C#; instead we reverse-engineering the generated javascript so we could maintain more control over the execution inside our application. Once we had on-the-ground control over the javascript, we were able to bend it to do things we never thought were possible at the outset of this project.

We’re pleased at the results and I’d love to share with you some of details.

Overview Video:

Some more highlights of what we did in our development effort:

• Heavy use of MS Ajax as a transport layer
• All product data retrieved over WebMethod web service calls, and sent to client over JSON
• Extensive (ab)use  of MS Ajax Control Toolkit: Animation, Autocomplete, ModalPopup, HoverMenu (for tooltips), Slider
• Client-side instantiation, manipulation, and triggering of Control Toolkit controls
• Custom extended Collapsible Panel control with simultaneous x/y movement, and more callbacks.
• Browser History Management for permalinks and backbutton, using ASP.NET Futures
• Serverside JavaScript exception logging using Ajax.Logging.ExceptionManager.js
• CombineScriptsHandler to concatenate and compress the javascript files for delivery
• Coremetrics integration into all major app events
• Serious DOM manipulation and animation
• Templating engine using commented HTML to reconstruct DOM elements with XHR’d JSON data, instead of pushing all HTML in the ajax response. 7x smaller response size.
• Large performance gains using replaceHTML and setHTML
• Here’s more on our experience with UpdatePanels, ScriptMethods, delivery optimization,  a critique of documentation, support, and developer tools from our enginner Craig Andrews.  

Demo:

To test the site, visit https://www.humana-one.com/, select Lousiana on the right, hit the Plan Pointer button in the right column, and use zip code 70001.