Homepage Rearchitecture


Background

The Boostmobile.com homepage was originally a single flash container (yuck). Building the panels in flash was a very time consuming process often taking up to several days depending on how complex the animation was. Because of this we frequently had to outsource the panels to an agency at a cost of $5-10k a panel. At 2-4 panels a month this was extremely expensive.

I proposed that we modernize the homepage and was able to re-create the flash experience using HTML5 and jQuery. Working with native HTML cut the time required to create and update panels considerably and we were able to take over that function entirely in house. Eliminating the flash dependency also greatly opened up the quantity and type of content we could put on our homepage which made for a better user experience.

The transition to HTML5 also gave us the ability to customize the homepage experience for visitors/customers and for english/spanish users. Managing 4 different permutations of the homepage turned out to be a fairly tricky and error prone process so in a subsequent update I figured out how to build a preview mode that would allow our business team to easily review each variation prior to production.

Benefits

  • Productivity & cost savings. Panel creation went from 3-5 days to about 4 hours. As a result of this we were able to pull panel development fully in house eliminating the expensive agency dependency. We were also able to product 2-3 times as many panels per month which made for a happy marketing team.
  • Search engine optimization improvements. Search engines could originally see NO content on our homepage, the single most visible page of the website. This project turned each section into a highly SEO content rich area. We noticed an immediate and significant boost to our search traffic and visibility.
  • Targeted segmentation. This change also allowed us to serve highly targeted marketing content to customers/prospects as well as English/Spanish users.
  • Preview Mode. With this capability, QA and the business owners were able to do end to end testing of our homepage which eliminated a large source of errors
  • Automated analytics. The homepage required a lot of special analytics for tracking marketing campaigns and panel placement. I was able to automate that component entirely

Code Examples

Javascript

GitHub: View

XML

GitHub: View

XSL + HTML

GitHub: View

Screenshots

  • homepage-1
  • homepage-2
  • homepage-3
  • homepage-4

Technologies Used

  • HTML
  • CSS
  • Object Oriented Javascript
  • jQuery
  • XML
  • XSL