Redesigning the purchase experience for a neighborhood cinema

Central Cinema is a movie and dinner theatre in Seattle’s Central District neighborhood. With a team of 5 people, I helped redesign the website to better meet their business goals and to improve usability, information architecture, and overall user experience.

Team

  • Demi Boe: User Researcher
  • Spencer James: UX Designer
  • Setu Kathawate: UX Designer
  • Nikhil Venkatesh: Interaction & Visual Designer

My Contributions

  • Content strategy: Lead content inventory and message architecture to ensure the redesign communicates desired brand qualities.
  • Information architecture: Conducted card sort and synthesized results into a new site map and top-level navigation.
  • User research: Conducted user interviews and guerilla usability tests. Developed protocol, tasks/questions, and synthesized results into recommendations.
  • Prototyping: Produced and tested paper prototypes to explore diverging concepts. Shared concepts from core model to organize page content.
  • Client engagement: Lead client interview and development of our team’s project proposal.

Timeline: 8 weeks

CHALLENGE

Central Cinema is a neighborhood theater where people can re-live their favorite cult movies and share them with new people. It also curates quirky events like sing-alongs and cartoon happy hours for people seeking an off-beat night out. But their old website didn’t communicate their offerings and unique value proposition in a clear, organized way. The site had no clear information hierarchy, confusing navigation, sub-optimal content strategy, and unclear calls-to-actions to support the business needs.

WEBSITE BEFORE

This is their old homepage. Notice the long global navigation menu on the left. The middle column also contains links to their respective pages which is confusing.

The events calendar is cut off in the frame which makes scrolling through more difficult. The content could be displayed to allow more efficient browsing. The site is not responsive so the clutter gets in the way of people looking for shows.

The food and drinks menu is embedded into the site as a PDF, and it’s buried in the site architecture. The PDF is hard to read on mobile phones.

APPROACH

A high-level overview of activities that informed our design direction.

UX Research Matrix

BUSINESS DISCOVERY

We met with the owner, Kevin, to understand the business goals that this redesign should support.

Our initial client meeting where we interviewed Kevin about the business goals and how the website came to be.

We learned that:

  • Online ticket sales were encouraged because it helped with advanced planning and staffing. Currently, only 1/3 of the ticket sales about bought online. Had been trying to promote more advanced sales online by offering $2 discounts.
  • Food + drinks brought in 2/3 of the revenue. So it was imperative to highlight the menu and drink offerings, especially since it changes every 2-3 months.
  • Calendar was the primarily way it communicated upcoming shows and events. The programming changes monthly so the calendar needed to be easy to navigate and use. But it was also important to highlight non-ticketed events like weekly themed happy hours.
  • Website should more closely match its brand and be used to connect with its customers. There are currently ~7,000 newsletter subscribers and would like to increase sign-ups. But they don’t want to appear too “commercial” – businesses who only promotes themselves.

USER RESEARCH

We asked ourselves these high-level questions to orient our redesign:

  1. Primary: How might we better tailor the site to meet the needs of Central Cinema customers?
  2. Secondary: How do customers use the current site? What do they need and how do they feel while using it?

Understanding the Current State of the Website

  • Heuristic evaluation: We defined the baseline to benchmark against the redesign. The most problematic areas included: frequently-used tasks aren’t accessible, call-to-actions were unclear, and content weren’t relevant enough to meet user goals–which contributed to website clutter.
  • *Content inventory: We uncovered the amount and types of content that’s on the site. We found repetitive content around shows and duplicate information about the theatre.

Content inventory helped us understand the amount and the condition of all content on the website. It’s hard to re-organize content without knowing what was there first.

  • Competitive analysis: We assessed the landscape of ticket-buying experiences on other movie theater websites. This included common site layout, information architecture, and branding.

We found that most sites had a shortcut for buying tickets and put featured movies higher in the visual hierarchy.

  • *Guerilla usability testing: We used the results to identify pain points and missed expectations. We conducted 3 more rounds later during our iterations.
    • Navigation labels were too similar. (i.e. There were 3 different ways to find show info.) The top-level navigation bar contained too many items and it impeded finding the right show without sifting through lots of content.
    • It wasn’t apparent that Central Cinema served restaurant-quality food, even though food revenue was an important driver of business. This information was on the site but the lack of visual hierarchy didn’t make this content noticeable.

