Visa Canada sites in JSP, XML and JSON

This site has more than 4,000 JSP pages with many include and library files. Its data lives in flat files: more than a dozen XML files and several JSON files.

visa.ca

Built with semantic HTML5 as a single-page application. The front end uses HTML5, JavaScript (jQuery) and CSS; the back end is an extensive XML flat-file database.

Development

Working with Visa Canada, Visa Global and a TBWA creative team, the Visa.ca site was transformed during my time at TBWA. We removed every Flash component (Visa Infinite had been a pure Flash application) and rewrote the code to HTML5 and CSS3.

Design

• A large corporate site for Visa Canada
• Images and icons created in Photoshop and Illustrator, with banners built from smart objects and Photoshop templates
• Several database-driven sections using XML and JSON, including Visa Perks and Visa Debit
• On-page social integration with Facebook and Twitter, and Facebook applications built with the Buddy Media suite
• Responsive sections, optimized for desktop, tablet and phone, including Small Business and Visa Perks
• A JavaScript plugin tracking every external click and menu item in new sections

Analytics

Full Google Analytics integration with dozens of goals, funnels, filters and profiles. Each department or section had its own dashboard, covering acquisition, paid search, campaign and keyword traffic, bounce rates and segment goals. Monthly reports were emailed automatically to each department head.

visainfinite.ca

Also built with semantic HTML5 as a single-page application, with an XML flat-file back end.

Development

Working with Visa Canada, Visa Infinite stakeholders and a TBWA creative team, we turned a Flash site into a modern site that works on every device and three screen sizes.

Design

• A premium Visa rewards site
• Images and icons created in Photoshop and Illustrator
• A database-driven application storing all data in XML
• Social integration with Facebook and Twitter

Analytics

Full Google Analytics integration with dozens of goals, funnels, filters and profiles. Visa Perks pages saw an 80% increase in organic search, and Visa Infinite doubled its organic search results.