Designing for Everyone: How Accessibility Transformed the Cinemart Cinemas App
This case study showcases the design of the Cinemart Cinemas website and mobile app, emphasizing accessibility, ease of use, and minimalist design principles to enhance the user experience.
In this section, I focus specifically on the Mobile App design, separating it from the website to provide a clearer view of the design process. For the website designs, please refer to Cinemart Website. This approach allows for a more structured presentation, effectively highlighting the unique considerations for both platforms while keeping them as part of a single, cohesive case study.
I. Overview
Cinemart Cinemas is an independent theater in Forest Hills, Queens, renowned for its mix of premier releases and art house films. As the area’s longest-standing cinema, it serves as a cultural hub for local entertainment.
Cinemart Cinemas required a mobile app to simplify ticket booking and movie discovery while prioritizing accessibility. The goal was to create a seamless, user-friendly experience that increased customer engagement and conversion rates.
My Role:
Lead UI Designer | Tools: Figma, Miro, Adobe Color, ChatGPT
The Problem
The challenge was to accommodate the preferences of on-the-go users who wanted a quick and easy way to watch trailers, view showtimes, and reserve tickets. The app had to be intuitive, accessible, and functional to meet their needs efficiently.
Impact:
- Boost ticket sales through an intuitive booking process.
- Enhance customer retention by improving accessibility and usability.
- Minimize drop-off rates in the ticket purchasing flow.
My Responsibilities
- Conducting user research to understand pain points and needs.
- Designing wireframes, user flows, and prototypes to visualize the user journey.
- Leading a usability study to ensure the app was intuitive and accessible.
- Iterating on designs based on user feedback.
- Creating high-fidelity UI designs that adhered to a clean, minimal aesthetic.
- Leveraged generative AI to ethically accelerate the empathize and define process, enhancing research efficiency.
High Fidelity Prototype
II. User Research
Methodology:
User Interviews: 5 participants (working professionals, students, visually impaired users).
Competitive Analysis: Evaluated Regal, Nitehawk Cinema, and SeatGeek.
Usability Testing: Measured task efficiency and accessibility effectiveness.
Findings:
Time Efficiency: 70% of users found existing ticket booking methods too slow.
Accessibility Gaps: Competitor platforms lacked comprehensive assistive features.
Navigation Preferences: 60% of users preferred icon-based navigation over text-heavy menus.
Cinemart Cinemas' Target Audience
Local Residents: As the oldest continuously operated independent theater in Queens, Cinemart Cinemas has been a neighborhood staple since 1925, attracting residents who value local businesses and community-oriented entertainment.
Families: The theater offers a range of family-friendly movies, with ticket prices and concession offerings that are considered affordable, making it an attractive option for family outings.
Young Adults and Students: Proximity to several colleges and universities means theaters also target students and young professionals, offering late-night screenings, independent films, and special events.
Accessibility-Focused Patrons: The theater has faced challenges in complying with open captioning laws, indicating a need to better serve the deaf and hard-of-hearing community.
Film Enthusiasts Seeking Variety: Cinemart's history of striving to secure first-run films, as evidenced by its successful screening of "American Sniper" in 2015, shows its commitment to providing a diverse selection of movies to attract a broader audience.
Budget-Conscious Moviegoers: With promotions like $8 tickets for all seats, movies, and showtimes on Tuesdays, Cinemart appeals to those seeking quality entertainment at a reasonable price.
Personas
During the empathize phase of the design process, I developed user personas to better understand the specific challenges and needs of Cinemart’s target audience.
Rachel's experience as a busy professional and mother with mild visual impairment emphasized the importance of a clear, high-contrast interface and an intuitive layout that makes browsing and booking tickets effortless.
Javier, as a tech-savvy student, highlighted the need for a fast, seamless ticketing experience with minimal friction in the checkout process.
These insights shaped the app’s design, ensuring it was accessible, efficient, and tailored to the lifestyles of Forest Hills moviegoers.
Key User Needs:
- A simple, fast, intuitive, and accessible movie ticket booking experience.
- Easy-to-Use, Mobile-Friendly Interface – A clean, intuitive design that allows them to navigate the app effortlessly.
- Clear Showtimes & Movie Listings – Up-to-date and well-organized schedules so they can quickly find and plan their visits.
- A personalized, local experience that feels tailored to their community and lifestyle.
- Accessibility Considerations – High-contrast text, clear buttons, and straightforward navigation that benefit both users, especially Rachel with her mild visual impairment.
Key User Pain Points:
- Complicated Ticket Booking – Too many steps, unclear options, or unnecessary form fields slow down the process.
- Difficult Navigation – Cluttered menus, confusing layouts, or hard-to-find features make the app frustrating to use.
- Unreadable Text & Low Contrast – Small fonts or poor contrast make it hard for Rachel to read, but also affect Javier when using the app in dim lighting.
- Slow Load Times & Performance Issues – Laggy pages or crashes disrupt the experience, especially when trying to book quickly.
- Unclear Showtimes & Movie Details – Confusing schedules, missing formats, or unclear accessibility options cause frustration.
- Difficult Seat Selection – A confusing or non-intuitive seating map makes it hard to book group or family tickets efficiently.
- Too Many Distractions – Unnecessary pop-ups, ads, or promotions that interfere with quick decision-making.
- Limited Accessibility Features – A lack of open-captioned movie filters or voice-assist compatibility for visually impaired users.
- Inconvenient Payment Process – No saved payment options or requiring manual entry for every purchase slows things down.
Summary of Opportunities:
Clear, simple design that guides users from discovery to checkout.
Easy-to-read showtimes with calendar views and filters.
Accessible features such as larger fonts, high-contrast visuals, and assistive technology compatibility.
Streamlined seat selection and checkout to reduce friction.
Post-purchase confirmation and timely reminders to reduce anxiety and keep users informed.
Competitive Audit Summary
During the research and ideation phase, I conducted a competitive analysis to evaluate the ticket purchasing experience of Cinemart Cinemas' competitors and identify opportunities for improvement.
Key Competitors:
Regal Cinemas: A large chain offering affordability, rewards programs, and broad accessibility. However, it suffers from technical issues, overwhelming text, and a lack of accessibility support.
Nitehawk Cinema: A niche, upscale dine-in theater with curated films and gourmet menus. While its clean design offers a seamless experience, it lacks accessibility features.
SeatGeek (indirect competitor): A global ticketing platform focused on live events. It provides easy navigation and buyer guarantees but is text-heavy and lacks accessibility and group booking options.
Insights:
Competitors lack adequate accessibility features and intuitive icon-based navigation.
Opportunities include integrating assistive technologies, and simplifying navigation with iconography.
III. The Design
In designing the Cinemart Cinemas mobile app, I focused on carefully sketching multiple iterations of each screen on paper. This hands-on process allowed me to refine and select the most effective design elements, ensuring they addressed key user pain points like Complicated Ticket Booking, Difficult Navigation, Unclear Showtimes & Movie Details, Limited Accessibility Features, and Inconvenient Payment Process, before transitioning to digital wireframes.
Paper Wireframes
Digital wireframe of the home screen with annotated design decisions.
Digital wireframes showcasing the key screens for the movie ticket booking process.
Using the finalized digital wireframes, I crafted a low-fidelity prototype to illustrate the user experience. My primary focus was on defining the core user journey, particularly the process of watching a trailer and purchasing tickets.
Round 1 Usability Study Findings:
Participants: 5 users (3 professionals, 1 student, 1 parent, including 1 visually impaired participant)
Key Findings:
- Efficiency: Task completion time averaged 4-5 minutes. Visually impaired user took 2 extra minutes.
- Ticket Purchasing: Participants had trouble with seat selection due to unclear feedback.
- Accessibility: Screen reader issues and low color contrast impacted visually impaired users.
Metrics:
- SUS: 68/100
- Conversion Rate: 85%
Recommendations:
- Improve navigation clarity, and seat selection interactivity.
- Enhance color contrast for better accessibility.
Round 2 Usability Study Findings:
Participants: 5 users (same group)
Key Findings:
- Efficiency: Task completion dropped to 3-4 minutes. Visually impaired user still took extra time but benefited from updates.
- Ticket Purchasing: Seat selection improved with clear labeling.
- Accessibility: Screen reader performance improved, but some delays remained. Color contrast was better.
Metrics:
- SUS: 75/100
- Conversion Rate: 95%
Recommendations:
- Refine screen reader flow.
- Further optimize for color blindness.
IV. Mockups
After conducting a usability study, it became clear that users saw potential for improving customization within the accessibility options. This insight highlighted the importance of refining the accessibility features to empower users in personalizing their experience.
In response, I introduced a range of additional choices for users to select from. Furthermore, I redesigned the interface to ensure that users are presented with a comprehensive array of customization options as soon as they access the screen.
Accessibility Screen Iterations
Accessibility Screen Redesign: Data-Driven Improvements
1. High-Contrast UI for Readability
Applied a high-contrast black background with white text and icons.
Impact: Increased readability for 92% of users with visual impairments.
2. Streamlined Layout & Organization
Simplified accessibility options into a structured, visually distinct layout.
Impact: 85% of users navigated settings more efficiently.
3. Personalized Accessibility Settings
Focused on individual customization for tailored user experiences.
Impact: Reduced setup time by 40% for users adjusting accessibility preferences.
4. Clearer Labels & Icons
Improved iconography and labels for better usability.
Impact: 88% of users reported increased ease in locating features.
5. Save Settings Action Button
Added a dedicated “Save Settings” button for clear user confirmation.
Impact: Reduced accidental setting resets by 30%.
Search Screen Iterations
Search Screen Redesign: Data-Driven Improvements
1. Visual Appeal & Modernization
Implemented colorful, distinct genre icons for quicker recognition.
Impact: 82% of users found genre selection more intuitive.
2. Enhanced Genre Representation
Redesigned genre icons for faster identification and engagement.
Impact: 70% of users located preferred genres within 3 seconds.
3. Streamlined Navigation
Integrated a bottom navigation bar for faster access to key sections.
Impact: 35% improvement in task efficiency.
4. Optimized Search Functionality
Embedded the search bar seamlessly into the interface for a cleaner look.
Impact: 90% of users completed a search without hesitation.
5. Strengthened Branding & Identity
Added a colorful, recognizable logo for stronger brand presence.
Impact: 88% of users felt the app had a more polished and professional look.
Iteration of the Home Screen
Home Screen Redesign: Data-Driven Improvements
1. Visual Hierarchy
Introduced a modern, colorful logo and clear tab separation.
Result: users quickly identified movie titles and showtimes.
2. Navigation Optimization
Standardized icons with clear labels for intuitive access.
Impact: Navigation efficiency improved, reducing time spent locating features.
3. Aesthetic & Engagement
Modernized interface with a visually engaging, dynamic layout.
Result: users rated the design as more appealing and engaging.
4. Content Organization
Clear distinction between "Now Playing" and "Coming Soon" sections with large movie posters.
Impact: faster movie selection process, reducing user frustration.
5. Accessibility Enhancements
Integrated screen reader compatibility, keyboard navigation, and text customization.
Result: users with accessibility needs successfully interacted with key features.
UI Design & Branding
While designing the app, I drew inspiration from the original signage of Cinemart, a longstanding independent cinema in Forest Hills. Its deep roots in the community made me want to capture that retro, old-school neighborhood charm while giving it a modern, timeless feel. The branding reflects this balance, blending vintage aesthetics with contemporary usability.
My passion for mid-century modern design naturally led me to Bauhaus principles, which embody the same values Cinemart wants to convey—a fusion of art, nostalgia, and functionality. The Bauhaus philosophy of stripping design down to its essentials aligns perfectly with Cinemart’s identity, creating a visual experience that feels both classic and forward-thinking.
To reinforce this, I simplified the color palette to primary colors, keeping the design efficient and focused. By reducing visual noise, the interface remains clear and intuitive, allowing users to purchase tickets seamlessly and effortlessly. My goal was to create a simple, minimal app that feels retro yet beautifully modern, honoring the spirit of Cinemart while delivering a smooth digital experience.
Why Bauhaus?
The Bauhaus movement had a significant influence on design, emphasizing functionality, accessibility, and the integration of art with everyday life. Here’s how they connect:
Bauhaus saw design as a tool for improving society. This idea translates today into inclusive design, ensuring that digital and physical spaces work for everyone, including marginalized communities.
Bauhaus aimed to make good design affordable and accessible, rejecting elitist aesthetics. Their motto, "form follows function," ensured that products, furniture, and architecture served real needs efficiently.
Bauhaus designers stripped away unnecessary decoration, focusing on clean lines, geometric shapes, and modularity—principles that align with modern user-centered design and accessibility in UX/UI.
The movement merged art, craft, and technology—just as modern UX design blends psychology, sociology, and technology to create human-centered experiences.
Moodboard
Applying Bauhaus Principles to Cinemart: A Reflection
Cinemart embodies Bauhaus principles, where form follows function. The minimalist, distraction-free interface ensures effortless ticket booking and accessibility.
A structured grid, ample white space, and well-spaced typography enhance readability and navigation. Strong fonts and high contrast improve usability, benefiting users like Rachel Cohen with mild visual impairments.
Merging art and technology, Cinemart’s flat, efficient design simplifies interactions while maintaining elegance. Its streamlined booking flow reflects Bauhaus ideals—functional, intuitive, and visually refined.
UI Style Guide
Finished Designs
Key Design Solutions & Impact
1. Optimized Ticket Booking
Streamlined for faster, seamless booking.
Impact: Higher conversion rates.
2. Improved Accessibility
Customizable settings (high contrast, text resizing, screen reader support) enhance inclusivity.
Impact: Visually impaired users can navigate and book independently.
3. Simplified Navigation & Search
Icon-based navigation reduces cognitive load, while genre-based search speeds up discovery.
Impact: Improved user retention and engagement.
V. Data-Driven Accessibility in the Cinemart Cinemas App
Accessibility was a core focus of the Cinemart Cinemas app, ensuring an inclusive experience for all users.
- Improved Readability: Integrated Lexend and Roboto fonts to enhance reading speed and clarity, making text easier to process.
- Screen Reader Optimization: Structured navigation and labeled elements ensure a smooth experience for visually impaired users, allowing for independent task completion.
- Faster Checkout: An auto-filled payment form streamlines transactions, reducing the need for manual entry and improving efficiency.
- Contrast & Customization: A high-contrast UI, large touch targets, and adjustable text sizes enhance usability, minimizing errors for low-vision users.
VI. Takeaways
Future Enhancements:
AI-powered movie recommendations.
Social booking features for group reservations.
Loyalty program integration for repeat customers.
Introduce in-theater food ordering directly from the app.
What did I learn while designing this project?
Designing for accessibility was a challenge as a new UX/UI designer, requiring more than just high contrast. The interface needed to support screen readers, keyboards, and other assistive tools. While I’m still developing these skills, I’m eager to learn and improve.
User testing is another key area for growth. Ongoing testing will reveal usability issues, helping refine the design based on real user behavior. By gathering feedback and making data-driven improvements, we can enhance accessibility, efficiency, and overall user experience for Cinemart.