Understanding Customers’ Needs + Contexts

  • *User interviews: We gathered motivations and attitudes related to people’s past movie-going experiences.
    • People were motivated to go to the theater rather than watch Netflix at home when it was a special occasion and a social event.
    • Location was a top priority because traffic was a major concern. People decide to go after online research and depends on where their friends live.
  • Contextual inquiry: We gathered observations on how customers would engage in the physical space. We observed 2 main categories of people: groups of friends and romantic partners/dates. They were drawn to the well-curated selection of older classics, the neighborhood-feel of the place, and the unique food selection. Most bought tickets at the door.
Google Form Survey

We surveyed customers who subscribed to the newsletter to segment the audience and understand website usage behavior.

  • Survey: This helped segment customers based on their perceptions and quantified their site behaviors.
    • Top 3 reasons for using Central Cinema website: check movie times, look up upcoming shows, and purchasing tickets.
    • Regular customers hear about upcoming shows primarily through the newsletter instead of visiting the website.

*I was the lead on these research activities.

The Opportunity

Central Cinema customers were seeking relevant content on their favorite cult movies and were motivated to buy tickets to shows they want to see. But we found that the current website didn’t organize and present its content in a way that was easily findable and didn’t call attention to actions that were valuable to both the business and the customer.

But because of these barriers, Central Cinema wasn’t optimized to increase restaurant revenue, increase advance ticket sales, and build sustainable relationships with its customers.

The biggest challenge was to tailor the site to specific customer groups and prioritize the right content to meet their needs. What was making this challenge hard to solve was that Central Cinema frequently changes its content to meet its own programming objectives. Therefore, it was crucial that the site structure be organized to accommodate changing content needs.

Setting Clear Targets

We synthesized our insights into 2 personas, Dave (the first-timer) and Pam (the regulars). While both personas did similar tasks on the website, they had different reasons for going and different levels of familiarity with the website.

We landed on the first time vs. repeat customer dimension because our research data showed how people experienced Central Cinema differently based on their familiarity with the theater.

Prioritizing Persona Tasks

We created a task matrix to prioritize activities that our personas need to accomplish on the site. We focused our redesign around these top tasks.

Research findings from contextual inquiry, user interviews, and survey helped corroborate the tasks customers needed to accomplish on the website.

REDESIGN GOALS

1) Improve content organization and information architecture to support valued user tasks

2) Improve navigation and purchase flow for buying tickets

3) Improve communication of Central Cinema’s value proposition and brand expression across the site

If the project is successful, we will see more people finding upcoming shows and buying tickets in advance on the website. For Central Cinema, its staff will feel more confident about their programming and about resourcing each show appropriately.

IDEATION

We started by pairing research insights with customer needs and brainstormed ideas for improving the website. Our first task was reorganizing content and user flows for viewing shows and buying a ticket. Since research showed that current customers don’t necessarily plan ahead, one of our early design decision was to highlight current shows while making upcoming shows accessible.

We used affinity diagramming to understand different clusters of insights.

Giving the Brand a Voice

I led a content strategy work session to define the brand voice and tone. It was modeled after the VMT framework by Scott Kubie. We pulled actual words that customers used to describe Central Cinema, and landed on a theme of “nostalgia” balanced by an upbeat voice. The top message we needed to communicate was that it’s a place where people can relive their favorite cult movies with other people.

I led a workshop on defining the look and feel of the redesigned website. We tried to incorporate these brand qualities when we created higher fidelity prototypes.

Principles:

  1. Communicate fun, friendly, and nostalgia.
  2. Make finding content easy, quick, and accessible from anywhere.
  3. Show clear next steps at all times.
  4. Reassure security of people’s financial info.

Exploring Design Directions with Paper

We created sketches and paper prototypes to test our concepts. One decision we made after combining each team member’s prototypes was to highlight current movies. Based on informal testing, we found that it was the most visually appealing layout and supported the reason people came to the website in the first place: to find more info about current shows.

My paper prototypes focused on 3 areas: homepage, calendar, and food and drinks. From our competitive analysis, we discovered that a lot of sites used local navigation to guide people’s exploration while helping them know where they are on the site. Since Central Cinema had a lot of content, I thought this design direction was worthwhile to explore.

