This is an actionable insight from the [UX Department: MRs experience async critique](https://gitlab.com/gitlab-org/ux-research/-/issues/1073) research ([insight1][insight1]) ([insight2][insight2]). ### What #### Part 1 In the merge request widget for **code tests**, there's too much emphasis on status icons. Here are some quotes from our research: 1. “The green color makes it difficult for me to focus on the text. My eye keeps bouncing back to the green icon instead of reading the text more closely.” 1. “Can everything successful be grouped under one icon in some way?”  #### Part 2 In the merge request widget for **code tests**, there's no visual difference between the widget's header and its expanded content.  ### Why With too much emphasis on the status icons, especially due to duplicated icons, it's difficult for users to focus on the text and differences between each test result. ### How #### Part 1 See how it's possible to de-emphasize the test results icons. One option is to group results by status, instead of duplicating the status icons for each result. #### Part 2 Visually differentiate the MR widget header from the expanded content. **[Figma Design](https://www.figma.com/file/2xyEtC1JM1ClKGNhpTcZXR/Testing-coverage-widget?node-id=414%3A208)** Note that these are the same designs uploaded to https://gitlab.com/gitlab-org/gitlab/-/issues/283894 [insight1]: https://dovetailapp.com/projects/14109fbc-dfdd-4204-a54e-9c80ba8b7bba/insights/cddfa05e-61a9-4aea-9363-b417758c483a [insight2]: https://dovetailapp.com/projects/14109fbc-dfdd-4204-a54e-9c80ba8b7bba/insights/a93aa597-cabf-414b-9d95-ddef414b3303 * The `child` test results should indent using a left padding of `32px`. * The `child` results item container should have its height reduced to `10px 8px`. * The status icon in the `child` container should have its dimensions reduced to `16px`. * If a child container displays a warning state, the background color should be `$gray-50` - the same as the scrollable container.