TicketEasy - two tickets in the first row

Hi, my name is Andrey Yanovsky, I work as a designer in DataArt. I want to talk about new guidelines for Google Material Design and about their use in developing an application for buying tickets to the cinema.

Everyone, of course, is now discussing Apple watches and fresh iPhones, but I’ll focus on the recently submitted Google updated design for Android - Material Design. Just want to say that I am a big fan of Apple, since 2008 I have been using their technique as the main tool for work, but Gmail, for example, began to be used in 2005. Therefore, I constantly follow Google, I am interested in their developments in the field of design and UX, and until the last Google I / O, they did not particularly please me. Well, after 10 minutes I did not feel alone with the phone on Android of that puppy delight that I felt when in 2009 I moved from Windows Mobile to the barely working HTC to iPhone 2G.
')
And this year I decided to watch Google I / O, we just broadcast it at work in the DataArt office. After the broadcast, there was a strong desire to try it, but, unfortunately, the current projects and the middle of summer were not entirely agree with me. Therefore, I decided to postpone this idea and plus find a problem worthy of a solution. A month later, I had a free place in the working schedule and, having agreed with the head of the design department, I completely plunged into the problem.

And the problem was the following - we all love to watch movies and go to the cinema, but, unfortunately, in my city to watch the billboard of all the movies at the box office and buy a ticket to any cinema on one site or in the application is impossible. The site either shows a billboard, but you can buy a ticket far from any cinema, or you can buy a ticket, but only on the website of a certain cinema. Vicious circle. But I didn’t want to run between the site with the poster and the cinema site, I want everything at once and in one application.

So, it is given: to develop an application for Android that allows you to buy an electronic ticket to any movie theater for any movie.

Analysis

I began, of course, with a piece of paper. Or rather, no, I began by analyzing other applications and solutions. But since the android was not at my fingertips, all the examples would be from an iPhone. Although the OS is not important to us here, the main thing is to see the interaction mechanics. I installed Fandango, Flixster, Afisha, Kinohod and analyzed them.







As you can see, most applications allow you to watch cinemas nearby, movies at the box office, information about movies and cinemas and buy a ticket for this movie. But the most important thing is that you still have to go to the cashier, who usually has a queue, frantically choosing which row to sit in, and get a real, paper ticket.

Interview

I asked colleagues and friends how they buy movie tickets. After the polls, two of the most frequent user behaviors loomed: buying tickets for any movie, but only at a certain cinema, and buying tickets for a certain movie, but at any nearby cinema. After the interview, this user behavior was drawn:

Wireframing

The next step is the same piece of paper. My favorite part is in design. Ask why? Because in this part of the design you are almost unlimited. You can offer the most courageous solutions, turn on the imagination to its fullest. As wrote Jake Knapp, Design Partner at Google Ventures, spend on the whiteboard, drawing board.





After the paper wiframes, I did the same in Axure, made a clickable prototype in the same place and tested the user flow.

Analysis

After creating clickable prototypes in Axure, I gave access to several colleagues and asked them to test. Some of their comments, for example, transfer the selection of a city from the first screen and transfer the registration / authorization steps from the beginning and put them before payment, turned out to be quite correct, and we had to adjust the prototypes a little.

Design

After prototyping and testing, I proceeded to the actual design of the application. To start, I studied the Material Design Guidelines , Google this time wrote them in great detail, with excellent examples and animation. The basis of the application style is the two main contrasting colors and, of course, strict indentation rules and the unity of the font solution.



The main screens of the application - a list of cinemas, a list of movies in the rental and promo, so far without it.
From the list of cinemas and films we can get to the information page about this cinema or film:



Or we can go directly to the schedule of a particular cinema or movie schedule.



As we can see, this page displays all the necessary information: the name of the cinema, the address and distance from the user, all information about the cinema and, of course, a ticket to the session. And, of course, we can scroll the schedule using a swipe gesture.



Screen selection of places and payment confirmation. Many cinemas have discounts for adults or children under 6 years old - all this can be chosen before paying.



Registration / authorization before purchase allows us to use a full-fledged application and register only before the purchase of tickets.



Adding a new card to your account.

Payment for tickets is carried out using a plastic card. Map data can be saved, which helps to avoid constant input of information.



And now - the long-awaited ticket. All the necessary information is shown on the front of the ticket, and when the user comes to the cinema hall and it is necessary to present the ticket, the back side of the ticket with a QR code, which the controller reads, is shown.

Clickable prototype

After designing all the screens, I uploaded them to InvisionApp and made a clickable prototype. Here is a link to it for the web and for the phone - you can try to explore the application on your device.



The resulting user flow.

Testing

To follow User Centered Design processes, we tested our clickable prototype on real users. My colleague from the St. Petersburg office DataArt selected a group of fans to go to the cinema and invited them to test the application. Tasks were issued: movie search, buying a ticket for a specific date and time, checking the most recently purchased tickets and several other tasks. All this was checked on the Android phone, where the prototype was installed.

And what did we find out? Almost none of the "experimental" found the producer of the film, there were a few remarks about the change of dates and some comments on navigation.
Test results can be seen in the table:

And one more thing ...

Imagine the situation: you are in the cinema, you have a glass of coke in one hand, a large bucket of popcorn in the other, and you come to the controller ... It’s not very easy to get a phone with a hand while holding popcorn and a cola in the other. Here your Android Watch will come to your aid - when the time of the beginning of the session is approaching, your watch displays information about the session, the hall and the start time of the movie. With the help of a usual swipe, an electronic ticket is available to you - a QR code that you show to the controller. And the next svaype - information about the number and place in the cinema. Yes, everything is so simple!