LE'S START AT THE BEGINNING
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 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 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
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.
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?
What does the overall identity look like?
Why is the cart abandonment rate so high?
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
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.
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
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.
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
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.
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
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.
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
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.
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
Performance Evaluation
Test your product's speed, responsiveness, and overall performance to ensure it doesn't leave users frustrated and cursing your name.
Test your product's speed, responsiveness, and overall performance to ensure it doesn't leave users frustrated and cursing your name.
Accessibility Evaluation
Accessibility Evaluation
Make sure your product follows guidelines like the Web Content Accessibility Guidelines (WCAG) and doesn't leave anyone out in the cold.
Make sure your product follows guidelines like the Web Content Accessibility Guidelines (WCAG) and doesn't leave anyone out in the cold.
SECOND STEP
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.
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.
Figma
To gather all the visual stuff together.
Loom
Record quick videos in your browser.
Loom
Record quick videos in your browser.
Loom
Record quick videos in your browser.
Mike
Mike
third step
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.
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.
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.
1
1
2
3
4
5
6
7
8
9
1
Visual balance:
The layout appears to be unbalanced
2
Responsiveness and Device Compatibility
Think about …
This will make it easier to remember certain things later on and document them for yourself and others.
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. 🙂
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.
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.
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.
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.
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.
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.
Information Architecture
Reviewing it makes sure everything is easy to find and navigate, so users can quickly get the necessary information without any headaches.
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.
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.
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.
Platform Differences
Analyzing them helps understand and optimize platform-specific features for the best user experience.
Platform Differences
Analyzing them helps understand and optimize platform-specific features for the best user experience.
Search
Ensuring it's fast, accurate, and user-friendly help users find what they need without frustration.
Search
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.
Responsive Breakpoints
Reviewing these ensure a seamless browsing experience for all devices.
Responsive Breakpoints
Reviewing these ensure a seamless browsing experience for all devices.
Search
Ensuring it's fast, accurate, and user-friendly help users find what they need without frustration.
Search
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.
Components
Analyze all components to ensure consistency. Check for hard-coded values or duplicated components.
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.
Branding materials
Don't forget to compare other branding materials.
Branding materials
Don't forget to compare other branding materials.
Details
Unify separate component screenshots for a complete overview
Avatar
Avatar
Avatar
Badges
Badges
Badges
Banners
Banners
Banners
Buttons
Buttons
Buttons
Cards
Cards
Cards
Checkboxes
Checkboxes
Checkboxes
Data viz
Data viz
Data viz
Presentations
Presentations
Presentations
Forms
Forms
Forms
Images
Images
Images
Input fields
Input fields
Input fields
Lists
Lists
Lists
Carousels
Carousels
Carousels
Dropdowns
Dropdowns
Dropdowns
Tooltips
Tooltips
Tooltips
Illustrations
Illustrations
Illustrations
Learn
About me
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2024 The Design System Guide by Romina Kavcic
Learn
About me
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2024 The Design System Guide by Romina Kavcic
Learn
About me
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox.
No ads, no fluff.
© 2022 - 2024 The Design System Guide by Romina Kavcic