Although we did not have the time to carry out the second raft of user testing, an amended prototype was created using everything learnt from the first iterations testing. We took on aboard users observations, there issues when using the prototype and combined some of our personal observations into the final version.

Final Prototypes

The final desktop Verizon can be viewed here 

The final mobile version can be viewed below


Changes made

Most if not nearly all changes made to the desktop where also made on mobile, for any change that was particular to mobile Ill address them last.

One of the first major changes made was to address the issue of users completely missing the filter functionality, we assumed that this was down to the original only being a text link and responses from one of two participants in informal interviews supported this. Fig 1 shows it in its new off state where we have now made it a button. Fig 2 shows it in the on active state. We also changed the two buttons that fire or close the filter functionality from text links to buttons, as well as changing the language used on the buttons (fig 3).

Fig 1 : Filter Functionality off state
Fig 2 : Filter Functionality on state
Fig 3 : Filter Functionality buttons

To address the issue of informational feedback to the user we had to look at a number of different areas. Starting with the ticket selection screens we first added an additional icon to the right of the “Which Ticket is right for me”  link, as users were failing to see this Fig 4 . We then also improved the content of the modal window that launched making it easier to read Fig 5 .

Fig 4 : Which ticket icon
Fig 5 : Which ticket modal

As part of helping users understand what was required of them at the various steps in the booking process, we added a series of inline message to guide the user to the next step. If fig 6 you can see the message informing users they need to select tickets, we also realised it would be prudent to prevent the user from progressing any further before this key task was performed, and to that end, we disabled the seating and food sections of the booking process until tickets had been selected.

Fig 6 : Select tickets

Once the user has selected the tickets a second message is displayed informing the user of the choice they have made and they can now progress to selecting seats (fig 7). All sections of the booking process are now enabled and the user can move directly to the order completion stage if they wish or customise the order.

Fig 7: Tickets added info

On the seating selection page (fig 8) a few changes where made to make things easier for smaller screen sizes and to keep the user informed. The seating legend was moved above the cinema screen icon and the cinema screen itself was made a solid colour to make it easier to identify. We also provided the user with an informational message informing them of what seats had been auto selected for them.

Fig 8: Seats auto selected

Again as part of guiding the user a message was added to the bottom of the section suggesting they may like to add food as part of their booking (fig 9)  . This was combined with a small alert icon next to the food section title if food had been added automatically as part of the ticket.

Fig 9: Food add notice

In the food section itself  we added an informational icon similar to the tickets this simply alerted the user the fact that they could save time by ordering online (fig 10) . If food had been added as part of the ticket, the message in fig 11  would be displayed to remind users they have food included as part of their tickets.

Fig 10: Pre-order food
Fig 11: Food added reminder

The final screen amended was the order payment screen, we felt that considering there was no option for the user to amend their order without using the browser back button or starting over that including edit buttons next to each row of items was necessary.


Leave a Reply

Your email address will not be published.

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