Competition analysis 🔎

General information: Using research conducted by Omnichannel, I conducted research on the websites and mobile apps of cinemas: IMAX, Helios, Cinema City, Multikino, and the non-included app SkayCash.

Conclusions from the analysis: Currently, there is no similar product on the market, such as e-cinema. Each of the cinemas has a website and mobile app, but none of them provide prices before starting the reservation/ticket purchase process, which is one of the problems users face, as indicated by the research. It also happens that the websites/apps do not provide enough information about the screening — another user problem.

Pain points 😞

Persony & Journey maps 🧑👩

To better understand users, I created two personas and their journey maps. Michael is a thirty-year-old salesman, he often looks for the most favorable price offers. Alice on the other hand is a young entrepreneurial mother who spends her free time with her entire family.

Problem Statements 🎯

● Michał is a movie enthusiast who needs an easy way to compare movie offers because comparing prices on each website individually takes too long.● Alicia is an entrepreneur mother who needs to find the right number of seats for her family near her for the premiere of the new Harry Potter movie because comparing prices on each website individually takes too long.

Value Proposition 🧾

● Repertoire of all cinemas in one place
● Possibility to compare movie offers
● Possibility to sort by price or popularity
● Filter for searching for screenings
● Ticket price at the very beginning of the purchase process.

5 Ws and H ❓

Competition analysis 🕵️

Companies audited for competition:

● Multikino — Mid-tier competition
● Helios — Mid-tier competition
● Cinema City — Mid-tier competition
● Bilety24 — Direct competition
● Biletyna — Direct competition
● Ebilety — Direct competition

The audit revealed the strengths and weaknesses of the competition. It appears that the best offer is provided by the cinema apps that I have identified as medium competition, as the offer is aimed at the same target audience, but their offer is only focused on their brand, which differs from e-cinema. The most favorable offer from direct competition is Ebilety, which offers cinema vouchers at the same price. The biggest problem with this offer is the small number of available cinemas.

Gaps in the competition’s offer:

● Lack of quick registration using social media, Google, etc. (direct, Cinema city)
● Boring interfaces (direct)
● Small number of searched screenings (direct)
● Lack of movie description or too short (direct)
● Lack of Trailers (direct)
● Lack of recommended movies (only Multikino and Biletyna have this feature)

Ideas for app E-kino 💡

The main assumption in coming up with ideas for the app was to write down every thought and not to evaluate it at this stage. Thanks to this method, my creativity increased, and the ideas I came up with were surprisingly interesting. This stage was very inspiring for me and added a lot of energy for further work!

Goal statement 🎯

The e-kino app will allow users to search for movie showtimes from all theaters in a selected location, providing a convenient way for users to search for movie showtimes and compare offers from different theaters in one app, thus saving time. The effectiveness of the app will be measured by monitoring the number of tickets purchased.

User flow 🏄

Visualizing the user flow allowed me to map the path that the user goes through while using the e-kino app and understand and predict the user’s cognitive patterns during interactions with the product.

Sitemap 🗺️

The information architecture helped me understand how the content should be placed for users to easily and intuitively navigate the application. This way, I thought through the entire structure of the application and its navigation.

Wireframes ✏️

I started by making a series of sketches on paper, which allowed me to quickly visualize ideas for the app’s design. After selecting the best drawings, I moved on to designing an interactive low-fidelity prototype in Figma and creating the entire ticket reservation flow from registration to payment method, as well as views such as: a drop-down menu, user settings, orders, and options for ordering snacks at the cinema.

The main goal of the application is to allow users to search for movie showtimes based on their location, so one of the key features was designing an intuitive search function with properly adjusted filters such as:

● Search bar
● Date
● Time
● Movie genre
● Cinema
● Translation type
● Number of available seats together

Low-Fidelity Prototypes ✏️

I have attached three screenshots of all screens from the low-fidelity prototype, at this stage, I focused mainly on the page's structure.

Research Plan 📝

After finishing the design of the screens and creating an interactive medium-fidelity prototype, I moved on to creating a research plan necessary for conducting usability tests in the next step.

Research objectives:

Determine whether users can perform basic tasks within the prototype of the E-cinema application for buying movie tickets. Check whether the ticket-buying application is difficult to use.

Methodology:

● Moderated usability research
● Location: Poland, both in-person and remote with users at home
● Date: Sessions will take place on 28/02, 01/03, 02/03
● Duration: Each session will last from 5 to 10 minutes based on a prompt list.
● Compensation: Appreciation and good coffee for participating in the study ☕️🙂

Participants:

● All users are individuals who go to the movies at least 10 times a year.
● One man and three women between the ages of 18 and 60, one participant is a person with visual impairment.

Usability Study 📊

After preparing a research plan, I conducted stationary usability studies with 4 participants and created a transcription for each participant based on my observations and their interactions with the prototype. In the transcriptions, I recorded all errors and user stumbles, as well as user evaluations of the application.

How long does it take a user to find a movie?

