As designers we often, if not always, need to make sure the developed product looks and behaves as we designed it. This review, the design review, is a crucial step and should be included in any product design process.
In this type of review the designer checks the various experiences he or she created, to make sure their implementation looks and behaves as expected.
To make this process easier and more efficient, I created a template I’m happy to share with you guys. It should help you manage your design review more easily, and not miss any important steps.
Here it is — you can scroll down to see the entire document.
Let’s break it down
- Date: note when you start the review since things might change later on.
- Epic/Story/Marketing: this is the name of the feature or marketing material you’re going to review.
- Mockups: include a link to your design in Zeplin/Figma/Invision or whichever tool you’re using.
- Product managers/marketing owners: the relevant owners of the feature whose design you’re going to review.
- Designers: the designers who were involved in the design process (name all of them, even if they had a small role).
- Reviewer: the designer who’s going to perform the review.
- An image of the reviewed feature: well, you know what they say about the worth of one picture.
- Severity: this indicates how significant is the impact of issues found in the review on the overall user experience. There are 3 levels of severity:
Low severity means the issue doesn’t affect the total experience and as a user, I can still perform all the actions I need to. For example — an inaccurate spacing between an icon and text on a button.
Medium severity means the issue might affect the total experience and as a user, I might come across some problems. For example — missing an icon inside a button.
High severity means the issue affects the entire experience and as a user, I’m having trouble completing my tasks. For example — a button that isn’t working at all.
- What’s wrong: describe the issue/s you found as clearly as you can without using any design jargon. This will ensure anyone who reads your review will be able to understand it (even PM’s).
- A screenshot of what’s wrong: this is quite self-explanatory. Try to only capture the actual issue in order to reduce visual load. If you’re using mac, cmd + shift + 4 is a useful option.
- A screenshot from the mockup: this is needed to demonstrate how should the feature/element actually look like. I recommend cropping the mockup in a similar way to the previous screenshot, for easier comparison