Reimagining the Digital Box Office
Fandango entertains, informs and guides film fans with must-see trailers and movie clips, original content, insider news, and expert commentary. This was an ambitious project to redesign the Fandango website’s user experience the largest digital box-office in the world.
This case study was created strictly based on an Adobe XD challenge I completed in order to gain more practical application in user experience. I am in no way employed or have I ever been employed by Fandango or any of its subsidiaries.
MY ROLE
My role in this project was to serve as a user experience designer. The main purpose was to lead efforts to evolve the service and address user pain points related to browsing and discovery.
THE CHALLENGE
CREATE AN AESTHETICALLY PLEASING CUSTOMER EXPERIENCE
This project was brought to me by Adobe XD during their weekly design challenge series. The goal of this project was to create or redesign a responsive website for an online box office, so I decided to choose Fandango. I had noticed multiple usability issues throughout the site and wanted to use this project as a chance to identify major pain points and come up with solutions for them.
NON-RESPONSIVE
Fandango’s website lacked responsiveness. As the main goal of this project was to create something responsive, I naturally checked its original design. Upon resizing on my desktop as a test, images and text were not resizing to fit the current window size.
DIFFICULT TO SCAN
We all know that users do not read through websites — they scan. Without good copy that is laid out easily for one to read, the average user will leave within 15 seconds of arrival.
TOO MUCH NOISE
This website had a lot going on. Whether it be an animated banner ad or a promotion for a new movie, there was just way too much to keep users focused on any single task.
NO VISUAL HIERARCHY
Certain patterns are needed in order to guide the user’s eyes through the website. Fandango hadn’t really made me second guess myself a few times while browsing.
WEAK BRANDING
For a company as well-known as Fandango, their branding and aesthetic should be high level (at least one would think). I made it my top priority to create a final product that was usable while also being visually stunning given my graphic design background.
THE APPROACH
SMOOTH. CLEAN. SIMPLE.
As with any design project, you must first begin with a solid design strategy. For this website redesign, I began to brainstorm different ways that my design could help in combating these user pain points and create a more seamless browsing experience.
“A single shortcoming of user experience could equal a percentage of their quarterly earnings down the drain.”
The assumption is that millions of customers visit Fandango every day. At this high level, a single shortcoming of user experience could equal a percentage of their quarterly earnings down the drain.
Choosing the correct design model would be crucial to this project. The architectural decision that I ended up with was a smooth style resembling that of a streaming service. Users are already familiar, and they use minimal design to their advantage — a no brainer.
At this point, I still felt like something was missing from the current information that I’ve come up with — the actual users. From my former experience of being on multiple events committees at my university, I though Survey Monkey would be an appropriate choice.
THE DISCOVERY
DEEP INSIGHTS
SHOW ME YOU KNOW ME
Customers expect Fandango to know them and serve personalized music recommendations.
TIME IS MONEY
Price sensitivity was the motivating factor for customers switching to on-demand box offices.
LIGHTS, CAMERA, ACTION
The majority of customers wanted to be a part of the action. They are not satisfied with Fandango’s current offers in live entertainment and would like to see more.
REWARDING LOYALTY
Long-time Fandango members are actually satisfied with the current benefits but would like it to be more engaging.
LOW-FIDELITY
REFRAMING THE PROBLEM
My process involved sketching and white-boarding concepts and flows then translating these directly into hi-fidelity design comps. Since I was working with many existing design patterns, it was relatively easy to move straight into hi-fidelity designs.
“Prototyping is the most effective way to gain meaningful feedback from your team…”
My next step involved slicing the comps and piecing them together with Keynote or InVision into a prototype. In the early stages, I focused only on representing the most important areas of the design.
Prototyping is the most effective way to gain meaningful feedback from your team, the consensus from stakeholders and approval from senior leadership. It is easy to distribute these as videos and recycle them for Usability Testing.
HI-FIDELITY
CAREFUL EXECUTION
The images below show some of the prototype designs for a desktop computer display.
REFLECTIONS
WHAT I LEARNED
This is only the beginning…
One of my biggest challenges throughout this project was to put myself in the user’s shoes. I would constantly have moments where I would think to myself, “I wouldn’t click a button if it was there” or “I don’t think this color would look right on this page.” Being selfless in the design world is not an easy feat to overcome.
As this project went on and through the practice of collecting user research data, I began to realize that the website was a lot bigger than just me and my opinions.
If anything was certain, it was that I will always have an insistence for quality. Quality that should never be compromised, even in the first version of a product. Quality is the responsibility of an entire organization and I have learned that magical experiences are only possible if the whole team truly shares the same values and aspirations.
So, if you were to ask me if I am proud of what I’ve created I would say yes. I am proud to have completed this challenge (of many more to come) and have had the opportunity to practical experience design first-hand.
I look forward to updating this case study to include some interactive prototype designs and more design content.
For more of my work, check out my portfolio.
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >
