Central Cinema

Redesigning the Web Experience for a Local Movie 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 Central Cinema, you are hit with a sense of nostalgia - from the decor and the posters of classic movies on the walls, to the movies that are showing on the big screen.

The whole team agreed that the idea was incredible, and we loved the experience of being there. However, their website failed to reflect that amazing experience. The website was confusing and visually oppressive with no clear organization and far too much content on the screen. Our team of 5 set out to redesign their website. My main responsibilities were interaction and visual design, and I was working along side another designer, two researchers, and a content strategist.

Type

Academic, Working with a Client

My Role

User Experience Designer

Duration

11 Weeks

Responsibilities

Interaction Design, Visual Design, Prototyping, Information Architecture, User Research, Usability Testing, Card Sorting

Central Cinema Final Screenshots

TL;DR

We delivered a new Central Cinema web experience using data gathered from customers and business stakeholders to streamline the information architecture and design a better ticket checkout experience. We produced a high fidelity prototype along with a design spec document to aid in building the website.

SCOPE & OBJECTIVES

The Old Central Cinema website - Links and iFrames were everywhere!

To kick off the project, we met with the client to understand his business goals that would guide our design. We scoped the project to a few key objectives

Research

We relied on various methods to understand the challenge, the users and give our design effort a little direction.

Heuristic Evaluation

We performed a heuristic evaluation on the current website to quantify its usability. Overall, the website received a moderate rating - indicating that users were able to complete core tasks, but there was much room for improvement.

Interviews & Surveys

We ran surveys and interviewed customers to understand how they felt about the current web experience, what the top tasks on the website are, and to understand their motivations to buy tickets online.

EXEMPLARS & COMPETITIVE ANALYSIS

We looked at other businesses and websites that successfully solved the same problems - specifically around the ticket booking experience. This gave us a collection of ideas to inspire us.

Heuristic evaluation report.

Survey Results Snapshot

SYNTHESIS

Our Personas illustrated two different user types who accounted for a majority of Central Cinema's visitors.

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. We created Personas and a Task Matrix to keep our design focused on the users and their primary tasks.

Synthesizing our research - Affinity diagrams to find common themes in our research notes. Gotta have Post-its!

Information Architecture

We conducted a card sort with 20 users to understand their mental model and how they grouped information on the website. This helped us streamline the sitemap and navigation structure to create an intuitive experience.

OptimalSort automated the process of clustering themes and creating a tree-map - showing how users grouped tasks together

Sitemap synthesized from card sorting

Design PROCESS

We started the process by collaboratively brainstorming feature ideas and low fidelity UI designs - Sketches. Ideating together was really great to bounce ideas off each other and come up with the best designs. After we had ideas on paper, I created a low fidelity prototype with Atomic.io, so we can test our design with real users and validate our design choices.

The Ticket Purchase flow, v1. People did NOT like the modal.

Our usability testing revealed a mixed bag of results, and gave us a lot of great points to iterate on. Armed with the test results, I bumped up the fidelity and designed the website's final visual design. The final prototype was built with Framer Studio. Check out the live prototype below.

FINAL PROtOTYPE

Check out the Live Prototype

Wrapping Up

The 10 weeks spent working on this were personally incredibly insightful. This project truly highlighted the power of effective collaboration for me - Each of us had a domain of expertise which we took charge of, and recognizing that helped us establish a smooth workflow by relying on, and learning from each other's strengths.

The usability studies on the final prototype showed a higher success rate on core tasks, and an overall more pleasing experience. Personally I feel that the visual design could have been explored and polished a little more. I also feel we would have benefited from having an engineer on the team. The technical expertise would have helped us think more deeply about what technologies we can use to build the site.

As the next step, a second round of iterative testing and design would really iron out the kinks and produced a more polished website. I would recreate the next prototype with code that can be pushed to production, or get an engineer on-board to help us with building the site, and inform us about the technical constraints.

This was one of my favorite projects at the University. I hope you enjoyed reading about it!

NExt Up