Defining a New Information Architecture

To better understand customers’ mental model, we conducted a hybrid card sort using the site’s existing information architecture. On Optimal Sort, I used our content inventory to come up with potential labels and phrases based on our top tasks. Then we tested with survey respondents and people who weren’t familiar with Central Cinema (24 participants total).

We saw clear clusters around preparing to go to a show (i.e. location info) and exploring shows + buying tickets. Less prominent (but still clustered) are content around food + drinks.

A dendrogram that showed how participants thought the content should be categorized. There were 3 main categories.

It was more visually clear to see which labels/phrases were paired together based on the percentages of people who found them similar.

The similarity matrix gave us insight into how often 2 cards were paired together. The numbers are % of people who grouped them together.

We used the results to create a sitemap and a new information architecture. The top-level navigation was simplified to just 4 menu labels. I helped our team organize the homepage content using the core model concept: surface content that supported both business goals and customer tasks (e.g. finding shows and buying tickets).

The finalized sitemap for the new website.

PROTOTYPING

We used the card sort findings and the finalized sitemap to create a mid-fidelity prototype in Atomic.io. Our lead interaction designer, Nikhil, developed of our prototypes.

Major changes:

  • Consolidated global menu from 13 to 4 items
  • Reduced the number of paths to buying a ticket 4 to 2
  • Put featured movies at the top of the homepage
  • Put location info on homepage
  • Made newsletter sign-up persistent
  • Implemented progressive disclosure for the calendar

This is the proposed homepage. Featured movies were placed higher on the page hierarchy while food + drinks and location info were placed lower.

We added filters to the calendar to support both Brad and Gayle’s top tasks.

The modal provided details on the show playing on a particular day. It also displayed other dates that the movie will be shown to decrease the number of back-and-forth clicks.

While we reused most content from the original website, I wrote some interface copy for call-to-actions we added.

USABILITY TESTING

To validate our design choices thus far, we tested our prototype with 5 people who represented either Brad or Gayle. I worked with our lead researcher to develop our test plan.

We quantified our usability results to evaluate the effectiveness of our designs.

We found that:

  • The streamed lined information architecture enabled people to find a show and buy a ticket with less clicks. But the $2 discount wasn’t clearly reflected in the final price during check out.
  • While the linear organization of calendar helped with browsing, the modal window for buying tickets seemed insecure when customers were providing their payment information.
  • It was tedious to click through the modal interactions between different food and drinks menus.

ITERATION + VISUAL DESIGN

Using the feedback from usability testing, our interaction designer created a high fidelity prototype in Framer.js. For this iteration, we added brand attributes determined in the content strategy workshop that I facilitated. Major changes we made were incorporating the check out process into the calendar itself and adding buying tickets to the global navigation.

We then conducted a comparative study between the existing website and the high-fidelity prototype. We found that:

  • The check out process was quantitatively faster, using performance metrics.
  • The visual aesthetics more closely matched the vibe of the actual dinner + theatre experience.

FINAL PROTOTYPE

The final prototype can be viewed at Framer.js. To convey nostalgia, we drew inspiration from old movie theaters, ’80s cinema, as well as the color palette we found inside Central Cinema.

Central Cinema Hi-Fi Prototype Homepage

The redesigned homepage.

Some changes we made were replacing the modal window during checkout with progressive disclosure and adding “Buy Tickets” button on the global navigation to support our Gayle persona.

I contributed minor interface copy like adding “Now Playing” to title currently playing movies.

REFLECTION

Future Work:

  • Add more persistent content like weekly themed happy hours and other idiosyncratic information like Hecklevision. We’d like to find a way to better integrate technical constraints into our designs around TicketBiscuit.
  • Test the usability of our high-fidelity prototype
  • Get thorough feedback from our client, Kevin, who had been absent during our design process.

Do Differently:

  • We had trouble getting a hold of our client for feedback after the kick-off meeting. Perhaps we could have made our initial meeting less overwhelming and set more specific expectations around our engagement (e.g. hours expected).
  • Having access to web analytics data would have helped us understand the issues at scale. (i.e. Is this issue really a site-wide issue?) We could have used the data to validate our decisions around the new information architecture and measure success after the website redesign.

More Projects