● Michal: 2:50 min
● Martyna: 1:12 min
● Nicola: 2:30 min
● Ewa: 50 sec.

KPI (Key Performance Indicators)

1. Conversion rates:
● Michal: Done
● Martyna: Done
● Nicola: Done
● Ewa: Done

2. Time on task:
● Michal: 3 min 50 sec
● Martyna: 2 min 42 sec
● Nicola: 3 min 42 sec
● Ewa: 2 min 15 sec

3. Use of navigation vs search:● Michal: Menu 7 / Search 0
● Martyna: Menu 0 / Search 4
● Nicola: Menu 3 / Search 8
● Ewa: Menu 0 / Search 1

Affinity diagram 🔎

The map presents the key features of the application and the most important observations from usability research. In each column, I placed user patterns regarding the given feature. This way, I could better identify areas for improvement.

Pattern Identification 🤔

I identified 5 main problems that occurred during user interaction with the application and recorded what they were and drew conclusions from them.

1. It was observed that 3 out of 4 participants claimed that the expanded filters should close automatically after being selected. This means that the expanded features in the filters are insufficiently useful.
2. It was observed that 1 out of 4 participants could not find the "search" icon. This means that the icon is mostly fulfilling its purpose, but it's worth considering changes to its position to make it more visible.
3. It was observed that 3 out of 4 participants did not fully notice the search results. This means the main reason, as users admitted during the research, was that the lack of photos in the prototype was confusing for them.
4. It was observed that 1 out of 4 participants did not notice the selection of the screening time during the reservation. This means for the majority of users the function is easy to use, but it would be useful to apply the text "choose screening time"
5. It was observed that 2 out of 4 participants needed a moment to find the "search" button in the filters section. This means the current button color is not sufficiently visible.

Insight Identification 💡

Then, based on the conclusions drawn, I found solutions for the functions where users had problems and recorded them in three points.

1. Most users were irritated by the expanding filter function that did not close automatically after selection. This means that all the expanding options in filters should have "ok" or "submit" buttons, and in the case of a single selection field, the lists should close automatically.
2. Most users did not notice the search results due to the lack of pictures in the medium-fidelity prototype. This means that pictures are necessary with every search result.
3. Some users needed a moment to find the "order" option in the bottom navigation bar. This means that adding icons to the bottom navigation bar will help users find the "order" option faster.

Prototype Low-fi after iteration 🔧

By analyzing all the information I gathered during usability testing and drawing conclusions from it, I made design changes and improved the features that users had problems with.

Branding & Style Tile 🎨

While working on a movie ticket booking app, I wanted the app to convey a cinematic atmosphere, so I decided on a dark purple background with bright yellow and blue accents. The yellow color indicates to the user the possibility of interaction (buttons), while the blue color indicates various types of information.

The next step was to design the app’s logo to build brand awareness and make the app more recognizable. The main goal I was working towards was to create a logo that could be placed as an icon on a phone, as well as in online and print ads. The logo primarily stands out with a large letter E, allowing the brand to expand its products in the future and maintain its voice by adding additional product names to the letter E.

Second round usability study 🤔+💡

I conducted another usability study on a high-fidelity prototype with four users of different ages and genders. The study highlighted 3 issues with searching for showtimes and a lack of information when selecting the time.

Pattern Identification

1. It was observed that 1 out of 4 participants first looked for the search function in the drop-down menu. This means that the search function should be available in multiple locations.
2. It was observed that 3 out of 4 participants had trouble finding the filter button. This means that the filter button is not sufficiently visible.
3. It was observed that 1 out of 4 participants were confused by the lack of a date when selecting showtime. This means that there is not enough information provided about the show.

Insight Identification

1. When users are unable to find the search function, they usually look for it in the menu. This means that to facilitate navigation, the search function should also be in the menu.
2. Most users had trouble finding the filter button because it was not sufficiently highlighted. This means that the filter button should be highlighted in the same way as the other buttons.
3. The lack of a date when selecting showtime makes users unsure about which day they are making the reservation. This means that the date of the show should be added when selecting the time.

Prototype Low-fi after iteration 🔧

Observations of users during usability testing and their analysis allowed me to understand the problems users encountered and make changes to make the app more user-friendly and intuitive.

Prototype High - Fidelity ✏️

After implementing improvements in the prototype, the project was completed. The application includes the entire ticket reservation process for a cinema show, from logging in/registering to payment and viewing the ticket in the app. During the design process, I also added a feature for ordering snacks at the cinema and receiving them just before the show. The idea for the additional feature came from the thought of allowing the user to completely bypass or minimize the time spent in line with the E-cinema app.

For a better organization of the project and to make it more developer-friendly, I used the auto-layout tool to build the prototype, and elements are constructed with frames and components. Another great advantage of this approach is the ease of making changes to the project in a very short amount of time.

Finish mockups 🙌

The 24 mockups attached are the majority of the main screens from the app, to see the full content, you can use the interactive prototype which is located below.