Getting Out of Tech Debt

Technology
Getting Out of Tech Debt

Alex Crossman

Senior Front End Developer


"Our primary goals for the most recent redesign were to tidy it up and make it more maintenance-friendly than the previous version, while minimizing tech debt."

Getting out of tech Debt

A few years back, as a fresh-faced new hire, I was tapped to handle the front-end development for the redesign of a major credit card client’s website. Recently, I got the chance to overhaul the same site, this time around armed with more experience and knowledge.

Our primary goals for the most recent redesign were to tidy it up and and make it more maintenance-friendly than the previous version, while minimizing tech debt. The old site went through so many unexpected changes and refreshes that it ended up feeling like a kludge; one band-aid solution after another. We wanted to wipe the slate clean and start fresh.

The timing was also fortuitous. There are plenty of nifty tools and features available to us now that make development and maintenance a lot more efficient, and this project presented a perfect opportunity to utilize them.

Emphasizing Accessibility

Above all else, we wanted to prioritize web accessibility. Accessibility has been getting a lot of attention in developer communities lately, and it was also a priority for our client. The redesign allowed us to code in accordance with best practices from the ground up, which effectively eliminated the need to restructure code or write extra functionality to meet the accessibility standards we were aiming for.

Streamlining the Process

One of the biggest steps towards efficiency and hassle-free maintenance was simplifying and streamlining the content and layout of the web pages. This meant that once the base structure was developed, it could serve as a foundation for the rest of the pages. We also increased our utilization of partial views for any features were not shared across the site. A partial view is essentially an independent block of code that can easily and safely be inserted into existing pages, as a way to componentize or modularize a feature. This helps keeps the code organized and easy to update in the future.

Finding the Right Framework and Tools

This redesign also used a different front-end framework than the version it replaced. Back when we were developing the old site, Zurb Foundation was the hot new thing. Zurb seemed like a great idea at the time, but in hindsight it caused some issues. As rounds of revisions piled up, we basically customized the framework into oblivion to force it to do what we needed. This time around we went with Bootstrap, which does almost everything we need out of the box.

Along with this, we’re using Webpack to manage our scripts. It helps us keep our Javascript organized, independent from one other, and neatly bundled. We also created a custom font to manage the icons and SVGs that we use across the site, which improves performance while allowing scalability. Additionally, we’re using spritesheets more extensively than before because we can fold a spritesheet generator in with the rest of the tools we’re using. This means fewer server requests and a faster load time.

Building a Better Experience

This redesign was much needed. The site structure is now cleaner and more sensible, and those qualities make it easier to update. Because our scripts and styles are more modular this time around, it will be easier to make updates without impacting other portions of the site. Altogether, we’ve gone a long way toward reducing future tech debt—i.e., we’ve been making thoughtful decisions now that should keep the site’s eventual maintenance simple, saving us time and money down the road.

After the site was launched, I decided to run Google’s Lighthouse auditing program against it to see how we fared. We scored 100/100 on accessibility and one of our ultra-optimized pages scored 98/100 on performance. This is a huge deal. The super slimmed-down page is only 273kb in size, whereas the average webpage these days weighs in at 2-3mb. This was a crucial milestone to hit because this particular page is often served to devices with poor network connections, and a light site with a fast load time is key to retaining our site’s visitors’ attention.

Being able to develop the front-end from scratch with a framework like Bootstrap made the site really accessible with less “hackery” and fewer unorthodox workarounds. We got a second chance to make a first impression. And, I think, we nailed it.

SHARE ARTICLE:

Archer Quarterly
From Our Brains to Your Inbox

Get the latest news, insights, and industry analysis from The Archer Group.


Contact Us

We're a full-capability digital and brand agency that delivers on analytic, strategic, and content needs for a range of awesome clients. And we love what we do. Any other questions?

Your Name

Your Email

What can Archer do for you?