Product Design Lessons

Interface Design Sketching  |   Lesson #114

Auditing a Site and App


When faced with a redesign it can sometimes be difficult to know where to begin, and once you’ve started, if you’re really fixing the sites issues. We audit all of our products, review things that work well and identify things that don’t in Notable Notebooks. With Notebooks’ annotation features, a website audit can be used to share insights with a product team and put those ideas in context so they become clear. In this lesson we’ll explore what an audit is, what you’re looking for and what to do once it’s been created.

What is an Audit?

It’s simple. You can break down a page from top to bottom, highlight areas where the interactions don’t make sense, and leave notes directly on designs. By doing so, you’ll be able to help your team understand where the opportunities are that will enhance a service or website. Here’s how how we do it here at ZURB:

  1. Take screenshots of every unique page. We Use the Notable browser capture tool.
  2. Ask questions about visual design, content and usability.
  3. Create notes in Notable Annotations directly on the screenshots. (While we use Notable you can use any incontext feedback tool, or you can do it on a whiteboard with printed sheets and Post-its.

What We're looking for

We look for certain things when auditing a website in terms of visual design, usability, user perspective and opportunities to engage.


Visual design

A site’s aesthetics are important because a good look can create emotional reactions. We want to make sure it conveys the right mood while staying on-brand to the product.

For example, we check its contrast and hierarchy, looking for parts that are hard to read. We ask if the imagery is appropriate. We ponder the typography. Then we grab a screenshot and record our thoughts in Notable.


Enabling users to navigate a product, finding what they’re looking for, is critical to the product’s success. We check each page for barriers that prevent people from achieving their goals.

For example, does the navigation link to the most commonly used pages, or just the top level in a hierarchy, not matter its value to end users? What about the site — if anything — confuses people? Where do they go astray, and how many clicks does it take to perform an action?

Users’ perspective

Next we examine the site through a user’s eyes. We think about their goals, and try to enact them ourselves. What do our beta testers have to say on the matter? Without leading them, we get a fresh perspective on how people will actually use the site.


Finally we seek ways to improve users’ experience. We ask ourselves, how can the experience engage people more? Would adding (or removing) a features help users get more out of the product? Granted, it might work well enough. But how could it get better?

With all this in mind, we jot questions and potential answers in Notable to share with the team. Each set can become its own conversation as we seek to refine the product.

Next Steps

After We’ve audited and found our opportunities we can capture these in opportunity sketches. Learn more about sketching and opportunities in Lesson #39.

About the instructor


Brandon Arnold is a Foundation mastermind. He contributed several key components of the latest version of our framework, and walks you through getting started with Foundation for Emails.