Nikhil Venkatesh   Product Designer

Central Cinema

Redesigning the web experience for a local beer-theatre

We've all seen some incredible movies that were released years ago and wished we could watch them again on the big screen. This is exactly what Central Cinema is all about. Located in Seattle's Central District, Central Cinema is a neighborhood beer-theatre. As you enter the venue, you are hit with a sense of nostaliga - from the decor and the posters of cult classics on the walls, to the movies that are showing on the big screen!

While the service they offer is enticing, their website doesn't quite reflect the Central Cinema experience. We took this as an opportunity and set out to design their new website.

I was the primary designer on the team, working alongside two researchers, a content strategist and another designer.

Type Academic Project

Role UX Designer, Prototyper

Duration 3 months (Sep 2015 - Dec 2015)

Responsibilities UX design, Prototyping, Visual design, Supporting UX research.

Before jumping in to design, we wanted to understand the business, identify the business goals and define our scope.

We met Kevin, the owner to talk about why he runs the business, what his motivations are, and what he would like to get out of this redesign.

We quickly identified his primary pain point - he couldn't predict how many people were going to show up for a particular show. Most customers bought their tickets at the gate.

The Users

Talking to Kevin gave us some great insights and ideas to improve his business, but we still didn't know what the customers wanted. Why weren't they booking tickets online? Do they even use the website? What could we do to encourage people to use the website?

To answer our questions, we followed many different methods:

  • Interviews and Surveys with employees and customers helped us understand business operations and customer patterns. We were able to understand what types of customers frequented the establishment, why they used the website, and where the current website failed them.
  • A Competitive Analysis helped us understand what other successful businesses were doing right. We were able to identify what users needed in a theatre website, how users navigated these websites to complete tasks.
  • With a Heuristic Evaluation, we saw the major problems with the current website. We used this to identify the parts of the website that needed work and this helped us define the next steps in the design process.
Existing Central Cinema Website
Central Cinema's current website

Organizing the Content

Some things were immediately clear. The website definitely needed better navigation and content organization. Customers found the ticket booking experience clunky and confusing, and many of them had given up after trying to book tickets online.

To solve the information architecture problem, we conducted a card sort. We used Optimal Sort, an online card sorting tool that the users could access from home. This helped us get to Central Cinema's actual customers and get much more participants in a really short span of time.

Since Central Cinema is a very small local business, we didn't have access to as many actual customers as we would have liked. We didn't want our design to wander, so we created two personas to help us stay aligned to the type of customers who come to Central Cinema.

Central Cinema Personas
Personas helped us stay focused on the user without actually talking to them.

Since Central Cinema is a very small local business, we didn't have access to as many actual customers as we would have liked. We didn't want our design to wander, so we created two personas to help us stay aligned to the type of customers who come to Central Cinema.

Design & Prototyping

We took the results from the card sort and created a Sitemap to guide our initial designs. It was time to pick up the sharpies!

As an ideation exercise, we each decided to sketch out our vision for the website design should be. Keeping some key areas in mind - like the calendar, the homepage and the ticket booking experience, we each created what were essentially paper prototypes.

Having these sketches gave us a great platform to build upon. We picked out specific features from each prototype that we all thought worked best - these would make it to our first test-ready prototype.

Our first prototype - built with Atomic.io

I used Atomic.io to create a prototype that demonstrates the basic features of our redesign. We wanted to know if our users had any trouble with the essential tasks - looking up show timings, checking out the food and drinks menu, and booking tickets online.

To make sure we were on the right track and validate our design, we decided to test our prototype with a few users to get a quick round of feedback and see what we were doing right. Our usability tests threw up a mixed bag of results. We did a lot of things right, but there was definitely room for improvement!

  • All the users were able to successfully book a ticket on the new website!
  • The information architecture was already much better than the previous website.
  • Details about the ticket pricing weren't communicated effectively, leading to some confusion.
  • Some users expressed concern about using a modal window to book tickets, as it felt insecure.

Testing the prototype with users opened up another door for us. It gave us the opportunity to talk to them directly about their perception of the Central Cinema brand. With all the data we had about the functionality of the prototype and their brand perception, we were ready to create a new prototype - bumping up the fidelity and throwing in some visual design.

This time, I used Framer Studio. Framer is really flexible, allowing me to define custom interaction instead of relying on basic predefined ones.

For the visual pass, I focused primarily on one term that came up repeatedly during our interactions with the users - Nostalgia. I took inspiration from old movie theatres and '80s cinema to develop a style that resonated with Central Cinema.

Our final prototype - built using Framer Studio
NEXT UP

PuppyHarmony

Helping your furry friends find the perfect playdate