Test Results Page Re-design

Small changes can make a big difference. This is the most important screen in Constant QA — a website monitoring service we developed for internal use and are releasing to the public.

Before.

After.

That’s a pretty nice improvement in readability! Here’s an example with a failing test:

We focussed on improving the visual hierarchy, and even used the squint test to guide us:

The Squint Test is quite literal — display your design on screen, take a step back and squint your eyes (close them partially to distort your vision). The design should become blurry and only the largest, most basic shapes of the interface should be able to be perceived. The purpose of this is to get a high-level view of the visual hierarchy of your work.