CineX – Husain Zaidi

CineX - V.R. EXPERIENCE

Project Type

UX, Interaction Design

Project Output

Video Prototype for V.R. Experience

Project Length

2 weeks

TEAM

Husain Zaidi, Bhavya Gudka

MY ROLE and PROJECT SUMMARY

For our interaction design academic project, we had to design and prototype a VR or AR experience, which could be adopted in real-world scenarios and should exhibit fun micro-interactions for the users. We wanted to not only create a fun experience but also try and address a missed opportunity and potentially solve a niche problem that exists in the market today. We aimed to enhance the movie ticket booking experience for the users. The idea was that users should be able to experience the auditorium and the selected seats before they book the ticket so that they are fully informed and confident about their choice of theatre and choice of seats.

I and Bhavya were working in a group and had an equal contribution to almost all stages of the project. However, we each have our strengths that played a crucial role in the development of the project. I took the stab at inception of the idea and the concept development and we both nurtured it. We then decided on a prototype storyline and all the design of possible micro-interactions involved. After that, I took the charge of sketching, creating 3D models and making the animation walkthrough, while Bhavya took charge of creating micro-interactions on after effects and post-processing and compiling the animation clips.

Current Ticket Booking Experience

Thanks to mobile technology and high-speed internet, it is so easy to make reservations, book a fight, hotel or movie tickets. The current generation mobile apps also show you the auditorium seating layout and lets you choose your seats. Pretty handy!

As swift as the current process is, there is room to improve the overall ticket-booking experience. Some of the missed opportunities in present user experience are:

The movie hall layout presented at the mobile app does not accurately depict the scale of the auditorium. Hence, the users are sometimes disappointed by the experience presented against their expectations.
The app does not provide adequate information about the facilities available at the theatres. Users have less information to make decisions about their choice.
From all the vast majority of available theatre choices, if presented with sneak-peak into the theatre experience, users are better informed about their choice and expectations.

CineX: Cinemas Experienced in VR

CineX is a mobile app that lets you experience a movie theatre through virtual reality while you’re booking the movie tickets. The VR feature integrated within the app is compatible with every major VR device. It lets you experience the theatre lobby, auditorium and view of the movie screen from any chosen seat.

The user-flow of the app is simple and linear, like any other movie ticket booking app.

The user enters the V.R. mode upon clicking ‘Experience this Theatre’ for a paricular theatre.

CineX: The Virtual Experience

This video is the fnal prototype concept video, showing the user interacting with the the theatre, auditorium and the seats in Virtal Reality. The users can experience the seats before booking, and then choose to either continue to book the selected seats or exit out of the VR experience back to the list of theatres.

After selecting the desired seat in the VR experience, the user will be redirected to the app with theater layout screen with the selected seat where they can choose multiple seats if they wish to and then continue to payment gateway. The user journey of ticket booking experience ends here with a delight.

Behind the Scene: The Process

Sketching

After the brainstorming session and deciding on the storyline and high-level microinteractions, we wanted to test out the experience before diving full-stack into the development phase.

So on a VR 360 grid template, I sketched out a rough layout of the auditorium and the theatre lobby. Then we processed these templated into photo-grid app to stitch it to 360 degree pan view and voila! We could experience the frst look of the sketched B&W Cinema lobby.

Sketches of theatre lobby and auditorium on a VR 360 Grid.

3D Modelling

This is where my architectural background really came in handy. I quickly made a rough schematic plan of a theatre lobby and auditorium and started building the 3D model of it in SketchUp. I paid very careful attention to the areas where the user would be interacting with, such as the snack bar, ticket counter, auditorium entrance, etc. Pre-planning the storyline really saved us a lot of time.
After finishing the 3D modeling, I imported the models to Lumion and created the animated walkthrough as per our storyline.

Section of the 3D models created for the mockup of Theatre Lobby and Auditorium.

Behind the Scene: Microinteractions

Defining the Rules

Once we knew the storyline of the user journey, we were able to pin point what all touchpoints the user would be interacting with in the virtual world. We started to expand on the possiblities of what all options the suer would have for each of those touchpoints, hence how many different types of interactions we would need. This really cleared our vision about edge cases amnd Loops that the user-fow could have and hence we were able to eliminate that.

Microinteraction Metaphor: Light bulb

In the CineX VR experience, an interaction point icon in peripheral vision is displayed at 10-50% opacity. When the icon enters the Crosshair, it turns to 100% opacity, giving it ‘turning on’ effect like a Light Bulb.

Microinteraction Metaphor: Blooming Flower

An animation mimicking a blooming fower is triggered when a user hovers over an icon for pre-set time, as a feedback of the action being registered.

Microinteraction Metaphor: Door Knob

When the user confrms an action which takes him to a new space in VR, an animation of the icon turning sideways like a door knob is played, as a subtle indication of entering a new space.

Microinteraction Metaphor: Magnifying Glass

The Icon of an interaction point in peripheral vision is displayed at 30% scaled down size of the original. When the icon enters the Crosshair, it turns to its 100% size, catching user’s attention, giving it ‘magnifed’ effect as the Crosshair is a Magnifying glass.