Project overview

The process

My standard procedure for UX/UI work involves several stages.

The first step is research and empathy, during which I conduct interviews and surveys with potential users. This allows me to empathize with them and gain a clearer understanding of their needs and issues.

In the second step, I analyze the data collected from the previous stage and develop empathy maps, personas, user stories, and so on. I then engage in brainstorming and ideation to generate potential solutions to the users' problems.

The third and final step involves initiating the design process, starting with low-fidelity paper and digital wireframes, followed by high-fidelity ones and prototypes. I also enjoy conducting  on the target group, which allows me to make adjustments as needed.

User research Summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. Through research, I identified two primary groups of users:

1. The first group are working adults who need an efficient way to book or purchase movie tickets.
2. The second group are teenagers and young adults who prefer to conduct all their activities online.

User research Pain points

Following user research and data analysis, it became clear that the primary issues for users are: the absence of a unified app for all cinemas, as each cinema has its own app; the dislike for waiting in long queues; the lack of time to keep up with the latest movie releases and trailers; and the high ticket prices at cinemas.

Potential solutions to these problems could include developing a single app that encompasses all local cinemas, where users can purchase electronic tickets and present them at the entrance via their mobile devices. For those pressed for time, the app could periodically send notifications about new releases and trailers. Regarding high prices, the app could offer special deals and loyalty discounts.

Persona A - Petar

Persona B - Stefan

Paper wireframes

In the process of crafting the Home screen, my primary objective was to offer users an array of features for an enhanced experience. This included the provision of the most recent movie trailers, keeping them updated with the latest cinematic offerings. I also aimed to incorporate a search bar, a simple yet powerful tool that allows users to effortlessly navigate through the vast content. Furthermore, I wanted to present movies in an organized manner by categorizing them based on their genre, thereby making it easier for users to find movies that align with their preferences. Lastly, I intended to include a bottom navigation bar, ensuring that users have quick and easy access to all major functionalities at their fingertips.

I initially drafted several distinct versions of the home screen on paper. After identifying the most effective elements from each sketch, I amalgamated them to create a single, final version.

Digital wireframes

At the top of the movie page, the user may view the trailer and read a synopsis. Scrolling down reveals options for selecting a cinema, date, and time for the chosen movie.

Having selected the cinema, date, and time, the user may now choose their seats by tapping on them.

Low-fidelity prototype

The user begins the process by signing into their Google account. Once they’ve successfully logged in, they proceed to browse through a variety of movies. After careful consideration, they select a movie that piques their interest.

The next step involves choosing the perfect seats to enhance their movie-watching experience. With the seats selected, they move on to finalize the purchase, thereby completing the process.

Usability study Affinity diagrams

Following the execution of the usability study, I compiled all the insights derived from the participants.

Upon gathering the insights, I organized them according to their respective themes.
Ultimately,I identified five primary themes.

Usability study Findings

There could be numerous themes in the final analysis, necessitating their organization based on priority, ranging from the lowest (p2) to the highest (p0). To begin with, focusing on three primary insights would be a good approach.

The Round 2 will be carried out utilizing the high-fidelity prototype.

Mockups

Users indicated an interest in buying tickets for several movies, leading to the development of two potential solutions.

1. The first involved adding additional bubbles above the Floating Action Button (FAB), with each bubble representing a movie. However, this approach risked cluttering the screen.

2. A more streamlined alternative was to eliminate the FAB, replace one of the icons in the navigation bar with an e-ticket icon (since ‘Favourites’ was less important to users and was moved under the account tab), and introduce a sliding menu from thebottom of the screen.

Users expressed a desire for the option to reserve tickets and pay for them at the cinema. This feature is beneficial for those who may not have sufficient funds at the time of booking.

As a result, I’ve modified the Continue button into two separate buttons - Book and Buy.

If a user decides to reserve a ticket, he / she will be provided with a notification that includes all essential information.

Mockups - Userflow

High-Fidelity prototype

You have the opportunity to personally test the high-fidelity prototype, either from this location or from the external webpage.

Takeaways

Next steps