Cinema Beat

Project Overview
This is an end to end mobile application of an open source calendar application of repertory screenings in Austin, Texas. Repertory cinema is a type of moving going experience that specializes in showing classic or notable older films (as opposed to first run films). Viewers are transported to another time and place where often times, the theater itself is of a different era.
View Prototype
Task: Creating a mobile application
Role: UX/UI Designer
Duration: 3 weeks
Tools: Adobe XD, Marvel
Challenge
Design an end to end high fidelity prototype of an application for a boutique niche market to alleviate visiting different sites to view screenings, trailers and reviews. Design features for this application by researching the motivations, needs, and wants of this niche market.
1. Research
2. Ideate
3. Design
4. Protoype
Process
Research
Through online research I uncovered a wide range of information regarding showings at independent theaters. All over the United States, theaters are offering unique showings of repertory films, independent films and foreign films. Many of these theaters exist in New York and Los Angeles.
‍
Competitive Analysis
I conducted a competitive analysis to find out successes and failures of repertory screening calendar websites.

Revival Hub (based in NYC) and Screen Slate (based in LA) are two websites that compile and post screening information where viewers can learn about showtimes and theater venues. I analyzed the positive and negative aspects of these two websites.

The biggest takeaway is: these websites are not compatible for mobile devices. And I found through research, the majority of users view showtimes on their mobile devices.
‍
User Interviews
I conducted interviews to learn more about user motivations and frustrations when attending movie showings. My criteria was broad as I wanted to hear about other's experiences of going to the movie in general. However, I narrowed my scope to interview those who go to the theater at least once a month.

The three main reasons each participant likes to go to the movie:
‍
a. for a social component, to experience a show and take advantage of a theater’s bar or restaurant on a date or to catch up with friends
b. for the experience of the theater whose venue is historic or architecturally interesting
c. for the movie screening.

Participants expressed a desire to research the movie and venue ahead of time rather than learning about the movie at the theater, wanting to make the most of their time at the venue.
"I do not just look at one website to decide if I will see that particular movie. I have to look at multiple websites for trailers and showtimes. I also look out for special screenings. I am annoyed when I miss a screening because I did not see the showtime listing online. "
Persona Development
I synthesized all of the research data to formulate two personas that highlight the user’s main goals of wanting easily accessible yet thorough information about screenings.
Meet John
The first persona is devoted to going to movies. He decides on a screening based on the movie’s director or actor. The venue is less of a priority for John. His main goal is to see his favorite films the theaters as intended by the director.
Meet Christine
For Christine, the movie itself is important, but secondary to the overall experience. Christine is attracted by the venue’s personal touches that allows the viewer to not only enjoy seeing a movie, but something extra as well, such as table service in the theater, an integrated bar/restaurant or a historical aspect to the theater. The main goal for Christine is to receive an experience from the moment she starts planning her social evening.
Ideate
The research and personas validates how important it is that users want to plan their experience that is personalized to their needs.

After identifying user needs, I created a sitemap to define the hierarchy of the various features of a repertory screening application. In my research users mentioned an open data source for information on showtimes and venue to improve their browsing experience. I also imagined a personalized space where users could save screenings.
Before designing wireframes in Adobe XD, I roughly sketched out the pages to determine how the pages would interact with each other.
Wireframes
‍From the very beginning I created a Pinterest board to gather ideas. I was inspired by restaurant menus and art deco. I employed a muted black color in the wireframe stage to set the tone and direction for where the app will go visually. I created filters that enable users to view screenings by venue and/or category. Below are wireframes from the calendar, movie, and about venue screens.
Design
As I explored color palettes, names and logo designs, the app came to life. I changed quite a bit from the initial wireframe stage as I added elements to improve its usability. In this stage I designed additional screens: a navigation system, home page, and log in page.

I chose the name Cinema Beat as the title, as a nod to an older time, relating to newspaper vernacular.

Upon recommendation from potential users, I added in movie posters next to the showtimes as a way for users to quickly glance at the showtimes. Other features I added include the capability of sharing showtimes, saving to calendar and adding movie screens to a favorite list.

Below are key screens of Cinema Beat.
UI Kit
For the UI elements, I chose simple muted black and white colors with a pop of bright accent colors inspired by the movie poster, Tokyo Drifter. I chose typography that can be read easily on small devices. In this same vein, I chose simple icons users are familiar with, to create ease of use while navigating the pages.‍
Usability Testing
I asked five participants for feedback to evaluate the prototype for Cinema Beat. I sought feedback regarding cohesion, usability and any overall thoughts of the design.

Comments based on usability:
1. Intuitive to use
2. Like the idea for a smaller niche
3. Too much scrolling on the ‘Your Screenings’ page that imposes cognitive overload

Users also gave recommendations for what features to add to the screenings page. Users wanted a space to make notes about what they enjoyed with the capability of keeping notes private or sharing with friends as a form of a social component of the app.
Next Steps
My next steps are to iterate based on usability testing to continuously improve the product to meet the user’s needs. I would like to add more personalization on the Your Screenings page for users to be able share their experiences with others. In the near future, I would like to build this product responsive to different screen sizes. I envision Cinema Beat to not be limited only to Austin. With a push of a button users can view and learn more about screenings in cities all across the United States.

Tortoise Club Gardens

Next Project