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.
- Demi Boe: User Researcher
- Spencer James: UX Designer
- Setu Kathawate: UX Designer
- Nikhil Venkatesh: Interaction & Visual Designer
- 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
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.
A high-level overview of activities that informed our design direction.
We met with the owner, Kevin, to understand the business goals that this redesign should support.
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.
We asked ourselves these high-level questions to orient our redesign:
- Primary: How might we better tailor the site to meet the needs of Central Cinema customers?
- Secondary: How do people use the current site? What do they expect? What were their previous experiences with movie theaters and buying tickets?
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.
- Competitive analysis: We assessed the landscape of ticket-buying experiences on other movie theater websites. This included common site layout, information architecture, and branding.
- *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.
- 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.
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.
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.
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.
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.
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.
- Communicate fun, friendly, and nostalgia.
- Make finding content easy, quick, and accessible from anywhere.
- Show clear next steps at all times.
- 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.
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.
It was more visually clear to see which labels/phrases were paired together based on the percentages of people who found them similar.
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).
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.
- 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
While we reused most content from the original website, I wrote some interface copy for call-to-actions we added.
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 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.
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.
- A brief video of our check out process.
- A quick video of the interactions on the food and drinks menu.
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.
- 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.
- 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.