Process

Requirements and Approach

I went page by page cataloging all the info I could find. My plan was to lay it all out, then pare it down to a system that made sense. From there I’d make any further necessary changes, such as button sizing and interactions being standardized and fonts being used in an intentional way.

Cataloging the fonts was a long process

I slowly figured out we had so many glaring design issues. Working with our developers, I instructed them to make changes page by page. They worked to recreate a theme that could be dropped onto any page to speed up the process. H1s, H2s, H3s, body and paragraph text all were standardized. There was no more 22pt but ALSO 20pt paragraph text serving the same purposes.

Updating the home page

Problem statement

The AL website was built, but not coherent in any sort of way. I needed to bring order to the chaos and create a cohesive design. The first pass for me is always accessibility, font size, and noise reduction.

Solution:

Identifying problem areas throughout the entire website, I had a plan to make changes. When I realized these changes would probably be needed to be changed again at some point I knew I had to create a design system that we could follow for the immediate updates, but one that we could also set in stone for any changes going forward.

Before & after of the ATF on the homescreen

Impact Matrix

The landing page is how most of our clients are going to find us, and this is proven true by Google Analytics. Some of our clients have users jump to a specific page depending on their search criteria, but our home page is the most viewed page on the site, so I started there. Simplifying and modernizing was my goal, with attention being paid to time spent updating and developer time. Small companies have small budgets. After a full site audit, I created an impact matrix identifying low effort / high reward points of attack, presented it to the team, was given a time & money budget, and got the go-ahead to start work.

Impact Matrix

Redesigning the Header

Problem statement

The Header stood out to me as a chance to have a significant impact right off the bat.

Solution:

The new Header didn’t have to be anything fancy, just clean, easy to see, and taking up less real estate than the current Header. Get rid of the unnecessary underscores that appeared at random, change the colors, and use a font that was simple.

Header redesign

While I was “under the hood”, I wanted to address the inaccessability of the current primary color. I chose an orange that was close to the current one, but that would pass accessibility tests. This was now our new primary color. The logo would remain the same original color, but all text going forward would need to be using the new orange. I also wanted to shift to an off-white, and an off-black, to make reading easier for the user. I was instructed to have a call-out to download the company’s e-book from Amazon as well. I decided to place it above the actual Header, with no action by the user to be able to dismiss it. I then created the new Header using the new grid system I also implemented. The AL website doesn’t need to be flashy, it needs to be focused.

Creating Cards

Problem statement

There was one section of the home page that I wanted to tackle, and I saw this as a good opportunity to create cards that could be reusable in other sections of our website.

Solution:

Creating cards and standardizing shadows was going to be a great addition to the Design System. Breaking down this section and seeing how our other competitors and clients handled similar sections of their sites led me to figure out appropriate sizing and styling.

Before and after of the Our Services section

The icons we had in place were terrible quality jpegs, compressed, and blurry on the website. I retraced them in Figma, saved them as .svg, and now we had direct clones that could be scaled to any size. I then created cards using guidelines from Material Design for shadows.

Next steps and final thoughts

There’s still quite a bit of work ahead, and I need to carefully manage hours for both myself and our developers. That said, the site is already easier to navigate, and we’re seeing improvements in SEO rankings - both through RankMath on the backend and Ahrefs on the front end. This reinforces how closely UX design ties into SEO performance. With our new design system and templates in place, future updates will be much quicker, allowing us to move forward at a faster pace and modernize the site efficiently.

Summary

Creating a design system for an already-existing website has its own challenges, but the impacts are more noticeable and arguably more impactful, both for stakeholders and users.

Key contributions

Created design system

Instructed designers to make the appropriate changes

Created a backlog of updates that will be pushed at a faster pace now that we have templates and standardization in place