Multiplex Tickets App
Visual Design | UI/UX Design | Personal Project |
Adobe XD | Photoshop
Similar to Fandango, Multiplex Tickets is a movie ticket app that helps you book your tickets easily.
Design Goals
-
Create a simple flow for movie ticket booking mobile application.
-
Tickets could be booked in as few actions as possible.
-
Cancel with ease and with the ability to browse movies and find theaters faster.
USER PERSONA
In order to solve a real user problem, you need to have a clear problem statement in mind; in order to write this problem statement, you first need to understand your users and their needs. I created a user persona detailing what this user in this particular scenario needs.
WIREFRAMES & FLOW
To lay out content and functionality I created wireframes and a user flow which takes into account the user needs and user journeys.
COLOR & TYPOGRAPHY
APP SCREEN DESIGN
With the goals established, persona created and wireframes complete, time to move on to create the visual mockups for the app in Adobe Xd.
1: LOGIN
Users have the option to either Log into their account or tap SKIP and just go straight to finding a movie.
2: FORGOT PASSWORD
Users have the option to either Log into their account or tap SKIP and just go straight to finding a movie.
3: SIGN UP
If users don't have an account they can sign up for one by tapping SIGN UP.
Once users come to this page they have to fill out the following information such as (name, username, mobile number, email, password, and phone number).
After filling out the information and tapping Submit they will be sent an email with instructions to Login.
NAVIGATION
MOVIES
Once users Login or tap Skip they are brought to the movies screen which is the main screen.
Users can:
• See which movies are playing in theatres now or coming soon.
• See most recent films playing in theaters near your location.
• Use the search bar to search for movies or theaters whichmakes it even easier to find what they want.
• Find out more details about the film or buy tickets for that film by selecting one which will bring them to the MOVIE INFOscreen.
THEATERS
• FIND THEATERS FASTER: simple search bar lets you enter your location to find theaters near you.
• Search for dates by using the drop-down menu, and change location.
• Shows the nearest theaters with the address according to the location by miles.
• Connect with Google Maps for assisted driving directions by tapping on the theater.
•Find out more details about a film by tapping on it.
MOVIE INFO
A detailed description page where users can:
• Watch high-quality trailers, exclusive interviews & browse movie photos.
• Review movie synopsis, cast, ratings, andruntimes.
• Buy Tickets
SHOWTIME DATE/SELECTION
• View MPAA ratings, the most accurate movie times according to the theater location.
•Users can easily select the date and showtime.
NUMBER OF TICKETS
A detailed review of the film chosen which includes the, MPAA rating, runtime, date and time selected, address of the theater and the auditorium it's showing in.
• Easily select a new showtime.
• Purchase tickets without going to the theater.
• Users can specify how many tickets he/she wants to buy.
PAYMENT
After selecting their movie and ticket quantity
users can view review their booking details before selecting their payment option and easily go back and make any revisions if necessary.
• Users can pay from a saved card option.
• Payment from a saved card option can reduce user time by not typing in card details every time.
• Add a new method of payment
• Enter new credit or debit information.
• Users can checkout through a different payment option.
• Enjoy fast and secure checkout
TICKETS
• Purchased tickets for movies that lists the movie, date, showtime, and theater.
• Scannable QR code that can be used at the theater.
• Easy click to cancel tickets.
• Can't make your movie?
You can return or exchange your tickets. Anytime up to 30 minutes before the film starts.
SETTINGS
• Users can change their account password, email, phone number, and payment information as well.
• View privacy policy, terms of use, contact support if there are any issues and easily log out of their account.
ANIMATED PROTOTYPE
After the visual mockups were created and complete I moved on to the final step in animating the prototype in the Principle app.
