01. OVERVIEW
Cinema XXI, or m-tix, is an online ticketing service for movie theaters. With over 10 million downloads, the app has proven to be an essential tool for its users. However, it still faces several challenges, including an outdated user interface and user experience inefficiencies that require improvements in both effectiveness and efficiency.
02. DISCOVERY
Design Audit
The initial step involved conducting a design audit to evaluate the app’s existing design. This audit covered key areas such as user interface design, the ticket booking flow, searching for theaters in specific cities, and the application of branding identity within the app.
Key Findings
Outdated Interface Design
With over 10 million users, the majority of whom are young people, the app’s design needs to align with the preferences and expectations of its target audience.
Lack of Membership Program
Introducing a membership program could significantly enhance user retention by fostering loyalty among Cinema XXI’s audience.
Inefficient Ticket Booking Flow
Users face several challenges when booking tickets. The ordering process can be restructured to make it more intuitive and user-friendly.
Presentation of Data and Information
Current data and information are not fully accessible or easy to comprehend. Further development is needed to improve clarity and usability.
03. DESIGN PROCESS
Sketching
Before creating high-fidelity designs, the designer begins by sketching rough ideas on paper. This step is crucial for exploring concepts and alternative design solutions. These sketches are guided by the problems that need to be addressed, such as improving the ticket booking flow, enhancing data presentation, and refining the overall design aesthetic.
Low to Mid-Fidelity Wireframes
Once the sketches are completed, the next step is to create wireframes. At this stage, the designer continues to explore various layouts and compositions. This iterative process helps identify the most effective design solutions to address the identified issues.
04. FINAL DESIGN
The final stage involved crafting the design with careful consideration of Cinema XXI’s branding. Below is a comparison between the previous design and the solutions proposed by the designer:
Home Page & Movie Detail
- The homepage lacked appeal for the millennial target audience. The designer revamped the overall design mood to be more contemporary and visually engaging. A new feature was also introduced, allowing users to choose different types of theaters to enhance their movie-going experience.
- The movie detail page underwent significant layout changes. In the previous design, overlapping CTAs competed for user attention, creating confusion and distraction. The designer reorganized the layout to ensure visual comfort and established clear prioritization for CTAs.
- Movie posters were redesigned to appear more dynamic and seamlessly integrated with other content elements.
Theater and Seat Selection
- For these pages, the designer introduced a more dynamic and less rigid visual style. The layout was meticulously refined to create better content hierarchy and visual balance.
- The seat selection interface was redesigned to resemble the actual seating arrangement in theaters, providing users with a more immersive and realistic experience when choosing their seats.
Order and Theater Details
- On the order detail page, the QR code was enlarged to simplify the scanning process when printing tickets. A larger QR code is easier for scanners to detect, making the ticket printing process more efficient and reducing long queues.
- The theater search page was completely overhauled. The designer categorized theaters by major cities, making it easier for users to find a theater by location rather than scrolling through an alphabetical list.
Additional Features
- Additional enhancements included redesigning pages that list theaters in a specific city.
- Another feature allows users to view all the movies currently playing at a particular theater, with a prominent Google Maps CTA to help users easily locate the theater.