Cross Browser Testing is an internal company tool that provides a visual comparison of a Bing feature experiments across multiple browsers and devices. Once a new feature is in flight, it’s important for the feature team to see how it renders in the real world so that fixes can be addressed much quicker.
I won’t bore you with every nitty gritty detail but would like to show a couple UX solutions I came up with while collaborating with devs.
The mock up above is the results page based on the PM's original specs. In the right column the user is presented with a list of browsers and devices and next to them is a link to the screenshot. The problem with the link is that the text is all the same – it would be better to make the browser and device names as links instead. Functional? Yes. But is it appealing? No.
My solution was to create a list and grid view (below) to visually enhance the results by including the browser and device logos alongside the text. When there's a long list like this it helps to have that distinction. I also spec'd larger touch targets for each result knowing that this tool would be used on touch devices.
Grid views are great for showing a preview of the content and because all the results are image based I really wanted the grid view to show on default. It definitely helps to know where you're going.
In the end we had constraints on what could actually be built, so the PM decided we simplify. Hallelujah! For this tool, a simple one page site was enough to essentially do the same thing we were trying to accomplish with 3-4 pages.
Here are the results shown in the grid view.
The results are the heroes of this tool – so I added a collapse and expand control for the left form column to make way for more!