case study

Haydn Kino Cinema

How I Improved UX and Designed UI for a Mobile App of a Brick-and-Mortar Cinema

Client

Haydn Kino cinema in Vienna

Product

A mobile application

Team

Solo project (working with mentors)

Time

3 weeks

My role

UX design (~1/3 part), UI design (~2/3 part)

My tasks

Improving UX, creating a mood board, designing UI, native iOS specialization according to Apple’s Human Interface Guidelines, high-fidelity prototype, style guide, user testing, stakeholder presentation, storyboarding

Tools

Figma

Project overview

The client

Haydn Kino is one of the very few cinemas in Vienna that screens original versions of blockbuster movies. It is located on one of the longest and most famous streets of Vienna, Mariahilferstraße, and was built in 1917 in the basement and ground floor of a coffee house that had a restaurant and bar license. Today the cinema also offers tasty snacks and popcorn and is highly frequented by people who prefer to watch movies in their original language, without dubbing.

The product

Because visitor feedback showed that there would be a high demand for purchasing tickets through a mobile application, the case of Haydn Kino served as a good base for a semi-mock UX/UI design project.

The team

I am glad I was able to work on a mobile application for Haydn Kino cinema as a participant of Brainster Vienna’s UX/UI design bootcamp. I have worked on this project solo with the help of mentor-instructors acting as stakeholders and researchers. My role was mainly covered by UI design, but I have also touched on UX design at several points.

Discovery

The kick-off

I joined the process when a UX researcher and a UX designer synthesized and delivered their findings to the UI designer. They provided me

Key findings of the research

Users would like to have a better overview of current and upcoming movies. Because most users who buy their tickets online, use their mobile phones, a mobile application for buying tickets would be warmly welcomed. Since the cinema is located in the basement, internet connection issues are problematic for ticket scanning, so it would be important to save the purchased tickets in the app and make them available also without network access.

The design process

My role in the project

I have worked on this project in two phases, twice a week and a half, having a break in between.

Phase #01

In the first phase, I built the wireframes in Figma and created and implemented a general concept for UI, linking the screens into a prototype. My main focus was on getting more familiar with the UI elements and getting more hands-on experience in the design software itself using components and styles.

Phase #02

In the second phase – after conducting user tests of the initial design -, I revised and partially redesigned my previous work. I also thoroughly studied Apple’s Human Interface Guidelines aiming to create a more native iOS application. Also, in this phase, I made several minor improvements regarding UX and added new screens to the app to make the interactions even smoother.

UX design

Some of the problems and their solutions

Revised user journey

The primary purpose of the application is online ticket purchasing, so its task flow has great importance. It is a linear process consisting of four phases: 1 – selection of tickets, 2 – selection of seats, 3 – selection of snacks (optional), 4 – payment. According to the original wireframe, users could start this process only at the Box Office screen.

However, testing the prototype revealed that users intending to purchase a ticket belong to two main segments, and one of them has to take unnecessary extra steps.

“Segment A” (the “ones having a day off”) only gets to go to the cinema on certain days. Their logical user flow is to filter by date on the Box Office screen and select the movie they like. This is the original solution in the wireframe.

“Segment B” (the “movie hunters”) know which movie they want to watch, though they are not tied to specific dates. The logical task flow for them is to go from browsing the films to the chosen movie screen. They check when the movie will be shown, and in case of finding a suitable session, start buying tickets. However, the original wireframe has not provided this option and has led the user to the Box Office screen instead. It was an unnecessary and annoying extra step in the user flow. Luckily, I could solve this by adding the “Buy tickets” button to the movie screen.

More straightforward ticket selection

According to the original wireframe, users should tap the cards representing tickets, or snacks, if they wanted to add an item to their cart. After tapping a card once, a little circle would appear in the upper right corner of the card, showing the quantity of the chosen item, supplemented with a tiny trash icon next to it.

If the user wanted to add more items of the same kind, they should tap the card again, but there was no visual clue letting them know about this option. Also, it was not the most straightforward solution having the tiny trash icon on the card (think about the “fat finger” problem).

