Chapter 2

Design Audit

Chapter 2

Design Audit

Chapter 2

Design Audit

LE'S START AT THE BEGINNING

What is a design audit?

A design and UX audit is a comprehensive evaluation of a product's user interface, functionality, and overall design.

A design audit is like a magnifying glass for your brand's visual elements. It takes a hard look at everything your company puts out there, ensuring your brand's image, vibe, and messaging are rock-solid and consistent across the board. You want your audience to know it's you, whether they're scrolling through your website or browsing your ads.

In short, with a design audit, we want an overview of where our design is inconsistent and inefficient.

A design audit isn't just a nice-to-have; it's essential for any brand that wants to stay ahead of the game. Here's the deal: you need an overview of the product to start with the design system.

A design audit isn't just a nice-to-have; it's essential for any brand that wants to stay ahead of the game. Here's the deal: if your design is all over the place, you're basically shooting yourself in the foot. Confused and frustrated users are more likely to bounce, which means your conversion rates are going to tank. That's not exactly what you want, right?

A design audit isn't just a nice-to-have; it's essential for any brand that wants to stay ahead of the game. Here's the deal: you need an overview of the product to start with the design system.

benefits

Why should you conduct a design audit?

Why should you conduct
a design audit?

A design audit and the resulting improvements can increase profits if done well.

Complete overview

A design audit identifies inconsistencies, pinpoints channels that don't meet quality standards or follow brand guidelines, and helps understand and improve processes for future branding enhancement.

Improved user experience

By identifying UI and UX issues, a design audit paves the way for smoother, more enjoyable user interactions with your products or services.

Consistency

Consistent visual and textual communication makes a brand recognizable, reliable and trustworthy. It’s one of the foundations of successful branding.

Unbiased perspective

Outsourcing the audit to an impartial third party provides an objective assessment, free from internal influences or biases.

Key components

What does the overall identity look like?

Why is the cart abandonment rate   so high?

Why the hell aren't people finishing key user flows?

Why are people not completing   

key user flows?

Why the hell aren't people finishing key user flows?

Are the design, color palette and typography consistent throughout   all materials?

Are the design, color palette and

typography consistent throughout   

all materials?

What do the visuals communicate and are they in sync with our target audience and our business objectives?

What do the visuals communicate

and are they in sync with our target

audience and our business objectives?

What do the visuals communicate and are they in sync with our target audience
and our business objectives?

User Flow Analysis

Figure out how users move through your product. Spot the bottlenecks and dead ends, and then smooth them out for an excellent user experience.

Visual Design Assessment

Check out your typography, colors, layout, and icons to ensure they're easy on the eyes and consistent with your brand. If your product looks like it was designed in the '90s, it's time for a facelift.

Information Architecture

If your users can't find what they're looking for, they'll just give up and move on. So, make sure your content is organized in a way that's easy to navigate and makes sense.

Heuristic Evaluation

Think of this as the Ten Commandments of UI design. It's a set of guidelines (like Nielsen's Ten Usability Heuristics) that'll help you spot any glaring screw-ups in your interface. It's not rocket science, but it's a damn good place to start.

Usability Testing

This is where the rubber meets the road. Watch real users play with your product like lab rats and see what problems they run into. You'll be amazed at what you discover when you watch people fumble through your interface.

Performance Evaluation

Test your product's speed, responsiveness, and overall performance to ensure it doesn't leave users frustrated and cursing your name.

Accessibility Evaluation

Make sure your product follows guidelines like the Web Content Accessibility Guidelines (WCAG) and doesn't leave anyone out in the cold.

SECOND STEP

Start collecting materials

It's time to dive deep into the details.

I snap screenshots of everything that crosses my path. I also record the most critical user flows and processes. And, if something looks funky or awkward, make sure that it becomes the priority to fix.

Typically, I dump all the goods into Figma, scribble notes all over the place, and play detective, hunting down any visual or functional flaws.

I snap screenshots of everything that crosses my path. I also roll the camera on the most critical user flows and processes. And, if something looks funky or awkward, you'd better record that user flow too.

Typically, I dump all the goods into Figma, scribble notes all over the place, and play detective, hunting down any visual or functional flaws.

My favourite tools:

Figma

To gather all the visual stuff together.

Figma

To gather all the visual stuff together.

Loom

Record quick videos in your browser.

Loom

Record quick videos in your browser.

Dropbox

It's wise to save all the images in folders, too.

Mike

third step

Gather the material

Once you've ripped your product apart and examined every detail,

it's time to put it back together.

Create a report that outlines the problems you found, how bad they are, and how to fix them. That report is like a map to guide your team through the current product state, flaws, and mistakes.

Visual balance:

The layout appears to be unbalanced

Responsiveness and Device Compatibility

Think about …

This will make it easier to remember certain things later on and document them for yourself and others.

I really recommend that you get into the habit of doing this from the get-go. If you don’t, you’ll almost always have to do it later on once you realize that actually, you really do need those screenshots. 🙂

Product-related overview

Funnels

Checking them out helps spot any hiccups and find ways to improve things so users have a great time and keep coming back for more.

Checkout pages

It's essential to look at them to ensure they're easy to use and trustworthy and help seal the deal, leading to happy customers and more sales.

User Profile Pages

Checking them out helps spot any hiccups and find ways to improve things so users have a great time and keep coming back for more.

Information Architecture

Reviewing it makes sure everything is easy to find and navigate, so users can quickly get the necessary information without any headaches.

User Profile Pages

Checking them out helps spot any hiccups and find ways to improve things so users have a great time and keep coming back for more.

Platform Differences

Analyzing them helps understand and optimize platform-specific features for the best user experience.

Ensuring it's fast, accurate, and user-friendly help users find what they need without frustration.

Responsive Breakpoints

Reviewing these ensure a seamless browsing experience for all devices.

Ensuring it's fast, accurate, and user-friendly help users find what they need without frustration.

Components

Analyze all components to ensure consistency. Check for hard-coded values or duplicated components.

Branding materials

Don't forget to compare other branding materials.

Details

Unify separate component screenshots for a complete overview

Avatar

Badges

Banners

Buttons

Cards

Checkboxes

Data viz

Presentations

Forms

Images

Input fields

Lists

Carousels

Dropdowns

Tooltips

Illustrations