Majestic Bay Theatres

What is Majestic Bay?

The Majestic Bay Theatre is a small, local movie theater in the Ballard neighborhood of Seattle. Though the theater was extensively remodeled in 2000, there has been a theater in its location since 1914. Majestic Bay's long history and connection to Ballard has made it a local icon.

The Project

The web presence of Majestic Bay Theatres, while featuring a fast and easy process of buying tickets, does not reflect the role of the theater in the Ballard community. For my first big project at General Assembly, I was tasked with redesigning the Majestic Bay website and its e-commerce solutions to reflect the character of the theater.

Compare to the Majestic Bay itself:

• Has a long, fascinating history in Ballard.

• Retro, historical architecture.

• Quirky decor by local artists.

• Pays homage to the history of cinema itself.

• Is very connected to its community.

• Has a fast ticket purchasing process on its website.

Laura seems like a perfect fit for the Majestic Bay Theatre, but when she visits them online, she is met by a site that reflects little of the above qualities.

Problem Statement

Most of the Majestic Bay site doesn’t indicate anything about what makes the theater unique:

• The history of Majestic Bay Theatres.

• Its tribute to the Golden Age of Cinema.

• The connection to the Ballard neighborhood.

While Laura appreciates the fast ticket-purchasing process, the use of third parties for the purchasing process makes the brand feel less authentically local. The inability to buy gift cards online is also frustratingly low-tech.

With that in mind, the problem was straightforward:

The Majestic Bay’s current online presence drives away consumers like Laura, who are otherwise perfectly suited for the theater’s particular brand.

Proposed Solution

I had three core goals in my redesign of the Majestic Bay website:

1. Make the character and history of the Majestic Bay more prominent. Highlight all the quirks and character moments that make the theater truly unique.

2. Further connect the Majestic Bay to the neighborhood of Ballard as a whole through an expanded social media presence, providing a calendar of local events not only at the theater, but nearby as well.

3. Finally, tie the purchasing process into the theater’s own brand, by removing reliance on third parties and allowing for online gift card purchases.

One particular competitor stood out: The Cinerama.

While the web presence of other independent theaters in Seattle are at a level of polish similar to that of Majestic Bay, the Cinerama's high production values stand out. Because of this, I paid special attention to what the Cinerama does and does not do with its website, and drew a lot of inspiration from it.

Card Sorting

I transferred all of the website features from the competitive analysis onto post-it notes, and performed a card sort exercise with five different participants.

Testers were asked to take these features and group them together, organizing them as they would expect to see them on a theater website.

With card sorting complete, work on a proposed sitemap could begin. To the right is an early version of a sitemap for Majestic Bay that would go through a number of iterations.

Some of the issues found with the sitemap at right were:

• Checkout processes for both tickets and gift cards exist as single pages, instead of full multi-page flows.

• Newsletter sign-up links are represented in a number of places. While many pages on the site had newsletter links, newsletter sign-up did not actually “live” as a child of those pages.

• User testing would move “Jobs” and “Rent Theater” from living in the Footer to being child pages of “Contact Us.”

• Having individual pages for “Events” and “News” was unnecessary. The information ended up combined into a single page.

It's notable that gift cards and tickets have separate check-out flows. As moviegoers typically don't buy tickets for multiple movies at a time, a dedicated shopping cart UI was unnecessary. However, buying both tickets and a gift card at the same time is a more common scenario. Group critique of the sitemap produced a convenient solution: if Laura wants to buy both tickets and a gift card, she can add a gift card to her ticket order while checking out.

You can see the final version of the sitemap at left.

As part of planning for the primary navigation UI, I created an annotated navigation schema. While the organization of the schema does not match the end result, the purpose was to demonstrate functionality of the nav UI rather than organization. Updating the schema to fit the final result was unnecessary.

Some differences in the final navigation are:

• The “Movies” sub-nav is more extensive, listing all current movies as well as movies that are coming soon.

• “Events” in the primary nav is replaced with “News & Events.”

• “Contact Us” has its own sub-nav, including “Jobs” and “Rent Theater.”

A full user flow, through the entire site, was considered unnecessary, but I created a flow in Microsoft Visio focusing solely on the purchase process.

Later, during user testing of the prototype, users were asked to perform tasks that closely followed this flow.

With initial wireframes in a completed state, I used InVision to create a clickable prototype. At left you can see a demonstration video of a simple user flow through the prototype. You can also download a copy of the prototype using the button and instructions below.

1. Unzip the file to a new folder.
2. Open MajesticBay.html using your preferred browser. 
3. You can then click through the prototype yourself!

User Testing

I ran user tests on the prototype with three different users.

Users were each asked to complete two different tasks based on the following narratives:

1. You and your partner want to see a movie tonight at Majestic Bay, but you’re not sure which one. You also want to buy a gift card for a friend. You want to buy tickets for the movie you want to see and the gift card as quickly and efficiently as possible.

2. You want to take your kids to see Thor: Ragnarok, but want to make sure it’s appropriate and not too long. Knowing that information about the movie is on this site somewhere, (and you’re not going to IMDB instead,) go find it, and then buy tickets for it.