Enhancing Ticket Booking Experience with Accessible Light & Dark Modes

📌 Overview

Etathkara is a ticket booking platform for movies, events, and concerts. The goal of this project was to redesign the desktop experience with a focus on usability, accessibility, and visual consistency, while introducing a fully optimized dark mode.

🎯 Problem

Users often face challenges when booking tickets online:

• Cluttered interfaces make browsing difficult
• Seat selection is not always intuitive
• Poor contrast in dark mode affects readability
• Lack of consistency between pages increases cognitive load

🎯 Goal

Design a seamless booking experience that:

• Improves navigation and clarity
• Enhances seat selection usability
• Supports WCAG-compliant accessibility
• Provides a smooth light ↔ dark mode transition

👤 Target Users

• Young adults booking movies/events
• Users browsing late at night (dark mode users)
• Desktop users who prefer detailed seat selection

🧭 User Flow

The main user journey:

1. Browse homepage
2. Select a movie
3. View details
4. Choose showtime
5. Select seats
6. Proceed to payment

🖥️ Solution

1. Simplified Homepage

• Clear sections: Trending, Now Showing, Upcoming
• Strong visual hierarchy using movie posters
• Easy navigation with top menu

2. Focused Movie Details Page

• Highlighted “Book Tickets” CTA
• Key info (rating, duration, genre) placed above the fold
• Trailer option for engagement

3. Improved Seat Selection

• Clean, grid-based layout
• Color-coded seats (available, selected, occupied)
• Sticky booking summary panel

🎨 Visual Design

Light Mode

• Clean and minimal
• Neutral backgrounds (#F5F6FA)
• High readability for daytime use

Dark Mode

• Cinematic experience inspired by theaters
• Deep navy background instead of pure black
• Warm yellow accents for actions

♿ Accessibility (WCAG Considerations)

• Text contrast meets WCAG AA standards (4.5:1+)
• Avoided pure black to reduce eye strain
• Clear button states and readable typography
• Consistent spacing and hierarchy

🌙 Dark Mode Strategy

• Maintain same layout as light mode
• Adjust colors, not structure
• Use contrast and glow instead of borders
• Keep images vibrant for better visibility

🔘 Mode Switch Placement

• Positioned in the top-right header
• Easily accessible across all screens
• Follows common UI patterns

🧠 Key Design Decisions

• Consistency: Same layout across all screens
• Clarity: Reduced clutter and improved hierarchy
• Efficiency: Faster booking with fewer steps
• Accessibility: Designed for all lighting conditions

📈 Expected Impact

• Faster booking process
• Reduced user confusion
• Increased engagement in dark mode
• Improved overall user satisfaction

🚀 Reflection

This project strengthened my ability to:

• Design for accessibility and inclusivity
• Create multi-theme (light/dark) systems
• Balance visual appeal with usability
• Think in complete user flows, not just screens