Smart Interface Design Patterns - Part II

Problem Statement

Users visiting the Vienna Opera House struggled to find good seats at reasonable prices due to complex pricing tiers and a cumbersome seat selection process. Additionally, mobile users faced usability issues, and there was a lack of notifications for newly available tickets. Despite these challenges, our project needed to repurpose existing features rather than introducing new ones, within budget constraints.

Findings

When a new performance is announced, tickets tend to sell out quickly. However, due to the policy of free cancellation within 7 days of purchase (and up to 3 weeks before the performance), many tickets get reserved and then cancelled, making them available again. Currently, there is no system in place to notify users when these tickets become available. Usability interviews have revealed an interesting insight: visitors often do not prioritize the specific date of their visit. For performances running every evening for a week, the current UI requires them to choose the performance first, then the date, and finally the seat and price. It would be much more convenient for users to select their desired seat and price first, and then receive suggestions for performances that best match these criteria. Unfortunately, implementing such a system is not possible at this time.

UX-Concept

My core focus is on providing users with a wide array of seat selection choices, aiming to enhance their flexibility and ensure they find the perfect seat for their preferred event. To achieve this, I have envisioned two primary methods for users to select their seats:

• Seatmap Selection: Users can choose seats directly from an interactive seatmap, offering a visual and intuitive way to select their preferred seating arrangements.
• Guided Selection with Filters: Users can opt for a guided selection process with the help of filters, ensuring personalized seat options based on their preferences.

My goal is to deliver a seamless and user-friendly experience, similar to searching for accommodations on Airbnb. To improve seat comprehension, I propose offering high-quality seat photos and a 3D seating plan of the venue. This will allow users to make informed decisions about the seats they wish to choose.

Paper Wireframes & Tought Process

Frame 1 - Event Selection and Booking Options: Once users select their desired event, they are presented with two booking options: the interactive seat map or a guided selection process. This initial choice empowers users to proceed according to their preference, whether they want to explore available seats visually or receive tailored recommendations.

Frame 2 - 'Help Me Find a Seat' Feature Through the 'Help Me Find a Seat' feature, users can customize their seating preferences via various filter options and input fields. This feature begins with the "Who's coming?" section, allowing users to specify the attendees, including adults, students, children, and pets. This inclusivity ensures that users with service animals or specific needs receive detailed information and suitable seating options.

Frame 3 - Flexible Date Selection Understanding that users may have flexible schedules, this step offers both flexible and fixed date selection options. Users can explore available dates that align with their preferred show times, providing a seamless way to adjust their plans without overwhelming them. The filter can be as precise or flexible as the user requires and is skippable for convenience.

Frames 4 & 5: Budget Filter To avoid frustration, users are prompted to set their maximum price point before viewing seat options. This early budget filter ensures that users only see seats within their financial comfort zone, leading to a more satisfying seat selection experience.

Frame 6 - Customizing Options Incorporating accessibility needs, this step includes a filter or checkbox for users to choose seats that accommodate their specific requirements. This consideration ensures that all users, including those with disabilities, can find suitable seating options.

Frame 7: Filter Overview and Seat Map Access Users are given an overview of all their selected filters. With these preferences set, the interactive seat map is displayed above the selection button, allowing users to proceed with confidence that their choices will meet their needs.

Frame 8: Seat Options Display Based on the applied filters, users are shown the best seat options for their selected performance. The options are displayed as card elements, each with an image, price, relevant information, and a 3D view option. This layout helps users compare and select the most suitable seats easily.

Frame 9: 3D Seat View for Visual Understanding Upon selecting the 3D view option, users can see a high-quality, interactive 3D seating plan of the venue. The current selected seat is highlighted, and corresponding seats for multiple tickets are also marked, enhancing users' comprehension of their seat choice.

Frame 10: Group Bookings and Companions For group bookings or companions, there is an option to book seats next to each other. This step ensures that users can conveniently select adjacent seats, improving the booking experience for groups.

Frame 11: Final Selection and Date Confirmation After selecting their seats, users are shown an overview of their choices. If the date was not specified earlier, they can choose it at this stage, completing the flow to the checkout process. This final confirmation ensures that all user preferences are met before proceeding to payment.

Proposed solution & High Fidelity Mockups

To address the challenges faced by users in finding affordable, suitable seats at the Vienna Opera House, I devised a solution that simplifies the seat selection process, improves usability across devices, and incorporates comprehensive filters to cater to diverse user needs. By leveraging existing features and focusing on user-centered design principles, the proposed solution enhances the overall booking experience within budget constraints.

Key Components of the Proposed Solution:

1. User-Friendly Navigation: Simplifying the interface for mobile users, ensuring intuitive navigation through clear, concise options for seat selection and filtering.
2. Guided Seat Selection: Introducing a 'Help Me Find a Seat' feature that guides users through a series of tailored filters, from attendee details to budget constraints and accessibility requirements.
3. Interactive Seat Map: Enhancing the seat map with interactive elements and high-quality 3D views to improve seat comprehension and help users visualize their choices.
4. Comprehensive Filters: Providing a range of filters, including flexible date options, budget limits, and accessibility needs, to ensure users can find the perfect seat without feeling overwhelmed.
5. Group Booking Support: Incorporating options for group bookings, allowing users to easily select and reserve seats together.