Case Study: Customized WordPress Redesign and Refactoring @ Armormax

After seeing the success of the work AUQ had done to done to improve traffic and conversions, Armormax.com asked us to redesign and refactor the code of their site. While already good from an appearance standpoint, the site had been created many years previously and added to piecemeal. It needed a ground-up rebuild and refresh to maximize its performance potential and allow the Armormax team to more easily implement the numerous ideas they have to make it more informative and appealing to visitors. They also wanted us to add enhanced menus to improve both navigation and visual appeal, as shown here:

Custom enhanced “megamenus” improved navigation.

The Client

Armormax is one of the world leaders in bulletproof vehicle upgrades, including armor plating and bulletproof windshields, along with many other advanced security features. They have numerous manufacturing and installation facilities in the Americas, Europe, Asia, and Africa.

The Challenge

While we had already updated the legacy code where it hampered SEO efforts, there was still a lot scattered throughout the site. It was harder to update than it needed to be, and while the PageSpeed scores had improved considerably after our previous work that focused on the “low hanging fruit” that would provide the maximum ROI, there was still room for improvement. We also needed to implement a more modular approach so that adding or removing elements from pages would be a faster process. The decisions we faced were:

1. Where to start?
2. What to prioritize?
3. Upgrade the existing site, or build a new site in parallel and switch over when complete?
4. If creating a new site, should we build it using our custom high performance framework, or start with the existing code and adapt that to our components when there was a substantial benefit to be gained?
5. Should we build custom Gutenberg blocks or continue with more the existing Advanced Custom Fields approach?

A modular approach allows elements to be added, moved, or deleted easily.

The Approach

While detailed planning is always needed at the start of a major project, the Armormax refactoring called for finalizing even more details than normal before beginning coding. We knew that we wanted to continue to use WordPress as the content management system, but everything else was open to evaluation. We combed through every site template and custom function and categorized them as followed:

• Must upgrade due to outdated code
• Must upgrade due to code that was difficult to maintain
• Needs to be redesigned for better usability or visual appeal
• Might be OK with only minor changes
• OK (mostly pages we had created ourselves or already reworked)

Once this was done, we were in a position to analyze the data and decide on the most effective course of action. From looking at our data, it was clear that the vast majority of code in the OK or Mostly OK categories was that which we had created ourselves or previously updated. This meant that an in-place upgrade was not going to work. Too many changes to the core of the code were needed to enable the site to remain functional while work was ongoing. (We always use a development environment rather than working directly on a live site, but in this case the changes were so fundamental that there was no way to deploy them in stages, which eliminated the primary benefit of that approach.)

We decided that the only reasonable solution was to build an entirely new site using our custom starter theme and framework. The client was already comfortable with using ACF, so there was no need to switch to Gutenberg, which would have significantly increased both the time and cost. All pages that required new designs were first modeled in Figma, before being evaluated by the developers and the client. No coding began on a section until the design was finalized and approved. The client is very hands-on and technically knowledgeable, so we collaborated closely with them throughout the design phase, ensuring that their goals were always the guiding factor.

All new designs were first prototyped using Figma.

While many of the pages look and function quite similarly to the old site, almost all of the server- and client-side code is new, and approximately 80% of the markup and styling was rewritten to take advantage of modern technologies and standards, especially on mobile devices.

The Outcome

The new site came together with very few major issues, and finished slightly ahead of schedule. The detailed planning and design meant that almost every obstacle had already been discovered and accounted for before work began. Continuous communication with the client to ensure we were in sync with their goals prevented rework after completion. PageSpeed was substantially improved, as was the ability to easily make content changes. The client loves the new site, and the fact that we can implement their constantly expanding list of new ideas at a much more rapid pace. “Back end” improvements mean that content updates are much faster and easier for custom components, even when the page may look just the same as it did before. They have lots of great ideas, so the site will continue to grow and evolve as our design and development work fuel the search results and visitor conversion improvements.