A Cinema City Mobile App

As part of a learning challenge, I invested three months to revolutionize the online booking of cinema tickets and to solve different problems that users have in this process.

There is no contractual relationship between Grapefruit and Cinema City. This was only an exercise, and the main purpose of this Case Study is to show the potential of it to everyone and to see how beautiful and pain free this process can be, how can we make our users life easier and win their hearths.

Going to the cinema is a recreational task, done either alone, with your friends or your family. Watching movies strives positive emotions, being a relaxing moment. But what do you do when all of this starts with a frustration, like in the case of online booking of cinema tickets from Cinema’s City website?

Cinema City is the biggest cinema operator for Romania and is part of Cineworld Group. The merge between Cineworld and Cinema City created the second largest cinema business in Europe. According to Siteworthtraffic.com, Cinema City’s website has 4.726 Unique Daily Visitors and 1.724.990 Unique Yearly Visitors, but their digital experience has some major problems.

What problems did I solve?

The main purpose of this exercise is to solve different problems. These are the most frustrating ones I’ve noticed:

The website is not responsive – anyone who entered Cinema’s City website from a tablet or smartphone knows how hard it is to make a reservation or buy tickets. You have to navigate slowly and pinch to zoom to get around;
Lack of features – there are so many options and functionalities that can improve the acquisition process, you just have to include the most important ones;
User Interface – the website’s interface is outdated. Attractive designs are perceived as easy to use, they are accepted faster by the users and are remembered in the long term;
User Experience – the harder and more time consuming the reservation/ checkout process is, the higher the bounce rate. This is affecting their sales for sure;
Mobile app not working– the iOS Mobile App isn’t working.

Out of the office, into the cinema

As this was simply a concept, I did most of the work alone, my colleagues just gave me guidance and feedback. Usually working for clients is a team effort. The research part was done by the book and included field research, questionnaires, users interviews, competitive analysis etc.

For this project, I also relied on my personal assumptions, through direct observation in the cinema and by talking with Cinema City’s customers and my colleagues. With my “detective” coat on, I sought to spot the most recurrent typologies of users. Using insights from my observations I created two personas, the core target for Cinema City.

Minela is a 33 years old mother, from Iasi, Romania, that lives with her husband and her two children. She works as Project Manager for an IT company and has an income of $650.

Her needs and expectations from this app would be:

to filter the movies and get notifications when a children’s movie appears;
to see the trailers fast, without losing too much time or opening the laptop;
she wants an easy payment method so she would no longer stay in line.

George – is a 23 years old student, from Pascani, that lives in Iasi with another couple, in a rented apartment. He works part-time as a bartender, studies Marketing and Communications at FEAA and has an income of $350 (his salary and money from his parents).

His needs and expectations from this app would be:

to buy tickets from his phone, fast and pain-free;
to be notified when new movies are available and also when he can buy tickets for a certain movie;
to see the IMDB rating for a movie, so he doesn’t have to search it by himself.

New Trends that changed my vision

Most of my user interface ideas regarding this app were drastically changed in the research stage, considering that over the last several months, some of the leaders of innovative design have taken ‘minimal design’ to the next level. Facebook, Airbnb and Apple have followed a similar blueprint to simplify prominent products in a way that reflects this new trend of ‘Complexion Reduction’ in mobile design.

You may say you’ve never heard of ‘Complexion Reduction’ . Well, that’s because it’s a made up term by Michael Horton. This new trend is beyond flat design, beyond minimal design and independent of progressive reduction. Some may claim that this is just the next step of minimal design being implemented into the mobile realm, but it is something more distinct. There are specific similarities and characteristics that define this new trend.

You can read more about this topic on Michael Horton’s Article.

As we can see all 4 mobile apps: Instagram, Airbnb, Apple Music and Medium have adopted these general guidelines, bottom navigation, bigger, bolder headlines, simpler and more universal icons and the extraction of color, that is only used to signal different elements.

You can also the Guideline from Google on Bottom Navigation.

New and amazing features

With my research done and the persona described, I identified the most important new features.

Filters:

Based on genre: action, adventure, SF etc.
Release date: premiere, soon, available now etc.
Viewer classification: G, PG, R-13, R-16, R-18;
Duration: 1-2 hour, 2-2.5 hours, 3 + hours.

Notifications:

When a new movie comes out;
When you can buy a ticket for a certain movie;
When a new movie suitable for viewing with children comes out, or based on your selection as a viewer classification;
If you made a reservation or bought a ticket, you will be notified before it starts, so you won’t forget.

User Flows

For the purpose of this exercise I detailed only 3 flows, even if I covered 20+ flows. I wanted to see how many steps would a user require to achieve his different objectives.

The 1st goal: filtering the movies:
The user will enter the app from his smartphone. In the first screen (the movies listing screen), he has to press the top right Filters button, choose the desired filters and after that he sees the updated movies list.

Goal No.2: to be notified when an animation movie suitable to see with children is on schedule
This is also a 4 steps process:

enter the app;
in the 1st screen(movies listing) you My Account (the last button at the bottom navigation);
enter the notifications screen and choose to be notified when new animated movies appear;
choose the desired viewer classification, in this case ‘G’

