E-COMMERCE & IMG ACADEMY: DRIVING
ONLINE SALES VIA DRUPAL, SYMFONY, ELASTICSEARCH AND ANGULAR

Danny Watts
DANNY WATTS

In my role as a strategist here at ATLARGE I end up touching multiple components of the agency, so it’s tough to decide on any one thing to share. And since this is my first time blogging in a very long time I figured it might be appropriate to cover a number of facets of our work by reviewing a few of the products/projects I’ve been involved in that are “near and dear” to me.

To keep things extra interesting, I’m going to break these up into multiple posts:

  • IMG Academy Online Registration - Covered here
  • Sun Hydraulics’ XMD Mobile App - A custom iOS/Android app that configures a proprietary hydraulic controller through Bluetooth (BLE - like iBeacons) with interactive graphs, multiple modes of operation and CAN support (j1939 - like your car)
  • Florida Studio Theatre’s Web Exchange System - An Angular-based customer portal connected directly to Tessitura (a widely used ticketing system) through its API which allows customers to facilitate exchanges of dozens of tickets in one easy workflow

 

My hopes are that each of these overviews will leave you a better idea of the depth of our technical prowess along with our commitment to delivering awesomeness in every project/product we touch.

IMG ACADEMY 

Online Registration

We’ve been working with IMG Academy for a very long time. They’ve been a critical partner in the development of our agency over the years. Through our relationship, we’ve been able to collaboratively explore new creative & technical solutions which have made waves throughout the global WME-IMG organization - setting the bar very high for its other business units.

We do a ton of cool projects with IMG and their very talented in-house team members (they basically have an entire internal agency) but my favorite project is their online registration system (internally referred to as IMGOR or “em-gor”).

IMGOR is a highly customized e-commerce application with the goal of educating potential athletes and their parents about the IMG Academy camp experience while walking them through the purchasing process to give the feeling of working directly with a camp representative.  It has seen 3.5 iterations over the past 8 years and is currently entering it’s 4th iteration (launching before their 2019 season).  

imgor

A brief history on each prior version:

  • The first was a custom PHP application that required manual CSV uploads to manage inventory and processed payments through PayPal. Orders were managed through emails. Not fun.
  • The second version was a gigantic leap from version 1. IMG deployed a MS Dynamics CRM alongside this version so we were able to create a completely automated experience where camp data was pulled from the CRM and orders were sent back to it. In addition, customers were able to not only explore camp inventory in a dynamic format but they could buy gear, arrange airport transportation and build orders for multiple campers.
  • The second (and a half) version was the precursor to version three. In this version we had a great opportunity to split test different conversion paths to learn as much as possible about the customer before work began on the next iteration.  The R&D during this iteration paved the way for a sweeping UX overhaul in version three.

 

Since the 4th version is in development (as of writing this post) and I don’t want to diminish the fun of launching something that the public has never seen I’m going to focus on what’s currently live (version 3) here.

DISCOVERY

at The start

With the base of data gleaned from version 2.5 ATLARGE and IMG team members posted up in their conference rooms with some markers and paper.  A few days later we had a very rough prototype.  From there we collaboratively built up about 50 pages of wireframes which went through a good 20 versions to ensure the strategy was rock solid. We basically lived there for 2 weeks. Off to design.

DESIGN

USER TAILORED

Like discovery, the design process was also extremely collaborative and actually involved a few different designers along with multiple production agencies who produced the killer videos that put the finishing touch on the user experience.

Number one deciding factor for attending IMG: seeing and experiencing the campus and its culture.

The solution was obvious.

The design took a new approach to the IMG Academy brand without deviating from standards.  It put forward a simplistic navigation that emphasized searching.  With years of stellar photography and video work from the nation’s best the design leaned heavily on these assets along with strong typography/taglines where relevant.

DEVELOPMENT

THE TECHNICALITIES

One of the biggest challenges with development on this project was the timeline. We had 2 months to jam this thing together and didn’t want to take any shortcuts. So we scaled up big time -- pulling our best resources onto the job. Every technical decision down to individual lines of code had to be perfect.

And there were actually three projects in one here:

  1. A Drupal 8 website with an Apache Solr engine for search. The Drupal site’s goal was to provide a completely fluid CMS that could build the designs. Everything had to be editable. This way the content could be scaled and changed without any developer assistance.  It would use Marketo for lead forms and Spredfast for contextually targeted social feeds (interspersed with our local content from Drupal). It also had to integrate with the registration system to pull inventory and pricing data onto key pages.
  2. A Symfony-based backend API to drive the Drupal pricing widgets and customer UI. We were actually able to use work from version two to make the MS Dynamics connections since it also used Symfony but it was a rebuild otherwise. The prior version used Symfony’s views and this version needed to be a REST API. The trick to this version was faceting data across a few hundred-thousand products (IMG’s inventory is very specific down to the sport, gender, age, date, etc). And it had to be instant (under 200ms) or we might as well throw the whole thing out. We tried Redis and got it working but combining multiple facets in Redis -- while doable -- is pretty ugly. Enter Elasticsearch. The moment we fed our data into Elasticsearch and started interactive with its own REST API it was the clear winner. Lightning fast responses. And the code proxy the data was super clean.
  3. An Angular frontend to ensure a fluid customer experience full of interactivity minus the usual mess in the source code that comes with state management in vanilla JavaScript. Angular proved itself as the perfect framework for the progressive linear purchasing experience. To ensure PCI-DSS compliance, we created a custom implementation of Merchant E-Solutions’ JavaScript tokenization system. This allowed us to avoid transmitting or storing credit card data directly keeping us in SAQ A-EP -- still complex but not terrible.

 

Long story short, after pushing some seriously long days and weekends across the team we finished the project on time ahead of IMG’s season. On to delivery.

DELIVERY

a grand finale

On launch, first we celebrated -- and then went quickly back to work. It was IMG’s critical sales season so optimization was our number-one priority. Through Convert.com we began running multiple AB & multivariate experiments each week to ensure we were 100% on top of conversion optimization. We were even able to run some fun experiments to settle arguments like which button color was better (it was red, we tested green, red won).

I’m not authorized to share detailed performance data but I can say that the effort overall was massively successful and seen as a leap ahead across the WME-IMG organization.

 

I hope this post gives you some insights into what we do here and how we do it!

Stay tuned for my next piece on the Sun XMD!

LIKE WHAT YOU JUST READ?

Contact Us