doing a site ui audit

written by
Bri Martinez

Website building is a process that we can break down into three parts. Part 1: having a strong foundation with the IA (information architecture). Part 2:  supporting the IA with thoughtful, intuitive wireframes with components and paths to guide users to their end goals (UX). Then lastly part 3 is when we use elements, visual cues, and features that users can easily interpret (UI).

Typically over time the components which were originally built for a company’s audience or goals no longer apply. Or there might be too much style flexibility so that the site loses hierarchy, leading to confusion regarding how a webpage should flow. For example, image cards with a CTA (call to action) where a single icon worked as one row. But because of multiple departments and people it now has 8, which overcomplicates the design and confuses the user (can you imagine looking at 8 boxes all with buttons that compete for attention?).

“It’s important for a design team to review the components that were initially built, and see how they might be improved upon, to ensure the goals of the stakeholders continue to best align with the user on the site.”

There are different ways to do a UI audit and here are our favorite tips to do it right. 

Design patterns

One way to audit a the site is by clicking through it and making notes. I prefer taking screenshots of each section to group them together using handy-dandy software. It’s easier to catch any visual and stylistic inconsistencies since they stand out much quicker as a grouping instead of as individual pages. It also provides the opportunity to focus on that specific component rather than a whole page.

Webpage context

While you’re clicking and assessing each section for comparisons to other site areas, it’s important to make sure that you’re paying attention to what the content on each page is about. You might have a content block for listing items out that may not work with the content the client needs to show on that page. Is there another pre-existing layout that aligns better with the information provided?

Or is this the opportunity to discuss and strategize an updated or new component that improves the overall experience? While it’s great when there’s a existing component, we always want to make sure that we’re giving the best experience possible.

And lastly, this is the one time you get to say, the customer isn’t always right. Often website stakeholders are NOT their users and they need to be reminded of that fact. Always make sure the user’s best interests are in mind.

Key Takeaways

Look at all the components and how they’re being used across the site to make sure that they follow the same use patterns, look consistent in style and design, and make sense with the context of how it’s being used. 

• Group sections of all the webpages on the website by taking screenshots of them and putting them side by side in a program like XD or Photoshop or Figma, etc. This will make it easier for comparison.
• Pay attention to style inconsistencies, whether it be color use, typography, CTAs, etc.
• Understanding the content on the page will give you better context to whether you’re using the right component layout or not.
• Don’t be afraid to recommend a new design or ways a component can be improved to better accommodate the content that needs to be displayed.
• Make sure the user’s best interests are aligned with the business goals of the stakeholders, not the other way around; the goals of a business can’t be met if a user struggles to use their product.

• Design