Site Audit: Check About for visual design consistency

[NilakshiS]

Overview

Check the About page for consistency with the design system and document any discrepancies.

Action Items

Document the value of these properties for each of the following elements present on page. If an element on the list is not on the page, mark it as N/A or strikethrough the item.

Note: The list of elements is not exhaustive, some pages might have more elements and some elements might get repeated while checking for other values.

• [ ] Review with product and dev. Update if needed based on feedback

• [ ] Once finalized, add before and after images to the staging deck on this slide

  • [ ] if no slide has been made, make one in the staging deck

• [ ] Get Stakeholder sign-off via the stakeholder meeting slide deck.

• [ ] Color

  List of Elements

  - [ ] Heading and Paragraph Texts - [ ] Buttons - [ ] Input and Fields - [ ] Accordions - [ ] Tooltips - [ ] Infoboxes - [ ] Links - [ ] Any Remaining Page/Content Text or Backgrounds

• [ ] Typography

  List of Elements

  - [ ] Heading and Paragraph Texts - [ ] Buttons - [ ] Input and Fields - [ ] Accordions - [ ] Tooltips - [ ] Infoboxes - [ ] Links - [ ] Any Remaining Page/Content Text or Backgrounds

• [ ] Shadows

  List of Elements

  - [ ] Heading and Paragraph Texts - [ ] Buttons - [ ] Input and Fields - [ ] Accordions - [ ] Tooltips - [ ] Infoboxes - [ ] Links - [ ] Any Remaining Page/Content Text or Backgrounds

• [ ] Sizes

  List of Elements

  - [ ] Heading and Paragraph Texts - [ ] Buttons - [ ] Input and Fields - [ ] Accordions - [ ] Tooltips - [ ] Infoboxes - [ ] Links - [ ] Any Remaining Page/Content Text or Backgrounds

• [ ] Spacing

  List of Elements

  - [ ] Heading and Paragraph Texts - [ ] Buttons - [ ] Input and Fields - [ ] Accordions - [ ] Tooltips - [ ] Infoboxes - [ ] Links - [ ] Any Remaining Page/Content Text or Backgrounds

• [ ] Border

  List of Elements

  - [ ] Heading and Paragraph Texts - [ ] Buttons - [ ] Input and Fields - [ ] Accordions - [ ] Tooltips - [ ] Infoboxes - [ ] Links - [ ] Any Remaining Page/Content Text or Backgrounds

• [ ] Border Radius

  List of Elements

  - [ ] Heading and Paragraph Texts - [ ] Buttons - [ ] Input and Fields - [ ] Accordions - [ ] Tooltips - [ ] Infoboxes - [ ] Links - [ ] Any Remaining Page/Content Text or Backgrounds

• [ ] Icons & Images

  List of Elements

  - [ ] Heading and Paragraph Texts - [ ] Buttons - [ ] Input and Fields - [ ] Accordions - [ ] Tooltips - [ ] Infoboxes - [ ] Links - [ ] Any Remaining Page/Content Text or Backgrounds

Resources/Instructions

• What to check:

  • Color: Check for adherence to palette and correct usage (for e.g.: incorrectly using "Red" color for a positive action on a button).
  • Typography: Check for correct size and other font attributes, correct usage (for e.g.: incorrectly using Header 4 style on paragraph text).
  • Shadows: Check for correct blur, spread, color and opacity, correct usage (for e.g.: elements that don't need drop shadow but have them).
  • Sizes: The current style guide does specify any size guidelines except for buttons, make sure the buttons follow the size guidelines and for the rest of the components just note down the width and height.
  • Spacing: The current style guide does specify any spacing guidelines except for buttons, make sure the buttons follow the spacing guidelines and for the rest of the components just note down the margins and padding.
  • Border: Check for correct stroke width, color and other attributes, correct usage (for e.g.: buttons that shouldn't use borders but have them).
  • Border Radius: Check for correct radius amount and sides it's applied to, correct usage.
  • Icons and Images: Check for correct icons & images being used in recommended color and sizes.

• Template for site audit on Figma

• TDM Calculator dev site Login page

• Style Guide Presentation

• Design System on Figma

• Annotated Figma file from previous site audit