Getting Out of Tech Debt
"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.
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.
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.