top of page

Cinepax
 

Movie Ticketing App

Andriod.jpg

Role

UX Generalist- Worked on research, design, and prototyping.

Solo project for Google certification.

Process

Understanding and exploring the problem, finding the solution, iterations, wire-framing, usability testing, hi-fi design, and prototyping.

Tools

Adobe_Photoshop_CC_icon.svg.png
Google_Sheets_logo_(2014-2020).svg.png
google-forms.png

OVERVIEW

'Cinepax’ is a leading cinema house in Pakistan but lacks online presence. Designing a mobile app will not only bring convenience to their users but also have competition edge by being the first ones among competitors to bring an experience of booking tickets directly from the app without waiting in line outside the ticket booth at the cinema.

​

This is a personal project that I started during Google Certification. I was given a prompt and then after doing an initial market research, it was decided to explore a real-time problem rather than a hypothetical one. 

PROBLEM

Users doesn’t have an option to buy tickets online other than standing in a que at the cinema.

GOAL

Provide users with an experience that could bring value in their lives by giving efficient way of booking movie tickets.

USER RESERACH

SUMMARY

People living in Pakistan will be the users of this app, so I conducted most of the interviews over phone. While interviewing , I realized that users just need the basic purpose (i.e  book the ticket through app) to be fulfilled as they haven’t used any ticketing app before to book the tickets and doesn’t know how experience could be made better .Currently most of the websites just show the timings and doesn’t give the option of booking it online so they were not clear what else could they ask for in an app.

 

This made me interview people living in US as well (they already have many cinema apps and could point out positives and negatives easily)  for detailed research through which I was able to not only fulfill their needs but also bring better experience after collecting the info from the US participants.

In short, I had to change my research direction to obtain more data after I started the interview process.

AFFINITY MAP

Affinity Map - PP.jpg

PAIN POINTS

1

BOOKING TICKETS

There is no option of selecting seats and booking tickets online due to which people have to wait in long lines at ticketing booths.

3

GENRE / FILTER

Users want to see same genre movie together so that they don’t have to open each movie and go through the details

2

RATINGS / TRAILERS

User wants to see IMDB ratings and trailers in the app. They don’t want to close the app and then search for ratings seperately.

4

SHARING TICKETS

While booking for a group,it gets difficult to share with friends and the one with the code or tickets has to wait for everyone to join before entering. 

PROBLEM STATEMENTS

PERSONAS

Ali is a college student with limited leisure time who needs option of online booking seats for movies and sending individual tickets to friends because he wants to skip lines and waste as less time in the process of watching movie as possible.

Zoha Ahmed is a busy working mom who needs to book her movie seats and order food easily without going to cinema because she barely gets any leisure time with friends and doesn’t want to waste standing in line.

Kyler is a movie buff who needs movie ratings and genre specific lists because this will make it easier for him to decide movie for his impromptu plans

USER FLOW

After completing the analysis of the user's need I made an initial  flow of a first time user, to get an idea of how many screens would be required for the next phase i.e wireframes.

Google UX Design Certificate - User flow [template] (3).jpg

PAPER WIREFRAMES 

I started off with sketching five versions of the 4 most important screens. After going through pros and cons of each version, selected components  that seemed the most workable and converted them into digital wireframe. 

WIREFRAME TO MOCKUP

USABILITY STUDY

There were two major usability studies conducted ; first one with low-fi prototype and second one with hi-fi prototype. Study included a college student, working mom/dad, movie enthusiasts and senior citizens. 

 

A smaller usability test was conduct during the design phase with a small sample of users to vote between light and dark themes. Eventually both themes will be available but for this stage I wanted to work on one theme at a time.

​

Users were asked to perform given tasks, which were then measured by KPIs that were TSR, SUS and UER. 

FINDINGS

ROUND 1 

  1. Filter icon was difficult to find and decipher
     

  2. Interactive seat option was preferred rather than scroll option

  3. CTA made the flow smooth and easy

ROUND 2 

  1. Seat map annotations were not very clear
     

  2. Selecting seats and adding tickets were a bit confusing for most users

  3. Sign-up page should be brief

  4. Cancellation or editing reservation option was hard to find

SIGN-UP PAGE 

Initially sign-up process was spread on 3 pages, after the usability study, only the basic info for creating an account is arranged on a single page for a quicker and better experience. While moving payment option to the checkout page.

​

​

BEFORE

AFTER

Sign Up Account 1old.jpg
Sign Up Account 4New.jpg

BEFORE

BOOKING PAGE 

Map has always been interactive but due to drop-down bars, users got confused what to select first. To make the flow easier , I have directed people to select seats first and then ticket bar opens.

Also, changed the color of map annotations for more clarity.

Ticket old.png

AFTER

Ticket new.jpg

BEFORE

AFTER

CHECKOUT PAGE 

Users had problem finding cancel button, so I added icons for cancel & edit at the bottom of the details card. Removed the option of credit card info from the sign-up page and added it in checkout page for first time user, that can be saved for future transactions.

CheckoutOld.jpg
CheckoutNew.jpg
screens horizontal vertical.jpg

PROTOTYPE

Prototype - screenshot.jpg

STYLE GUIDE

BACKGROUND

BUTTON

TEXT

colour style.jpg

TYPEFACE

Typography2.jpg

BUTTONS

Button.jpg

FONT

Typography.jpg
Typography 1.jpg

ICONS

Icons.jpg

CARDS

Cards.jpg

ACCESSIBILITY CONSIDERATIONS

1

Mobile is primarily used by hands and a lot of people face hand tremors that makes it difficult to select options easily, this led us to design negative space between clickable objects and tried to minimize the usage of small icons and buttons.

2

Many people find it difficult to recognize various icons and we analyzed this problem during the first usability study. To keep the app friendly for all, we used only universal icons and maximized the usage of CTA buttons.

3

Dark modes normally puts strain on people with eye problems, to make everything readable and easy ,we have used font colors with required contrast ratio .

WHAT'S NEXT?

During the process I prioritized certain parts of the app that helped me achieve project's goal and solve the problems faced by the users. Second phase would include detail menu, location page , food items and light mode feature. 

TAKEAWAY

Being my first ever UX project, I feel excited about the outcome. It has given me confidence and along the process I have also realized that there is still a lot to learn. One thing that I understood quite soon in the project was that users can help reach the goal if you observe and listen to them carefully. It is very important to understand how a user mind works. Creating colorful pages is easy but making it user friendly is the real task. I used Figma for design phase, it was fun to learn a new tool especially the interactions for the prototype .

bottom of page