This checklist is for reviewing pages one at a time as they are developed. Check the site overall QA doc for other tasks that will be reviewed when reviewing the site as a whole.
Start off by opening up the Figma file for the page, as well as the live page in a browser tab.
Follow the remaining steps to ensure that the page meets our standards.
Step 1: Structure & Design Testing
Scan page for any discrepancies between the live page & the figma file
Open up Chrome Dev Tools & inspect the page. Use the responsive viewer to shrink the screen to preview all breakpoints at a glance. Do a quick check for any issues by doing this.
Review the full page for large desktops - 1920px and above.
Review the full page for smaller desktops - 1000px-1440px
Review the full page for Mobile Devices - Iphone 13, and other devices
Preview the page on your mobile device and check for any discrepancies.
Look for any issues that may lead to a negative experience (things that look or function weird and could be adjusted)
Step 2: Content (Text and Images)
Review the copy on the page, ensure that it matches the copy in Figma, unless there is a source that is more up to date.
Look for errors in copy such as typos and lack of spaces in sentences.
Ensure that images match the Figma file
Check and make sure that images don’t look grainy or poor quality
Make sure icons are uploaded as svg files & not images (this will lead to them being grainy) (refer to loom video for an example of how to do this quickly)
Step 3: Functionality Testing
Test all buttons & links on the page. Ensure that they are linking to the correct source.
Test all interactive components (nav bar, sliders, animations, etc) Make sure there is not any strange behavior.
Ensure button hover states and match the figma file.