The 3rd goal: to buy tickets as fast as possible, directly from a smartphone, and not stay in line:
The user will enter the app and will choose the desired movie from the first screen (the movies listing).
In the movie details screen, he chooses to Buy Tickets, he completes the 7 steps checkout process and receives an E-ticket.
With this electronic ticket he can skip the long lines we all hate. He doesn’t have to get there early and will avoid other problems: delays in the schedule, frustrations. Everything is now done in a eco-friendly manner.

The Flow Map

As you can see from the image, the flow is pretty simple. With the new trends in mind, I adopted the bottom navigation and the orange buttons giving five options: Movies Screen, Schedule Screen, Search, Promotions and My Account Screen. I tried to maintain a simple and pain-free flow.

Sketches, sketches, sketches

At Grapefruit, we take things a bit further than the rest. When designing for mobile, before the actual user interface design, we create the sketches. It’s really easy and efficient because you can iterate fast and see different possibilities. We make the sketches directly on a real dimension paper phone outline. This way you get a real feel of the app, you can test the touch area and spot different problems that may appear at an early stage.

And now, the actual User Interface

The design part was made in Photoshop CC, at XXXHDPI resolution, 1140×2560 px and was tested over and over again. I tried to design most of the screens, so I would have the overall look and feel of the mobile app, the simulations for notifications and some steps from the checkout process. In the end, I made a Marvel Prototype to test the app and validate my assumptions through user testing.

Notifications and Loading Screen – as I mentioned before, one of the most important new functionalities will be the notifications. You will be notified when a new movie is announced, where you can buy tickets for a certain movie etc. TA notification can also have a Call to action, so it seemed natural to start with these screens.

Movies Screen Grid View: I got rid of everything unnecessary. The focus is on content, on the actual movie presented. The bottom navigation makes the transition from screen to screen in a smooth, logical and fast way.

Movies Screen Details: In the left corner we have different labels: soon, premiere, IMDB etc. On the right we have the list view and the button for filters. At the bottom navigation we have the 5 options: Movies Screen, Schedule Screen, Search, Promotions and My Account. That’s it. Clear and simple. The focus is on the movies, what’s on right now. You have the bare minimum information for a movie: viewer classification, duration, genre, title and picture

Movies Screen List View: depending on the user needs, I included this option List/ Grid View just to give the possibility to navigate in a faster manner. On tap, the image expands and you have the rest of the details.

Video player: we can integrate with Youtube, Vimeo etc, but I designed a custom video player so the user interface would be flawless.

Schedule Screen: the second bottom navigation is the Schedule Screen because here are the two options available for a user to make a reservation/acquire a ticket: you either navigate in the Movies List or you search in the schedule of a particular cinema, for a movie. There is a short list of cinemas in Romania, so you can search for the name or navigate to the bottom list.

Choosing Date Screen: this is a concept, so I didn’t design all the screens from the checkout process. I choose only two steps, choosing the date is the first on. Simple and straightforward.

Choosing Seats Screen: this was the most challenging screen because:

the amount of information required onto a small screen;
there are so many seats, the cinema rooms are different;

When the sketches were ready, I tested the flow for this screen in Pop App. It works just like Invision, you create hotspots and make the connections.

In the first phase, you have the top the selection details until now: movie name, date, hour, cinema and price. At the bottom you see a part of the cinema room, so the natural behavior would be to swipe up. The info would disappear in an animated manner and now you can see the full room.

In the second phase, I tried to figure out the most common interaction that users have when using a smartphone and want to zoom something. You can’t make a selection because of the tap area, so the natural behavior would be to double tap to zoom. The tap area increases and you can make the selection as you can see in the image below. Simple, right? For a better User Experience, the rows number will remain locked in the left side so you can navigate easily.

E-ticket screen: this is the last screen. After you complete the whole checkout process, you receive an electronic-ticket. With this ticket you can skip the long lines that we all hate, you don’t have to get early and we prevent other problems: delays in the schedule, frustrations, and we are eco-friendly.

Mockups: to take things closer to reality, I made some nice mockups.

Let’s give wings to this concept

To take things even further and closer to reality, and also to test my hypothesis and validate my assumptions I made a Marvel Prototype, with the entire app. I tested the app with 10 different users and got some amazing insights and many proposals for new functionalities.

Sergiu (Developer) – suggested that we should have integration with Google and Apple pay and also that we should unlock the reserved seats 30 minutes before the movies;
Radu (UI/UX mobile apps Designer) – suggested that the selected button in the bottom navigation should be named;
Alecsandru (Lead UX Designer) – suggested that we should be notified when the reserved seats are unlocked for a certain movie;
Razvan (Digital Strategist) – suggested that based on geolocation the list should be updated only with the movies available at the cinema in your town;
Anca (Operations Manager) – suggested that we should include comments functionality. She prefers to read an honest opinion about a movie, than the IMDB rating.

In this video we have the entire flow, for everyone to see how pain-free and efficient the app can be.

Play Video

In the end…

It was a breathtaking experience for me, an amazing one, I hope this concept will come to life, but even if not, I promise myself once a year I will choose a frustrating problem, something that I could change, invest my personal time and make a difference.

Even if you rock in the offline, ATL, BTL, if you don’t focus your resources in the digital medium,on the long term, your company and your users will suffer, so let’s make this concept come to life!