Haydn Kino Cinema
How I Improved UX and Designed UI for a Mobile App of a Brick-and-Mortar Cinema
Haydn Kino cinema in Vienna
A mobile application
Solo project (working with mentors)
UX design (~1/3 part), UI design (~2/3 part)
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
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.
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.
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.
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
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.
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.
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.
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
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.)
Look and feel
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.
Feel free to walk through the final design with the help of my Figma prototype.
Delivering the design
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.
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.