Unlike a UX Audit which focuses on the functionality and performance of a digital product, a User Interface Audit helps us to analyze how a website can be visually improved. Especially, when a website has been primarily designed and developed on a desktop, smaller screens can be easily overlooked.
At ZEAL, we are frequently performing UX and UI Audits for our clients, but also for our own products. Today, I am using our company website CodingZEAL.com as an example to show how we conduct UI Audits.
Our website has been designed by our amazing Director of Design, Amy Dutton on a canvas of 1440px width. I implemented her designs desktop-first in Webflow and adjusted them to more extensive and smaller viewports. In the past couple of months, our team has been using the site on mobile devices on all kinds of devices and noticed some visual irregularities that could need some love.
Any audit helps you to go through a product step by step and take a closer look. Spending time with a product so intimately allows you to notice more than when you skip through it on a regular day. A UX or UI Audit can help you to create a roadmap for improvements by discovering and listing observed issues, and making recommendations on how to improve them.
At the end of the audit, you can go to your client and say, “I discovered the following issues, and these are the opportunities for improvement.”. You will be able to explain what you did, how you did it, why, and more importantly, how you can help your client’s users have a better experience.
Choose your tool. An audit can be done on paper or in a digital spreadsheet. I love to use Airtable, which has customizable field types and helps me to streamline just about everything in an efficient, fun, and colorful way.
Here are some steps you can follow for your first Site Audit:
Step 1: Transfer the website’s structure
Go to the website you want to audit and transfer the structure to your spreadsheet. You can either go through the website yourself or download its sitemap. You want to take a look at all the pages your customer could land on and add them according to their hierarchy.
Step 2: Insert the URL
While you are on a page, copy the URL and paste it into your spreadsheet. That way you allow your audit’s reader to retrace your steps and look at the issue themselves.
Step 3: Write down what you notice
Go through each page either on your phone or by looking at the mobile version of your site in inspect mode and write down your observations of things that could be improved (use one cell per observation, so you can add one recommendation per issue).
Your observations could look like this:
“The body font is straining to the eye and is too small”
“Vertical spacing between sections and elements is not even and seems too big.”
Tip 1: Even the simplest observation can be important. If you notice it, your customer might notice it too.
Tip 2: Do you bump into a UX issue while analyzing the UI? Add it as well. This issue might get an even higher priority when you make your recommendations.
Step4: Capture the current state with a screenshot
Add a screenshot of the discovered issue to your spreadsheet to capture its current state.
Step 5: Add your recommendations
While I’m discovering an issue, I already think about a solution. Sorry, that’s just how my brain works 🤯 Don’t jump to conclusions too fast, but if you work in the same way, add your recommendations right after adding an observation (this step can also be taken later after you rated the issue’s severity and the overall mobile-friendliness of the page).
Step 6: Rate each issue’s severity
Add a severity rating to each issue. I modified the Nielsen Norman Group’s severity scale for usability tests to fit my audit:
1 = Cosmetic issue: No need to be fixed unless extra time is available on the project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix
Tip 3: This rating might be a little subjective. If you have doubts, pull in a colleague or two and treat this step like pointing stories. Then use the average to rate the severity.
Step 7: Rate each page for mobile-friendliness
After rating all issues for one page, you should have a good overview of the page’s overall mobile-friendliness. If you decided to use our Mobile Design Audit template, go ahead and fill in the fun star rating for mobile friendliness.
Step 8: Keep track of your issues and add a status
Fill in the status of the issue you’ve found. At the time you fill in the spreadsheet, each issue starts as a “To Do”. This column will keep your team and client aligned while working through it.
Present your findings to your client and explain why you audited their site, how you did it, what you discovered, and what you recommend. Give them time to have a closer look and get approval to start working on the issues. Thanks to your severity scale, you can prioritize issues easily now and create tickets for them. Start with the issues with the highest severity and pages with the lowest mobile-friendliness.
“The world is full of obvious things which nobody by any chance ever observes.” - Sherlock Holmes
A UI Audit allows me to spend time with a product and take a closer look. No matter if you start with desktop or mobile-first, you will have to adjust to the other viewports and review your work multiple times. While going through an audit, I’m able to make observations that are not obvious to everyone. Some things can feel like nitpicking and others need immediate fixing. I learned not to be afraid of discovering old mistakes, but to embrace the iteration. I enjoy the visual deep dive which will train my eye to spot opportunities for improvement earlier next time.
Is your site due for inspection and would you like us to conduct an audit for you? Let’s Talk! Together, we will make your site more mobile-friendly in no time.
Are you ready to build something brilliant? We're ready to help.
.jpg)
