Webtool for UX Tests converted to mobile version

Optimal Workshop has different online tools for testing usability. My assignment was to make a mobile version of their online tools. Their online tools are:

Treejack, Information Architecture Validation Software

OptimalSort, Online Card Sorting Software

Chalkmark, Online Screenshot Testing

Reframer, A qualitative research tool


Overall challenge
Keeping the same user experience on a mobile version as of the online version.

Solution
To avoid irregularities in the test results, the mobile version and the online version need to have the same (or as close as possible) user experience. I achieved that by using different methods. By using longtouch, drag, pinch to zoom and a seperated menu, I was able to keep the app clear and good to use on a smaller screen.

Chalkmark

What is Chalkmark
Chalkmark is an online tool to do ‘First click’ testing on screenshots and visual designs.

Problem
How to handle screenshots that are bigger than the screen on the device you are doing the test from.

Solution
The screenshot is first shown in full screen. The user can use ‘pinch to zoom’ to have a look at the original size of the screenshot. Scrollbars will appear for extra clarification that the image is bigger then the screen. By taping on the screenshot the user completes the task that has been given.

Admin view – Build survey

The admin starts a new survey. First the settings and then the question and the actual image he would like to test.

User view – Making survey

Different users making the same survey.

Admin view – Results

With different views the administrator can see how users are behaving.