Seismic Cinemas

Responsibilities

Conducting interviews, competitive audits, paper and digital wireframing, low and high-fidelity prototyping, usability studies, accessibility considerations, design iterations, and responsive design.

  • Author: Ehsan Ayoubi

  • Timeframe: November 2022 to December 2022

  • My role: UX designer designing Seismic Cinemas from conception to delivery.

User Research Summary

I conducted moderated usability studies and created empathy maps to understand user needs. I found that users see going to the movies as a fun, relaxing activity meant to be enjoyed with friends and family. Therefore, a seamless user experience from the moment they enter the site is essential.

Users highly value informative content and a friendly UI.

Pain points

Movie theater companies often use deceptive patterns to encourage users to spend more.

Movie theater companies often rush users into decisions, resulting in an unfriendly user experience.

Transparency with users is not always maintained.

Meet the Persona

Ali, a high school student, needs transparency when buying tickets to ensure the best experience while watching movies with family and friends.
Dashboard mockup
Dashboard mockup

User Journey Map

Mapping Ali’s user journey highlighted the importance of a friendly user interface in making customers feel confident about their purchase.

Sitemap

My main goal in creating the sitemap was simplicity. The ticket-buying process should be straightforward and free of unnecessary detours, ensuring efficiency and user-friendliness.

Paper Wireframes

Considering user pain points related to transparency and interface friendliness, I sketched out the paper wireframes.

The home screen, shown on the right, features a straightforward and uncluttered user interface.

Digital Wireframes

Transitioning to a digital wireframe revealed many missing components that paper wireframes couldn’t accommodate. I used this opportunity to address potential pain points before user testing.
Dashboard mockup
Dashboard mockup

Low-fidelity prototype

I created a low-fidelity prototype to represent the user flow for searching and purchasing movie tickets.

At this stage, I’ve made several improvements from the original paper wireframe.

View Seismic Cinemas Low-Fidelity Prototype.

Usability study: findings

Here are the main findings uncovered after the usability study:

Findings

Users want to see the location they selected when choosing the date and theater.

Users were confused about the purpose of the best seat ratings on the seat selection screen.

Users were concerned by the absence of a confirmation page thanking them for their purchase.

Before and After Usability Study: Theatre Selection

To show users their selected location and provide an easy way to change it, I added a button that takes them back to the location selection screen and displays their chosen location.

Before and After Usability Study: Seat Reservation

Based on insights from the usability study, I improved transparency by clarifying the key. This helps users make more informed decisions about the best seats in the theater.

Mockups: Original screen size

Incorporating feedback from usability studies and critique sessions, I finalized the mockups for the Seismic Cinemas website.
Dashboard mockup
Dashboard mockup
Dashboard mockup

High-fidelity prototype

My high-fidelity prototype followed the same user flow as the low-fidelity prototype, incorporating feedback from usability studies and critique sessions.

View
Seismic Cienemas High-Fidelity Prototype.

Takeaways

Our user test groups found the design extremely straightforward and non-distracting. They also appreciated the feature for viewing the highest-rated seats in the theater.

I learned the importance of not being attached to designs. Throughout this process, I had to completely redo several color palettes and other components that initially detracted from user functionality.

Accessibility Considerations

1
Visual Hierarchy

Different sized text representing visual hierarchy

2
High Contrast Colors

High contrast colors for easy reading of texts.

3
Icons

Seats designated for accessibility are marked with icons for easy identification.

Contact Me

Interested in working together? Have any questions? I'd be happy to answer, Please fill out this form and I'll get back to you soon.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.