Checklist
Compare product/solution and design briefing
Components used (correctly)?
OTTO Components
Feature Components
Colors correct (if self-defined)?
Semantic Tokens
Correct spacings?
OC Utility Classes
Design Tokens
Correct fonts?
OC Classes
Check design in different breakpoints
Further information
Check behaviour with page refresh, forward and backward navigation and browser resize during runtime
Check edge cases
(extremely long/short text, extremely small/big context, ...)
Check interactive states
hover / active (pressed)
Check different browsers and devices
Mandatory:
Chrome and Safari
Either iOS or Android App (depending on availability)
on real device, use Develop App if necessary
Optional:
Test both mobile operating systems
Also test mobile in web browser
Test other browsers
Simulate slow end devices and connections
Check accessibility (depending on responsibilities in the team)
Accessibility Checklist
Remarks
The responsibilities for QA (be it design or accessibility) should be clarified within the team. It's great if there are QA roles that take over parts of these checks. Make them familiar with this checklist. If there are no processes in place to ensure that solutions are reviewed before they go live, the establishment of such should be prioritized.
It is regularly discussed, if designers are responsible for checking code (latest components, design tokens, ...). If you want to learn how to check code for the use of components and tokens, refer to uxd-design-system@otto.de. It is also possible to compare design and solution using screenshots or different techniques.