In my solution, I kept the original idea of having the users first tap the card of a ticket or a snack. It does not cause much cognitive load to realize what to do when users see a list of cards. But after that, I rejected the implementation of the trash can. Instead of that, I incorporated a more obvious +/- input stepper into the card. (Obviously, after selecting at least one item, tapping on the card itself does not function as “adding one more” anymore. Users can select/deselect the item only with the help of the steppers until reaching the initial empty state.)

iOS specializations

In the second phase of the design process, I put a lot of effort into making the app function and look as native to iOS as possible (concerning both UX and UI). It was a hard nut to crack and a lot of new knowledge for me, as I use an Android device in everyday life. I have dived deep into Apple’s Human Interface Guidelines and implemented several minor changes and additions based on that. Here I would like to mention just some of them:

According to the original wireframe, users would have been asked to register/sign in right after the app launches. However, part of the content is perfectly consumable even without using the profile-related functionalities (e.g., checking which movies are showed or coming).
I changed the sequence of the screens and presented the option of registering, signing in, or proceeding without action later, right before the payment procedure. This solution is more aligned with Apple's HIG suggesting asking people to sign in only in exchange for value and delaying sign-in as long as possible. Also, Apple recommends implementing their native methods for authorization, so I provided "Sign in with Apple" as an alternative and Apple Pay as an optional payment method.

Look and feel

While designing the UI, I had to consider the typical environments in which users will use the app, including the under-lit hall of the movie theatre. Based on this, I decided to choose a dark theme and spiced it up with some bright neon accent colors. Neon colors came to my mind while I was looking for some inspiration regarding the atmosphere of a slightly retro cinema.

I ran into some iconic neon signs while browsing, and somehow I have also found the picture, well-known to many, which could be seen on TV when there is no receivable broadcast (the cultic monoscope).

So I have chosen a combination of dark background and neon colors, but I made sure to lower the sharpness of the colors so as not to cause eyestrain in a dark environment.

Mood board

Of course, after gathering the first inspirations, I gradually changed and polished the design during each work phase, but some concepts persisted until the final version.

Final design

Feel free to walk through the final design with the help of my Figma prototype.

Delivering the design

Stakeholder presentation

To conclude the project, I pitched my work as a “formal” stakeholder presentation. Our mentor-instructors acted as stakeholders of different business roles, and the goal was to persuade them to buy in the design I created. My presentation also included a storyboard as well as an outline of further opportunities related to the app.

Possible paths for development

Based on the usability tests I had with the prototype, some other user issues and ideas showed up, leaving room for further development.

Handoff to developers

Part of closing the project was to prepare the design for the developers, so I created a style guide to make the transition between the different work phases as smooth as possible.

Learnings

Thoughts & learnings

In addition to a deeper understanding of Figma, as well as UX and UI issues, this project also contributed greatly to getting to know myself better as a designer.

Realizing personal role preferences

I realized that I prefer working as a UX designer or as a combination of a UX/UI designer. This project revealed that I can not handle UI separately from UX and even if I have to focus mainly on UI, I am pretty sure I am going to wear my UX-er hat and won’t be able to restrain myself from tackling UX-related issues as well.

Need to work closely with the team

Similar to the previous point, working on this app highlighted for me the importance of constant and mutual communication between the members of the greater team that got involved in the project. Since this was a semi-mock project where I have received a brief and some premade wireframes beforehand, I could not have live meetings with the UX researcher and designer working before me, and sometimes that was a frustrating experience.

Killing my darlings sooner

When I was working on UI design in the first phase, I was too immersed in the possibilities offered by the different styles to notice: I went too deep without correct validation. I had a concept I liked, and instead of starting to test it as soon as possible and collecting feedback in small chunks, I became too immersed in the details.

After I started testing and got a bit of distance from my work between the two phases, I realized that I had to carry out a great dose of modifications to move forward. These changes were very painful because, at that point, I already knew that I could have avoid the extra work if I had killed my darlings sooner.

Let's get to know each other

Do you feel that by working together we could make the world more beautiful, more fun and simpler? Do not hesitate for a minute, write to me! I am here and looking forward to hearing from you about your latest ideas, plans, and pet projects. Or your foolproof recipes. I am an awful UX designer when it comes to cooking.