Iterative design – working on IntuitionHQ to improve the user experience and usability

It’s been 5 months since we launched IntuitionHQ, our online usability testing application. We have not quite found the time to write a post about IntuitionHQ but will be writing a couple over the next few months to help you find ways to improve you design and your business with usability testing.

We have however been busy. Over the last couple of weeks we have spent some time identifying areas within IntuitionHQ where we can improve the user experience.

The first area we have focussed on is the test taking page. We evaluated the existing page and came up with a list of things we think the page needs to do in order of importance:

1. It has to be fast
2. The user must be able to clearly see the task they are being asked to perform
3. It needs to be clear where the site ends and the test page begins

Making the list from the user’s point of view was extremely valuable and gave us a clear understanding of what needed to be done.

Improving the speed of the page loads

We started by looking at each of the steps the page takes when loading. It soon became clear that the round trip to Amazon S3 where the images are stored was taking far to long. Further investigation showed that we were searching for the bucket based on the URL each time. Fixing this has brought significant speed gains.

Ensuring the task is clear

Looking at the existing page design there was a lot going on around the task text. We had the number of tasks, the instructional text and the IntuitionHQ logo all fighting for attention.

After a number of iterations this is what we have come up with. The most important change we made was improving the contrast of the task text in relation to the other instructional text. We have also removed the IntuitionHQ logo. The result is a much cleaner and clear area at the top of the page. For users it is now much clearer  what is required and there is less competing for their attention enabling them to concentrate on the page being tested.

Above is the initial mockup that we produced. We used this as a guide for the designer to demonstrate what we were looking to achieve. The designer took this and produced the final design below. The final design keeps the task on it’s own and shifts the instructional text to the right hand side. To accommodate a wide range of image sizes the layout of the page has been shifted to a center alignment.

Separating the test area from the page

In the initial page the image to be tested was place straight on to the grey background. This was OK but our review suggested that it was not always clear that the test image was separate from the rest of the page. We needed to make this clear while also ensuring that the task and image were clearly related. We solved this by using a border around both the test image and the task text. The result is a clear relationship between the two and separation from the rest of the site.

We think that these changes will make a real difference to the ease with which your users can accomplish tasks within IntuitionHQ tests.

We are busy implementing these now and will be putting them into production later in the week.

Do you think the changes will improve the user experience? We would love to hear your feedback.