A responsive website with information about all outdoor screenings in the Greater LA area

Project Role UX Designer
Team Solo Class Project
Duration 4 weeks, 80 hours total
Tools Figma, Optimal Sort, Marvel, Miro
Project Background

Despite the growing trend of outdoor movie viewing as a consequence of mandated theater closings in many states because of the risk of COVID-19, there lacks a succinct way for users to find comprehensive information about screenings in their area. While drive-in theaters and organizations which host outdoor screenings have websites with screening information, a single platform which hosts all of this information for users to easily access does not (yet) exist.

My Assumptions

Research

I had several assumptions going into this project, so I was diligent during my research to ensure that I was not building this product solely on these assumptions. As an avid film lover, it was also fun to talk to people about their movie viewing habits and to learn more about the market.

Research Goals
Methodologies

Conducted competitive analysis among movie ticketing companies to understand their functionalities, movie theater chains to understand how they have been affected and how they are adapting to COVID-19, and companies which have hosted outdoor screenings before COVID-19 to understand what users may expect from the experience. 

Conducted market research to understand moviegoing trends, movie ticket sales, popularity of drive-in movie theaters and to discover outdoor screening venues operating before and during COVID-19. 

Hosted remote user interviews with 5 participants and asked them a series of open-ended questions which tied back to my research goals. 

Created an affinity map to help uncover themes from this data.  

Created a feature in-depth analysis to understand industry standards and uncover features users may expect.

Conducted usability tests on Lo-Fi and Hi-Fi wireframes to test the proposed flow and to uncover pain points.

Market Research + Competitive Analysis:

User Interviews:

  • California has 44 drive-in theaters
  • The 25-49 year age group had the most frequent moviegoers
  • As of 10/7/20, 139 of California’s more than 500 movie theaters are open to the public and 2 of New York’s nearly 300 locations are open
  • Millennials place high value on experiences
  • Theaters acknowledge new COVID-19 safety precautions
  • Theaters provide information around accessibility
  • California and New York account for 21.5% of the total U.S. box office each year
  • Most users choose movie theaters based on proximity and go on varying nights of the week/times of day.
  • Users enjoy going to movie theaters for popcorn, previews, communal experience, alcohol, big screen, good audio system, comfortable seats, ability to analyze the movie with friends afterwards.
  • Users choose which movies to watch based on word of mouth, trailers, the director, positive twitter reactions, positive NYT reviews, Rotten Tomato audience scores.
  • Users purchase tickets at the theater, via a mobile app, via their school which offers discounted tickets.
  • Users like outdoor movie viewing because they can discuss the movie while they watch and it’s a fun ‘throwback.’ Users have not attended outdoor screenings because they have not heard of any, tickets are sold out when they look, theaters have been closed when they looked or they worry about the audio and visual quality.

"DRIVE-INS ARE SUCH A FUN THROWBACK!"

This quote from my user interviews would prove later to be instrumental in influencing my UI design decisions

Affinity Map

After my user interviews, I built an Affinity Map to uncover patterns among my data. This was especially helpful in understanding what users enjoy about watching movies at home and going to movie theaters.

I kept this in mind as I considered the content for this project: my aim was to highlight how outdoor movie screenings offer benefits of going to the movie theater, like popcorn and movie previews, while also allowing for comforts of watching movies at home, like being able to bring your own snacks and being able to talk about the movie while watching.

DEFINE + GENERATE

Problem Statement

Reviewing insights from my Affinity Map, I drafted problem statements which summarized my research insights into one concise statement and helped define the problem I was solving for. I chose this as the main statement to focus on because I felt it simplified the problem but was broad enough to allow me to explore various solutions:

"Moviegoers need a way to find information about outdoor movie screenings because they currently have a hard time finding information about screenings."

Empathy Map

Using insights from my Affinity Map, I then built an Empathy Map. This allowed me to gain a better understanding of my potential user’s mindset as well as begin to build empathy for them.

Persona

This Persona was based on my research findings and was built with the intention of further establishing empathy for my potential users.

I frequently referenced the affinity map I had created with my user interview findings to ensure that Ashley's characteristics were supported by research.

Considering Ashley’s behaviors and pain points helped immensely as I made design decisions, it served as a helpful reminder that we as designers are not the user.

