TicketEasy

2 tickets on the first row

Hi, I’m Andrew Yanovskiy, designer at DataArt. I want to talk about new Google Material Design guidelines and how to use them in designing Android application.

At the moment everyone is discussing the Apple Watch and new iPhones. But I would like to talk about the new Google design guidelines for Android – Google Material Design. I must admit that I’m a big fan of Apple even though I have only been using their devices since 2008. In comparison I started using Gmail in 2005! So I try to follow the news from Google and their innovations in UI and design. But they weren’t so exciting up until the most recent Google I/O.

This year I decided to have a look at Google I/O broadcasting, here in the DataArt office. This first attempt to investigate the subject inspired me to look closer, and I decided to search for a problem and a project worth solving where this could be applied.

And so the problem I came across was the following. Many of us love to go to the movies. All of us would like to buy the tickets with the least possible effort. But, for example, in my city it is not possible to choose the location, movie, and buy a ticket using a single app or through a single web site. Some apps show you the full cinema schedule all over the city. Some let you buy tickets but only in one movie theatre. A vicious circle! You continue switching between the apps in order to find and buy the desired ticket.

So, our goal was: to develop an Android app that will let the user choose an e-ticket for any movie in any cinema.

Analysis

I started zero, or to be more specific, I started analyzing the competitors in this field. I had no Android phone nearby, so all examples are taken from the iPhone. What we wanted to do here is to have a look at the user experience, so the used OS wasn’t too crucial. I downloaded several apps: Fandango, Flixter, Afisha, Kinohod.

As we can see, most of those apps let the user see the movie schedules and info from theatres. They also let you buy a ticket. But in any case you will need to go to the cinema prior to the movie and wait in a queue to get your paper ticket.

Interview

I asked a bunch of friends and colleagues about how they buy movie tickets. We identified the two most frequents user flows. Either they search for any suitable movie in the desired theatre, or they want a certain movie in any theatre. Here is the combined scheme for the user flows:

Wireframing

The next step was my favorite part, the design. You ask me why? Because you can unleash your creativity in this area! You can suggest the most adventurous solutions, let loose your imagination. As Jake Knapp, Design Partner at Google Ventures, put it: Treat yourselves to some new whiteboard markers!

Here are my paper sketches:

After this I developed the more elaborate ones in Axure and combined them in a clickable prototype and tested the user flow.

Prototype user testing

I asked several colleagues to help with testing the Axure prototype. They made a couple of significant remarks, such as: to remove the city choice from the first screen, and not to make the user login/register before choosing their tickets. I found this quite helpful and made some corrections to my prototype.

Design

When wireframes and prototype were ready I started the working on the visual design. Firstly, I thoroughly read the Material Design Guidelines. Google have made them really clear, with dozens of good examples and animations. The main features of new design are: two main contrasting colors and strict font recommendations.

The main screens of the app are: the list of movies, the list of cinemas and promotions.

From both movies and cinemas we can get detailed info regarding movies.

Cinema and Movie page

Or we can go straight to the cinema or movie schedule.

Theater schedule and Movie schedule

We can see here the main info: cinema name, address and location, the movie details and the tickets. And, of course, we can swipe the screen to get more information.

Seat selection

This is the screen where the user chooses the seat and pays for tickets. Many theatres have discounts for kids or senior visitors.

Registration via social network

The user can login or register right before buying the tickets.

You can add a new card to your account or save the data so you don’t need to enter the details the next time.

The user pays for the tickets with a card.

eTicket

And – voila! – the ticket. The important info is shown on the front side of the ticket. When the user comes to the ticket counter he shows the back side of it where a QR code is printed. No paper ticket anymore!

Clickable prototype

After designing all the screens I downloaded them into InVisionApp and made a clickable prototype that looks like the real thing. Here is the link: http://invis.io/GD193Y65N

You can try it out yourself on your device.

User flow

User testing

As we were following the UCD processes, we tested the clickable prototype on real users. My colleague from St Petersburg collected a group of movie goers and asked them to fulfil several tasks: to find a certain movie, to book a ticket for certain date and time, to check the last tickets bought etc. All this was performed on a real Android device.

So, what did we find out? There were problems with finding the movie director, so this was something to fix. Not everyone was sure what ‘p’ means (we wanted to reduce the space and used short “p” instead of ‘pm’, but this didn’t work). There were minor comments about dates selection.
You can see the testing results in the table below:

Testing results

And one more thing…

Imagine the situation: you are in the cinema, with cola in one hand and popcorn in another. You come to the ticket taker – but how to get the smartphone from your back pocket? An Android Watch can help here! With the time of the movie approaching it can pop up an alert for you where you will see the title, hall and time. A swipe and it will show you your e-Ticket which you then show to the cinema staff. Another swipe, you can see your row and seat. Yeah, that simple!