A Google UX Design Professional Certificate project
Contents
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!
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?
This step consists of user interview and competitor analysis that results in the creation of persona, storyboard, and user journey.
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.
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 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.
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 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 sketch started on paper, then designed digitally using Adobe XD. The design is verified using usability testing and iterated once.
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:
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 mockups and prototypes are also done in Adobe XD. To begin, I made some improvements based on the usability study.
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.
“This website is clean and easy to use. The steps are logical and I appreciate the dark mode used in this website.”
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.
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.