How Might We Statements

Based on my research and problem statement, I created a few How Might We Statements as a lead into the ideation phase of this project. These statements aligned with the defined problem and helped me explore wider ideas in the Ideation phase.

  • How might we make finding information about outdoor screenings as easy as possible?
  • How might we deliver information about outdoor screenings directly to users?
  • How might we make planning outings during COVID-19 as simple as possible for users?
Crazy 8 Ideation

With my problem statement, HMW statements and persona in mind, I completed the Crazy 8 ideation exercise to explore ideas to solve the problem. 

I went through two rounds of Crazy 8’s and created 15 ideas. My first step was to weed out ideas that were completely infeasible or did not solve the user's problem. I was left with 6 plausible ideas. I defined my criteria as user value and feasibility, and created the below chart with those 6 ideas. I analyzed the value that the ideas would add to the user as well as the feasibility and rated each component on a 5 point scale.

I used this equation to determine the amount of available points: Middle Score (3) x Ideas (6) = Points (18)

I had allocated 19 points to ‘Value’ which was more than what was available, so I decided to scrap the 6th idea about renting cabanas because it ranked low on both value and feasibility. It would also be less cost-effective for the business than other ideas. Here is an updated chart:

I then put the ideas on (digital) post-it notes in Figma and created a matrix with my defined criteria, user value and feasibility, and outlined the 5 point scale I had used for my chart and plotted my points. The idea which ranked highest on the chart was the website with information about all outdoor movie screenings. I chose to move forward with this idea based on these findings. 

ORGANIZING CONTENT

Information Architecture

Once I had an idea of the product features and content, I created a hybrid Card Sort and had 7 participants sort the cards in Optimal Workshop. This process helped me understand how users would expect to see information laid out on this website. Below are the main takeaways:

  • The option to “Purchase Snacks before the Screening” should be on the Check-Out page.
  • “Email Newsletter Sign Up” could either be on the Home page or the Check Out page
  • Customer Service information can be on the Home page or Check Out page. Based on competitive analysis, customer service information can also be its own page.

I created a Site Map based on these findings which helped me outline the pages of the website and to begin to think through the users flow.

At first, I had thought to include lists like: ‘Date Night Movies,’ ‘Family Movies,’ etc, but upon further consideration, I decided to remove those pages. It was not something which had come up during my user interviews, instead I had pulled the idea from my competitive analysis, and I ultimately decided that it wouldn’t be a feasible feature on this website as movies play less frequently in outdoor screenings compared to a more consistent schedule of a movie theater. Considering it wasn’t a feature which was discussed during my user interviews, it seemed that the execution would outweigh the benefit.

Interaction Design

To think through the flow of the application, I created a Task Flow of Ashley purchasing a ticket for a screening of Casablanca at the Paramount Drive-In theater. This task tied back to my problem statement and helped me think through the steps that Ashley would need to take to accomplish her goal.

DESIGNING THE PRODUCT

Next, I took to pencil and paper and sketched Lo-Fi wireframes. I designed 2 versions of the Home page, a Search Results page, 3 versions of the Casablanca Screening Information page and 2 versions of the Check Out flow. I conducted usability testing with users to see which flow was most intuitive and helped them solve the problem best - more on that later.

With the two versions of the Home page, the primary difference was how the content was displayed:

With the 3 versions of the Casablanca Screening Information page, I was interested in testing the placement of the ‘Buy Tickets’ CTA. I was interested to see if users would prefer for it to be easily accessible and above the fold, or lower in the page, where they would be able to digest all of the screening information and then make a decision to purchase tickets:

I had also designed and tested 2 versions of the check-out flow, one where the check out steps were broken out on individual pages, and another where all of the content was on one page. The user feedback I received on these flows were particularly interesting, but due to the time constraints of the nature of this project, and the fact that these pages were not related to the problem statement, I decided not to move forward with designing those pages (for the time being).

Lo-Fi Usability Testing

Once I had wireframes ready, I created a prototype using InVision and recruited 5 participants within my targeted demographic for a usability test.

The goals were to:

  1. Define potential blind spots in the design
  2. Learn about the overall usability of the website
  3. Test the information hierarchy of the designs

