If you’re the only designer on your team, this template can help you do a self-design review of your work. — Julie Chabin (@syswarren)

👀 Project

What is this review about?

❓Initial problem

What is the initial user problem this design will help?

🎯 Goal(s)

Is there a measurable impact? Will there be a test?

🔗 Link(s)

Links to designs/docs

<aside> <img src="/icons/view_gray.svg" alt="/icons/view_gray.svg" width="40px" />

</aside>

<aside> <img src="/icons/help-alternate_gray.svg" alt="/icons/help-alternate_gray.svg" width="40px" />

</aside>

<aside> <img src="/icons/bullseye_gray.svg" alt="/icons/bullseye_gray.svg" width="40px" />

</aside>

<aside> <img src="/icons/link_gray.svg" alt="/icons/link_gray.svg" width="40px" />

</aside>

Accessibility

• [ ] Texts lines are between 50 and 75 characters - ref
• [ ] Font sizes are not too small (<12px)
• [ ] Appropriate contrast ratios - ref
• [ ] Design is accessible on small screens
• [ ] The solution can work on older devices

Copy

• [ ] Copy is easy to understand and concise
• [ ] Positive and guilt-free tone of voice
• [ ] No acronyms without definitions
• [ ] Avoided location-specific jokes or idioms
• [ ] Buttons and links are action-oriented

Content

• [ ] It’s easy to understand what the screen is about
• [ ] Important information is shown first
• [ ] Lists are used where needed
• [ ] Important words are in bold
• [ ] Visual hints help users know what to do

Layout

• [ ] Elements are aligned on the grid
• [ ] Padding and margins follow guidelines
• [ ] Sections are visually separated
• [ ] Not every button is a primary button
• [ ] Consistent radius, shadows, and borders

Visuals

• [ ] Visuals help users’ comprehension
• [ ] Visuals have alt text where needed
• [ ] There is no, or limited, text in visuals
• [ ] Icons cannot be misinterpreted
• [ ] Visuals don’t distract users

States

• [ ] Buttons have hover / active / focus states
• [ ] Focus states for new elements
• [ ] Error states for new elements
• [ ] Success states are designed
• [ ] Empty states are designed

Components

• [ ] Reused or updated existing components
• [ ] Components use max 3 font-sizes
• [ ] Spacings follow guidelines
• [ ] New components follow guidelines
• [ ] Different states are designed

Forms

• [ ] Input text fields have clear labels
• [ ] Input text fields have placeholders
• [ ] Helper texts are available when necessary
• [ ] Error states are designed
• [ ] Success states are designed