DJO Global - 2019

Out with the old

I’ve worked for DJO Global for 5+ years, both in marketing and e-commerce. I originally inherited the website when I started in the marketing department. Over the years the site has grown and changed. The look and feel had been updated a couple of times, first to make it responsive, and then to update the branding. The site had grown bloated and difficult to manage as new content and functionality was added. An update to the DJO brand offered a chance to overhaul the both the look and feel and the functionality.

Changing the tires on a running car

DJO is a fast paced environment and I am one of only two resources for web projects. It’s not the kind of company where content can be frozen while web updates are made. Any updates to the website have to be made in parallel to the constant stream of regular work. The updates would have to go on a staging server while the production server was still getting new content and features.

Building on the good

First I researched analytics to find out how traffic was flowing through the site and what could be done to relieve any pain points. Data from Google Analytics and Mouseflow provided the basis for UX improvements. Once this was complete new navigation and wireframes were created to address any issues found in the analytics research.

In addition to creating and entirely new Drupal theme I also stripped out legacy fields, JS, CSS, blocks, views, etc. The idea was to make the site more modular and easier to maintain and update.

The new branding was incorporated into the new theme which also included LESS based CSS with the branding guidelines stored as variables. The CSS was built using the same class names as DJO's e-commerce sites so anyone who works on one site should be able to work on all of them.

All of the updates had to be exported from the staging server and laid over the existing production content. This required careful planning and tracking of all changes. The go-live process required several hours to carefully bring over new views, blocks, context, menus, etc.

A full list of updates:

Content Updates

  • New brand pages
  • New hero image space and new imagery per brand
  • New category menus for quicker navigation to the top several products
  • Customizable, sortable, products cards for featured products
  • New area for featured products videos.
  • Existing content has been kept but the brand specific news blurbs have been removed until they are no longer out of date
  • New Category Pages
  • New pages for Bracing and Supports, Recovery Sciences, Surgical, Footcare and Healthcare Services
  • Customizable, sortable, products cards for featured products across several brands
  • Featured Videos pulled from all relevant brands
  • New about section landing pages
  • Content has been updated for the top level pages of the about section
  • Better product sorting and filtering on the product category page
  • Products have been sorted and tagged to ease location
  • More filter categories have been added to help narrow down choices
  • Updated Product Detail Pages with a new tab structure for more content and cleaner hierarchy
  • New content across much of the site including brand pages, category pages, about pages and many of the product pages

Design Updates

  • Complete design overhaul to align with the DJO Global brand and modernize the look and feel
  • New home page with three panel banners, featured videos, and customizable press and events.
  • New page templates for brand pages, category pages, product category pages, product detail pages, and about pages.
  • New product hero banners
  • New customizable product listings per brand and category page
  • New customizable video blocks for home, brand and category pages
  • Entirely new site theme with overhauled HMTL, CSS, and JS

Navigation Updates

  • Products can be reached faster with more links to deeper content
  • Products are categorized by body part, category and brand
  • Brand level secondary navigation has been replaced with a more robust global nav
  • Because of this change some links have been recategorized and placed in the global header.
  • The DonJoy brace registration and warranty forms have been moved to “patients” tab
  • Surgical and Chattanooga education has been moved to the resources tab
  • Customer support has been moved to the global nav instead of being repeated in each brand nav.
  • Locate a sales rep and find a surgeon have been moved the the global nav as an icon in the top right
  • Direct links to DJO and Office Care order tracking under icon in top right

Technical Updates

  • Numerous changes to the Drupal CMS
  • New database calls to collect relevant product data and display it throughout the site
  • New content tagging for more specific parsing of relevant content
  • Standardized templates for outputting common elements like products and videos
  • Many new content blocks
  • All new theme using LESS based CSS with variables for all relevant elements (margins, colors, heights, widths, buttons, etc)
  • More flexible integration between the theme and other Drupal modules like Display Suite and Views
  • New JavaScript for UI elements like the global nav and banner menus
  • Removed redundant CSS
  • Prepared for future CSS improvements as technology changes
  • Removed reliance on Solr search for the product category pages
  • Replaced with Drupal Views based facets
  • Ajax refreshing with URL updates to maintain back button
  • Ability to filter out unused categories for future cleanup
  • Overall sorting controlled by a visual admin interface
  • SVG icons and logos for greater design flexibility