Retrospecto Films
A responsive website design for a fictional immersive 360 degree film experience.
In this student project I dreamed up an immersive 360 degree theater featuring historically accurate films, which might simulate the experience of time travel. I interviewed filmgoers and people who have attended immersive events to help understand the needs and desires of potential audience members. Then I designed branding and a responsive website that would feature these unique films and provide a clear way to book tickets. These designs were tested with a number of users who helped me understand in which ways the effectiveness of my designs could be improved.
View prototype
Time travel isn’t possible. If it were, wouldn’t we have avoided all of the misery of 2020? But imagine if there was a safe and compelling way to simulate time travel. Enter Retrospecto 360° films. Retrospecto is a fictional film production company and cinema that creates meticulously researched historical 360° films and projects them in a ring-shaped viewing room for a fully immersive stepping-back-in-time experience (without risk of the Butterfly Effect).
Because it doesn’t exist yet, Retrospecto has no web presence. The goal of this project was to create branding and a responsive website to entice customers and provide a seamless method for ticket purchasing.
An analysis of existing cinema and theater ticket selling websites showed that some allowed a user to check out as a guest while others required them to make an account. Some allowed users to choose their own seats and some required service fees, but all clearly showed available showtimes and dates. Only on some sites was it possible to buy tickets for multiple dates at once.
L: From Competitive Analysis; R: Seatmap from Guthrietheater.org
I sat down with 5 potential customers ages 17-49 and asked them to walk me through a typical experience of buying a movie or theater ticket online, describing each step along the way and sharing their preferences and pain points. It was clear that they generally like:
- The immersive nature of a cinema or theater
- To be able to choose their own seats
- The option to create an account to store personal data
- A safe and convenient way to pay
“I never do ‘best available [seats]’. I’m an aisle gal.”
- Kathy
To help personalize my next steps I generated a user persona, based on an amalgam of a few of my interviewees, and tried to imagine what they would prefer, so that I would be designing for them, not just for what I personally like. For example, I don’t mind having to call customer service if I have an issue with an online purchase, but the majority of my interviewees said they would always prefer some kind of online option that doesn’t require talking to someone on the phone. So Retrospecto needed to have a way to edit or cancel an order without having to call someone.
Using the information gleaned from my research, I generated a features roadmap to help define which features my site should include; and a Venn diagram to help me organize where user goals, business goals and technical considerations overlap, to help me keep in mind for whom I was designing. The areas of overlap between these goals indicated the importance of a simple and safe ticket buying process that would give the user a sense of control and security. Specifically, they would need things like e-ticket delivery and being able to choose their own seats.
Before I could start visually designing my site I had to first consider its structure, so I built a sitemap. It was important that the functionality of the site be supported by a simple navigation, that ticket buying could be initiated from at least two different spots on the site (i.e. from a CTA button near the hero image and a navigation tab), and that other information be available such as parking and directions (under Plan Your Visit), and a book club to further engage customers. I also thought it might be good to have a store for Retrospecto branded swag in order to increase revenue and word-of-mouth advertising, so I planned to feature mockups of mugs and shirts.
In order to be more granular I also plotted a user flow to imagine each step Jordan Friedman, our persona, would follow in order to buy a ticket. User testing later would suggest waiting to ask if a customer wanted to log in or set up an account until later in the ticketing process, but I originally thought it made sense to take that step right away. I also initially imagined using modals for selecting number and type of tickets and for the seat map, but I later determined it would be easier to develop if those steps took place on separate web pages.
Once I understood which elements to include and how to structure the site, I started visually designing. I wanted to include lots of images, movie reviews, a quick way to initiate the ticket buying process, and a banner with Covid safety protocol, since my interviewees all said they wouldn’t even attend a show unless they felt safe. My first sketches were rough and (spoiler alert) would only somewhat resemble the final product:
Next I designed mid-fidelity wireframes for desktop and mobile devices. My competitive analysis and user interviews pointed to the importance of clearly showing available screening dates and times and providing a choice of manually entering credit card data or using a trusted external site like Paypal. I also included a section on each page that contained the specifics of each item the user added to their order and updated as they progressed, so they would have immediate feedback that their choices had been registered, as well as a running total price. I thought the silhouettes of people in front of the hero image would help the user imagine they were in a movie theater, but they neither showed up well against the hero image nor had the desired effect, so I later removed them.
A feature I especially enjoyed imagining was a panoramic photo on the mobile site that would represent a taste of a 360° film by moving when a user moves their phone. I also knew I wanted to create an interactive seat map like the Guthrie Theater does, so a user could choose their seats within the theater with a simple click.
I decided that Retrospecto should have a retro feel, so I chose colors inspired by retro photography, and typography with a vintage style. The more playful Shrikhand typeface would be used for headings, and a cleaner and more modern typeface (Asap) would work better for the rest of the text. The film subject is the past, but the technology used is contemporary or even futuristic, so the more modern typeface seemed appropriate for this use. I also created a logo that looks like an abstract looping R made partially with film, to represent cinema and the looping back of time.
With those specifications in mind I got to work designing a high-fidelity wireframe prototype of the desktop version of the site, as well as a high-fidelity wireframe of the mobile homepage. I included several compelling images and movie reviews to entice potential customers.
To refine the panel that provides instant feedback to users as they make their selections, and in keeping with the retro look of the site, I created an element that looked like a Polaroid photo with ticket details that updated with each step. If they were buying tickets to two separate shows they would see two polaroids, which toggle on click. A breadcrumb trail also lets users know where they are in the ticketing process and would allow them to return to a previous step if they need to make a change.
I truly enjoyed designing the prototype but I had to find out if it actually did what it was supposed to do. I conducted usability testing with five participants, ages 26-76. Each participant was presented with a set of hypothetical situations (eg: “your friend is coming to town and wants to see Retrospecto with you on January 11 at 10pm. What do you do? Now he says he can’t make it but you still want to see the show. How can you change your ticket?”). I asked them to show me what they would do, using the prototype, and talking me through their process. I wanted to know specifically if users could
- Understand right away what Retrospecto is
- Easily buy and edit tickets, including choosing their own seats
How did we do? Let’s just say it was humbling. Only one in five participants could easily tell what Retrospecto was - several thought it was a travel site. I had designed the homepage to show a clean image above the fold but that decision caused all five participants to not realize they could scroll, thus they overlooked almost the entire homepage. The third major issue was that even though the interactive seat map made perfect sense to me, it was not at all clear to users where the screen was, which interfered with their ability to pick the right seat for their preferences.
But all was not lost because the process of actually buying and editing a ticket was obvious to users, with all five successfully completing these essential tasks:
- Buy an adult and child ticket to a specific screening and pay with a credit card
- Change seats to a different row
- Add a ticket for an upcoming show to your order
- Edit order by removing one ticket.
I generated an affinity map to help me see the nuances of the problems and generate solutions.
It was clear that the second iteration of my design would necessitate these changes:
- Replace hero image with one that doesn’t indicate travel
- Add “Films” to title and add a subheading hero message.
- Add text and arrow inviting user to scroll down.
- Integrate About section into homepage, just beneath the hero message.
- Provide a less intrusive option to create account and to buy advance tickets for future shows.
- Rework seat map with less ambiguous design.
The second iteration incorporated these changes.
I certainly learned a lot during this process, from speaking to potential customers to examining existing similar sites, to building and testing wireframes. I made some accurate assumptions as well as a lot of inaccurate ones, which quickly became apparent in usability testing. But my test participants taught me a great deal about how to improve my design and my understanding. If I had more time to work on this project I would do another round of usability testing (with new participants) on the second iteration, and consider doing aesthetic testing of visual design variants. But for now I’ll try to absorb what I have learned and use it to inform my future designs. (View prototype)