A Google UX Design Professional Certificate project
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!
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.
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:
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:
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 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.