Cinemark ATM
Self-Service Kiosk for purchasing tickets and snacks
Role
UX research, UI design, prototype and user testing
Technologies
Figma, Zeplin & Adobe suit.
Team
IT Cinemark Brasil
Duration
A work in progress
The Challenge
& Our design process
Cinemark Brazil was using an old system for a long time in their ATM's (self-service kiosk) in all their cinemas.
After they bought new screens that were a different format just before the pandemic. They decided it was the perfect opportunity and time to redesign and improve the experience of buying tickets and snacks in their cinemas, while the cinemas were close for very sad reasons, COVID-19 😡🙁.
With the pandemic going on and the cinemas just starting to reopen. Cinemark wanted to ensure the safety of their workers, by decreasing the time they are face to face with clients, and as a consequent the user needed to buy their tickets and snacks through the site, app or ATM's. The problem was that without someone advising them to buy a different combo, or more snacks, the medium ticket went down.
So we had 2 challenges:
1. For Our users, who were used to buy their products in the old ATM's, so they knew the system. So we had to provide an experience that was easy, fast and cool for them. That they will prefer them over the old ones.
2. For Cinemark, they wanted to increase the medium ticket for each purchase. So we had to find a strategy to sell more products to the customer, in a creative way and that the customer does not feel that we are selling to him.
This is an ongoing project. We are still testing and improving the product every day 😊
01. Research
Benchmark, interviews & learning from past mistakes
First, we sent a survey online to 123 clients of Cinemark to understand better our users. What he likes, and dislikes, how many times he visited the cinema in the last year, if they buy online or directly at the counter & more.
After that, we interview some of Cinemark's workers from different cinemas, to understand what their selling techniques and strategies were, and how to upgrade an order, so we can try and insert some of them in the flow of the ATMs.
Because it was my first time working on a system like the ATM, I had to do a lot of research as well, on how to design and create flows for ATMs, I read different articles that talked about the food industries, methodologies of how to increase the middle ticket & more.
We also did lots of benchmarks, to understand what is out there, how can we improve our experience, and learn from the big companies who are great at doing their job!; We use inspiration from companies such as McDonald's, Burger King, other cinemas & more.
02. Define
Needs of our user and cinema, Flow of the Project & MVP
We started by trying to understand the need of our users. One of the main problems of the old ATM was that it is very confusing to use, and in order to add a product to your cart, you have many clicks before you get there. So we wanted to simplify that process.
Also, because Cinemark has many combos, it was difficult to find what you were looking for, you had small pictures, with lots of text, and most of our users responded they hardly read what was written, they look at the photos first. So in the new ATM, we gave a lot of space to the pictures, so you can see what you are buying and not only read.
After that, we define different rules for upgrades, upcharges, and cross-sale to increase the medium ticket. And they were implemented later on in the flow.
We started working in our flow, along with the PO, to understand better how the new ATM is going to work.
And because we had a very tight timeline for the redesign. We defined our MVP, which was to sell snacks first, and later on, we added the option of purchasing tickets, and after that, it was all hand on board! 🚣♀️
Check our Flow map!
OUR USERS PAIN POINTS
Too many options!
Many Clients complained that they had too many combos, and they didn't know what to choose.
Where to buy?
Since Cinemark cancel the option of buyin on the counter, they didn't know were it was better to purchase their tickers and snacks.
The process of purchasing
The system it was very slow and got stuck many times, and the process of buying was very confusing.
"We were facing a challenge of time and usability. We had to make sure that in a short time, we were improving the flow, so our user will want to purchase their products in the cinema ATM's and not in the counter "
03. Build
Backlog, Release Planing & Sprints
As I explained before, we decided that our MVP will be only the snacks ATM, and later on, we started thinking about what our next steps will be.
After we had a basic Wireframe, we went to different departments of the cinema such as the beverage and drinks teams, and operations team, to see if the system fitted their needs, and after that we tested our prototype with some users, to see their responses.
From there, de PM started dividing the project into tasks, and the development of the ATM started. After a few months, we had an MVP on air, that we were able to test with real users in the cinemas and start iterating an improving our flow and designs.
04. Visual
Color palette, Typography, Icons, CTA & More...
Because Cinemark is a big company with many years of history, they already had a style guide that I had to follow. One of the main challenges in this redesign was, that the old ATM was very polluted, so we wanted to create a new system, that was clean, that will accentuate the posters of the films and all the great snacks the cinema has.
As I said before, users usually do not read what's inside each combo, so we wanted to give the photos of the products, plenty of space so the first thing you look at is the photo.
For the font, we choose used Work Sans, because it is a very modern and clear font and has different weights, which will help in the design process, and because we were talking about a complex system, we wanted to use a Google font, that will be easy to upload.
The language we used for the ATM, is very friendly like he is talking with you, we were able to do that by using text that speaks to the user and images that help him understand what's going on.