The tasks were:

  • Using the search bar, find screenings near the zip code 90042 and select a screening for Casablanca
  • A/B testing of the Check Out process: purchase a ticket for a screening of Casablanca
  • Side by side testing of the Home page

Affinity Map

Once I had completed all of the interviews, I built an Affinity Map in Miro to help make sense of the results and define which pages to move forward with designing.

Importantly, all of the participants felt that the task flow was intuitive and easy to follow. I was also pleasantly surprised to see that most users agreed on which versions of the designs helped them best accomplish the given task:

Mid-Fi Wireframes

I then took to Figma and designed the pages, implementing the suggestions from my Lo-Fi usability tests. Below is the wireframe for the Home page:

UI DESIGN + BRANDING

I couldn’t wait to jump into the branding of this project, I felt that there was so much potential!

Before anything else, I needed to create a brand name. I wanted to develop a descriptive name to convey to users, even in an indirect way, the website’s functionality. I wanted to include either the word ‘outdoor,’ or a word in a similar vein, so it was clear to users that this website handled outdoor screenings. Other adjectives I had selected for this brand were: retro, hip, accessible. 

I developed 7 names which I felt may work and I polled potential users on Slack on which name they felt best conveyed the brands purpose and overall message:

  1. Outdoor Cinema Society
  2. Alfresco Cinema
  3. Outdoor Motion Picture Club
  4. Outdoor Silver Screen Society
  5. Outdoor Popcorn Society
  6. Cinema Under The Stars
  7. Moonlight Cinema

I polled 23 people and of that, 11 people had selected ‘Moonlight Cinema,’ ‘Cinema Under The Stars’ and ‘Outdoor Motion Picture Club’ each had 4 votes, and ‘Alfresco Cinema’ and ‘Outdoor Cinema Society’ each had 2 votes.

I decided to move forward with ‘Moonlight Cinema.’ I felt that this name encapsulated the main adjectives I had defined, and based on my survey results, I was happy to discover that potential users felt the same.

UI Design

As I was considering the UI elements, I kept remembering the word “throwback” which had come up during my user interviews. This word was key and influenced my visual design decisions. 

I wanted to create a descriptive logo which, along with the brand name, would express the functionality of this website. I had designed several versions, playing with movie and outdoor motifs, and I had ultimately selected this version because I felt that the sans-serif type gave it a modern touch, and on a black background, the two moons were reminiscent of eyes which aligned well with the concept of ‘watching’ movies. I had showcased various designs to potential users and they also pointed out that the chosen type was more legible than serif fonts I had experimented with. For desktop and tablet use, the main logo incorporated the red accent color, but after an accessibility test revealed that the red would be difficult for some to decipher when scaled for mobile, I had decided to design the mobile version of the logo only using the primary light grey color. Although it’s often best to keep designs consistent, I decided that accessibility took priority in this case.

The main colors chosen were black, white, and a light grey which were reminiscent of old-Hollywood black and white films. The accent color, the slightly muted red, was chosen because as an industry standard color, it would remind users of going to movie theaters. Rather than the bright red hues which are popular among modern theater chains, I selected this toned down shade because it had a retro/vintage tone.  

I had chosen Raleway for the type because it offered a decorative edge to the copy compared to a more standard, clean type. With the curvatures of the letters, it also had a slightly retro feeling which worked well with the overall tone.

TESTING THE PRODUCT

Hi-Fi Usability Testing

Once I had created Hi-FI Wireframes, I was eager to test the usability again. I built a prototype in Figma and recruited 5 participants within my targeted demographic for a usability test.

The test goals were to:

I only had one task, for users to find a screening of Casablanca and purchase a ticket, but I asked several follow up questions to understand how the designs met user expectations. I’m pleased to report that while users did have suggestions for revisions, they did not have many pain points, and there were also a great deal of successes.

Suggestions re: Casablanca Page:

Successes:

Priority Revisions

I then created my third Affinity Map (clearly a fan of Affinity Maps) to visualize and help sort the findings from my Hi-Fi user testing. This especially helped clarify the priority revisions which needed to be made:

Conclusion

Being an avid film lover, this project was a lot of fun for me overall, but below are a few sections which particularly stood out for me in this project: