Overview
Background: The cinema app is created to streamline and enhance the movie-going process for users. The project focuses on solving common frustrations and designed with both convenience and engagement in mind. The app is designated for cinema companies therefore it was not named.
Role: UX Research, UX/UI Design, Product design, Visual Design, Prorotyping
Toolkit: Figma, Adobe CC, FigJam, Google Forms
Duration: August - October 2024 (6 weeks)
Project Goals
01 | UX
Create a top-notch user experience while focusing on accessible movie app while maintaining a quick and easy navigation in addition to all movie details and complications.
02 | UI
Pay attention to the interface design of my movie app and challenge myself in designing it in dark mode.
It should be user-friendly, intuitive, and appealing to attract new users.
Competitive Analysis
I studied various movie apps (Locally and internationally) to identify patterns and categorize their offerings for users.
Pros:
Booking tickets process is simple and straightforward
Simple pages and easy to understand for all ages
Interactive transitions between pages
Easy navigation
Clear instructions and reading through page
Accessible design
24/7 customer service
Cons:
Poor navigation through movies and menus
Outdated design
No context in almost all pages
Glitches and errors occur while tapping on features
Each page has different color palette and/or layout design
Inconsistent color palette
Ordering food & drinks feature is available only via web
Survey Results
I conducted a survey on Google Forms to gather information and understand user preferences, needs and potential frustrations. 20 people have answered.
Product Roadmap
After collecting data from the survey and competitive analysis I knew exactly what kind of features I needed to create a convenient and easy movie app for the users.
Wireframes
After completing my research, I sketch ideas and thinking of next steps in dark mode version.
UI Design
Why Designing in Dark mode?
Dark mode enhances the cinematic experience by creating a sleek, immersive feel that aligns with the atmosphere of a movie theater. It reduces eye strain in low-light environments, making it ideal for users who browse the app in darker settings, such as at night or in a cinema.
Why choose this color palette?
The primary red color grabs attention and radiates energy, reflecting the emotions of movie-watching.
The secondary gray is a color that balances the boldness of the red and creates harmony in the interface.
Homepage- Movies
The user can view all the movies that are in theaters right now or coming soon.
Buy Tickets Process
The user can purchase tickets via app, select the format and ticket type they want and book their seats.
The seats are sorted by 3 colors- Reserved, Available and Selected.
They can choose only the seats which are available for them.
Ticket Confirmation & Widget
The user gets a ticket order confirmation after purchasing and a widget can be added to their phone
( + club members get the extra timer benefit feature so they won't miss the movie and skip trailers! )
For premium club members only.
The members can enjoy many benefits such as ordering food & drinks that will be ready when they arrive to the cinema.
Express Pick-Up!
A menu dedicated to the user's order history information- whether it's past orders or upcoming orders in the new few weeks.
The user can view orders and cancel upcoming orders if
they need to.
Order History & Cancel Order
Profile Menu- Saved movies and Notifications Sections
In the profile menu, the member can edit their profile and view options such as reminders and notifications, log out, customer support and more.
Dark mode vs. Light Mode Version
Prototype Testing
Thanks for watching!
You can test the prototype here ( via web only ).