TixFlix: A Movie Ticket Order Website Case Study

A Google UX Design Professional Certificate project


The background

A simple movie ticket ordering website

TixFlix is a movie ticket ordering website that uses Progressive Web App (PWA) to serve cross-platform devices.

This project was started from a simple statement: Ordering movie tickets using website or mobile application has matured in such a way that there could not be any more improvement that can be done… or is it?

Alright, now it’s time to find those little things that can be improved and create our solution!

Key questions

What kind of improvements can we make to make movie ticket purchase experience better?

What are the currently unknown wants of our customers that we can uncover?

Who are our competitors that we need to learn from?

The research

Understanding movie ticket purchasers

This step consists of user interview and competitor analysis that results in the creation of persona, storyboard, and user journey.

User interview

To explore what can be done to improve the movie ticket purchase experience, I conducted interviews with several frequent moviegoers that goes at least once a month.

The research revealed that they don’t know if there’s any good ticket purchase websites. Plus, there are no personalization of movie selection based on their interests.

Research insights

Overwhelmed by choice of movies

With so many movies showing at the cinema, it is hard to find what to watch.

Good ticket order experience is in mobile app only

Participants said that only mobile app has brought them good ticket purchase experience so far, not websites.

Seat selection woes

The seat diagrams and non-colorblind friendly legends makes seat selection harder.

The user

The user that TixFlix will target are frequent movie-goers who felt overwhelmed by many movie releases. Plus, they also wanted a cross-platform movie ticket purchase experience.

Empathy map of Jennifer, a frequent movie ticket purchaser who will use TixFlix
Empathy map of Jennifer, a frequent movie ticket purchaser who will use TixFlix
Persona of Jennifer, a frequent movie ticket purchaser who will use TixFlix
Persona of Jennifer, a frequent movie ticket purchaser who will use TixFlix

The empathy map and persona are created to represent the participants that are interviewed. Then, I tried to find out who our competitors will be.

The competition

Direct competitors of TixFlix

The competition for this business is other movie ticket purchase websites and application. TIX ID only offers mobile app, while Cinema XXI and GoTix offers both website and mobile app (M-Tix and Gojek respectively).

They offer the same basic feature to purchase and redeem movie tickets. Because most competitors do offer some kind of web-based solution, it makes sense for TixFlix to use web as the main platform.

Surprisingly, there are some opportunities that are found after the analysis:


Personalized movie recommendations

Create movie recommendations based on previous movies watched. To protect user's privacy, it's based on ticket purchase history only.

Sort cinema by distance

Show cinemas based on distance using browser location permission.

Accessible cinema seat selection

Create different patterns to distingush seat legends, especially for colorblind users.

Multiple payment methods

Provides e-wallet and card payment based of interview insights gathered.

The wireframe

Sketching the solution

The sketch started on paper, then designed digitally using Adobe XD. The design is verified using usability testing and iterated once.

Feature differences

Because TixFlix is designed for two different platforms, there are some feature differences.


  • Navigation is done using top navigation bar.
  • Has a traditional footer like most websites.
  • Users cannot redeem their tickets. Instead, users are instructed to download the mobile app.


  • Navigation is done using bottom navigation bar.
  • Doesn’t include any footer. Instead, it is hidden under account menu, just like a native application.
  • Users can redeem their tickets using the provided QR code.

The first usability testing

This activity is done using moderated remote usability study with 5 testers, 18-35 years old, and frequent movie-goers. Each session lasts 20-30 minutes and done without any additional tools.

The insights are shown below:

First usability test insights

Use QR to redeem

2 out of 5 people noticed that the first iteration uses barcode to redeem tickets. They say it’s usually done with QR code.

Where’s the recommendations?

Recommendations are missing from the wireframe. It needs to be fixed.

The prototype

An improved movie ticket purchase experience

The mockups and prototypes are also done in Adobe XD. To begin, I made some improvements based on the usability study.

The improvements

The prototype

Preview of the movie ticket purchase app
TixFlix accessibility considerations

The overall design choice of this app is intended to evoke the design of movie theaters. Dark mode is the standard for the website. The humanist, popular Montserrat as the headings and Metropolis as the body gives a simple, clean look. The icons used are css.gg that are open-source, web-compatible, and has an elegant look.

The accent color chosen are a shade of purple — a pop of surprise in the darkness of the rest of the website. In addition, a subtle semi-transparent navigation in several screens highlights the content.

Note: Style guides can be viewed on the prototype directly.

The second usability testing

“This website is clean and easy to use. The steps are logical and I appreciate the dark mode used in this website.”

A participant's impression on TixFlix

This activity is done using moderated remote usability study with
5 testers, 18-35 years old, and frequent movie-goers. Each session lasts 20-30 minutes and also done without any additional tools.

Overall, the results are promising. The success rate of each task is 100% and the calculated Net Promoter Score (NPS) is 60. Because of that, it can be said that the website satisfies the user’s needs and wants.

The conclusion

Finding opportunities in unexpected of places + learning Adobe XD

This project is a very unique challenge for me because I need to create something that I’m not familiar with. But, empathizing with users results in the discovery of opportunities; even it it’s just little things that can be improved.

In addition, this project also helps me to be familiar with Adobe XD and its difference with other UX tools such as Figma.

Thank you for reading this case study. I hope you enjoy it!

To connect with me, simply write your feedback in the contact page.