Information about all outdoor screenings in the Greater LA area
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.
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.
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 Findings:
User Interviews:
"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
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.
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."
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.
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. 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.
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:
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.
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.
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:
The tasks were:
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:
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:
I couldn’t wait to jump into the branding of this project, 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:
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.
.svg)
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.
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 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.
Successes
Priority Revisions
I then created my third Affinity Map (definitely 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:
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: