LocateME: Creating a virtual mock-up.

Methods used: Paper based wireframing, Balsamiq mock-up - wireframing software, Guerrilla usability testing and Adobe Flash ActionScript.

After analyzing the comments regarding using Locate on mobile devices from the feedback sheets, we identified one of the main *key functionalities and began working towards creating a ‘virtual mobile environment’ that would incorporate the identified component effectively within the Locate mobile interface.

 *Getting an option to login to My Account – primarily to renew books and see books out on loan (renewing higher priority than requesting).

Paper based wireframing.

We created two separate walkthrough scenarios which demonstrated how the Locate mobile environment could display the ‘My Account’ functionality within the web application.  The initial walkthrough mock-ups were created using paper, pen and post-it notes.

A screen copy of our current mobile environment was captured and printed.  We tailored the screen captures and positioned the ‘My Account’ option within several places throughout the walkthrough. 

Scenario 1: Access ‘My Account’ from the initial home screen via the ‘Sign in’ option.

Scenario 2: Access ‘My Account’ during or after executing a search.

Guerrilla usability testing.

We randomly approached 30 library users and asked each of them if we could have 5-10 minutes of their time, whilst briefly explaining to them what we were trying to achieve.  Each participant was handed the first page of the wireframe walkthrough and asked to access their ‘My Account’ information from the mobile environment mock-up.  We then presented each participant with the next paper mock-up in accordance to which option and direction they took.

All comments were noted throughout the process, and the participants were also each given the chance to offer additional feedback at the end of the session.

Wireframe screen captures with Post-it notes:

Balsamiq development.

The findings from the initial paper based wireframe guerrilla usability testing were subsequently fed back into the design process using the ‘Balsamiq’ wireframing software.  The two scenarios were mapped out using Balsamiq, fine tuned and printed as graphical based printouts.  We then ran the previous tests, but this time we used a different random selection of library users; again allowing each participant to determine their own way through the task. 

Scenario 1: Access ‘My Account’ from the initial home screen via the ‘Sign in’ option:

Scenario 1: Access ‘My Account’ during or after executing a search:

 

 

Key Comments:

(1) “I normally expect to click on a toolbar at the top, or bottom.  The login option is in the right place.”

(2) “The web pages are simple and easy to get around.”

(3) “Smooth, logical and easy to use.”

(5) “Can the font be different colours, if you are logged in?”

(6) “The layout is intuitive and fresh.”

(7) “The information on the screen is not overwhelming.”

(8) “Is the ‘My Account’ link above the item just for that item?”

(9) “The word login is old fashioned.  Sign in is the normal option.”

(10) “It is very much like Sainsbury’s. It works like other similar mobile search pages.”

Flash and ActionScript : Virtual mobile device.

We took our findings from the paper based and the Balsamiq wireframe walkthroughs and used the information to create a virtual mobile walkthrough that demonstrates the two predetermined routes that allow the user to obtain their ‘My Account’ information. 

Adobe Flash: Adding user interaction:

Adobe Flash: Adding 'My Account' functionaily:

You can view the final virtual mobile interactive environment by clicking on the link below:

IMPORTANT: Flash version 9 or above is required to view the interactive mobile environment.

Virtual Mobile Device Mock-up.