UX Testing is an A/B tool used internally at Bing by designers, researchers, editorial, developers, and project managers (hereafter internal-user) to get quick customer feedback on early designs and feature ideas. There was a big initiative to take this existing tool and make it more robust and scalable to conduct different types of tests, surveys, prototypes, etc. For this project I was responsible for visual explorations on a set of wireframes done by another UX Designer. During my visual studies I encountered a missing experience so I took it upon myself to quickly solve it.
Let’s start with the wireframe below – this is the second step during the Create a Test process where an internal-user would add specific questions to get the best feedback, however, we are missing the option to add open-ended, single choice, and multiple choice questions. Additionally, the interactions of how this experience would be used is also missing.
My solution was to place the Add a Question options on the left hand side to keep that above the fold regardless of how tall the page becomes. Even when the internal-user scrolled down the page, the module could stick to the top of the page to reduce up and down scrolling.
So let’s go step by step. If the internal-user were to click the Open Ended question option, a new empty field is added in the right column where a new question can be typed out. These type of questions would be used to gather descriptive feedback.
Now if they were to click the Single Choice question option, a new empty field is added along with two answer options to meet the minimum requirement of a yes/no or true/false question. If there were three or four initial options this could confuse the internal-user when setting up a yes/no question. Yes, we can add an option to remove empty fields but that would create unnecessary steps for this particular situation.
If additional options are needed the “Add another option” link is placed directly below where it is expected to be. The great thing about this interaction model is that it is scalable across the Multiple Choice option – the only difference would be that checkboxes would be presented to the customer taking the test instead of the radio buttons used for the Single Choice questions.
Once the UX for this process was complete it was time to move on to the Detail Page where the test results are gathered and displayed.
The wireframe for the Detail Page (below) shows the answers from customers, however, it doesn’t show which question the answers are related to. The disconnect makes it difficult to understand and assess the results on a deeper level.
Early ideas included using an iframe to contain all the data within a specified dimension and an accordion method which stacked each question vertically where answers would reveal on expand. The iframe was a compact method for displaying data but it hid too much of it at the same time – for the amount of data it didn’t seem practical. Similarly with the accordion method, although it reveals and hides data effectively, there were too many moving parts. A good use of animation could’ve helped focus the internal-user’s attention properly but in the end I felt it took up more screen real-estate than it needed to.
My final solution (below) was to list the set of questions in the left column while showing the answer results in the right column. This method shows the breadth of data but allows for quick navigation to switch between questions without the need for fancy animation to make it work, just simple hover effects.
The first question (above) would be highlighted by default and show answers specifically for that question. If the user were to select Question 3, a Single Choice question (below) the question type and data gathered is different thus the data needs to be represented differently. Similarly, the data for Multiple Choice questions would display using bar graphs and percentages. This framework afforded the necessary space and control for the data to display effectively.