A responsive website which hosts information about 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, there is not a single platform which hosts all of this information for users to easily access.
I had many assumptions going into this project and 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 be able to talk to potential users 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 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 other outdoor screening venues 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 learn about what features users may expect.
Conducted usability tests on Lo-Fi and Hi-Fi wireframes to test my flow and to uncover unexpected pain points.
Market Research + Competitive Analysis:
"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 understand patterns between my data. This was especially helpful in understanding what users enjoy about going to movie theater and what they enjoy about watching movies at home. I kept this in mind as I created 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.
By reviewing the insights from my user interviews which I had outlined in my Affinity Map, I created several problem statements. 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 have a hard time finding information about screenings.
Using insights from my Affinity Map, I built an Empathy Map and described how a user would think/feel, what they would say/do, and what they would hear and see around them. This helped me gain a better understanding of my potential user’s mindset as well as begin to build empathy for them.
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 the behaviors and characteristics I was defining for my persona, Ashley, 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.
Based on my research findings 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.
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 a total of 15 ideas. My first step was to weed out ideas that were completely infeasible or did not solve the users' 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 all 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 Available (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.
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:
Next, I created a Site Map. 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, the Search Results page, 3 versions of the Casablanca Screening Information page and 2 versions of the Check Out flow.
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 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:
Once I had completed all of the interviews, I built an Affinity Map using Miro to help make sense of the results.
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:
After my lo-fi usability testing, I had a clear understanding of which wireframes to design in Mid-Fidelity. I took to Figma and designed the pages, implementing the suggestions from my Lo-Fi usability tests.
I couldn’t wait to jump into the branding of this project, I felt that there was so much potential with this concept.
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.
As I was considering the UI elements, I kept remembering the word “throwback” which had come up during my user interviews. This term 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 more of a retro/vintage tone.
I had chosen Raleway as the type because it offered an edge to the copy compared to a more standard, clean type. With the curvatures of the letters, it also had a slightly retro feeling.
Once I had created my 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 usability testing.
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.
I then created my third Affinity Map (I’m 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 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: