Fandango Crosslinking Tabs
Merging theater and at-home entertainment in Fandango
Overview
A unified vision: blending Fandango’s digital ecosystem
I was a UI Design intern for the Fandango Product Experience team for the 2023-2024 academic year.
My day-to-day responsibilities included designing for Fandango’s screens across mobile web, desktop, iOS, and Android screens.
During my internship, Fandango and streaming platform Vudu were in the process of merging design systems to have a shared identity. This project focuses on the implementation of seamlessly integrating each other's brands on the Fandango website.
So, How Might We
Merge theater and home entertainment as part of one brand?
Setting goals
I defined three key goals to guide my design process. These goals were intentionally chosen to ensure the app’s long-term scalability and enhance the overall user experience for Fandango.
Seamless integration
Allow users to feel a consistent experience across both brands.
Intuitive navigation
Ensure users can easily navigate the new site without confusion.
Transparent design
Build user trust through a clear and honest design approach.
The Solution
I refined the visual design of the tabs on the desktop and mobile web Movie Overview Page, enabling users to seamlessly switch between viewing options on Fandango and Vudu.
Discovery
Vudu branding is buried
In Fandango’s Movie Overview Page, relevant movie information is displayed.
However, Vudu branding is hidden, leading to reduced visibility and lower traffic to the streaming site.
Fandango Movie Overview Page
.gif)
Iterations
Converting low fidelity to high fidelity
I collaborated with the UX designer to refine existing low-fidelity wireframes into polished high-fidelity designs, ensuring consistency with Fandango's design system.
My design efforts were primarily focused on optimizing the mobile web experience since 88% of Fandango’s traffic comes from mobile web users.
Design Challenges
Using status messages to optimize SEO.
When designing for mobile web, Fandango needed to optimize for SEO by preventing layout shifts above the fold using status messages. This served as a fallback design for cases where a movie wasn’t available on one of the platforms.
To address edge cases, I collaborated with UX and Marketing to implement the following improvements:
- Introduced human-centered messaging labels for clarity
- Enhanced modals with icons to improve user comprehension
These changes resolved layout shift issues while providing users with clearer, more informative experiences.
Designing tabs
My manager and I explored tab designs for movies available on both Fandango and Vudu. We chose pill-shaped tabs for their accessibility, visual clarity, and alignment with Fandango’s brand identity.
[A] Pill Tabs
[B] Orange Tabs
[C] Blue Tabs
Not overwhelming and easy to toggle between
Neutral color palette
Not in current design system
Feels wordy and doesn’t have a strong emphasis on the page
Strongly associated with Fandango orange
Component exists in design system
Color can be overwhelming with CTAs below
Strongly associated with Fandango blue
Component exists in design system
Visual explorations with pill tabs
I experimented with the pill tab designs, incorporating Fandango's and Vudu’s primary brand colors. After discussions with stakeholders, we chose a neutral color scheme to maintain a cohesive, accessible, and visually balanced design.
[A] Neutral Colors
[B] Brand Colors
Meets all accessibility standards
Use of leading icons helps users understand labels at a quick glance
Neutral color palette but will require discussion for design system
Orange doesn't meet contrast accessibility tests
Use of different colors may confuse users
Strongly associated with Fandango orange
But what about desktop?
When designing for desktop, pill tabs felt bulky. We chose our existing design system tabs decorated with a Fandango orange active state. This choice:
- Optimized whitespace for a cleaner layout
- Maintained a responsive design across devices
- Ensured accessible tap targets on mobile
Simplifying Cards for Visual Harmony
We encountered challenges with the “Watch At Home” tab’s card, particularly in achieving visual harmony with movie posters. After testing gradient modals, we chose a non-decorative modal design for its cohesiveness and seamless integration.
[A] Non-Decorative Card
[B] Gradient Card
Aligns with design system
Uses components and colors from design system
Users may skip over this section
Feels disconnected from the rest of the page – may look like an ad
No use of gradients in the design system
Use of color catches user's eye
Design Decisions
Contributing to the design system
I published the pill tabs in the Fandango Design System library and created guidelines for future use by designers and engineers. Previously, there was no existing documentation in the design system.
Final Product
Fandango Crosslinking Tabs
Mobile
- Meets tap target requirements
Desktop
- Seamless integration
Status Messages
Copy changes based on movie state.
Results
Live on all platforms!
The brand-merging tabs for Fandango and Vudu were successfully shipped in Q1 of 2024 on desktop and mobile web. Following my internship, tabs for iOS and Android apps were also rolled out!
Reflections
Takeaways
1. Taking things step by step. This being my first internship, this project allowed me to hone in on taking things step by step. By being able to gain a deep understanding of the brand's goals and how to work with the team, I was able to grow comfortable in my work and contributing my best effort to Fandango.
2. Having a bigger picture. Working at an established company with extensive design guidelines and protocols provided me with valuable insights into the long-term impact of design decisions. This project highlighted the importance of careful planning and consideration in contributing to a design system, ensuring that the company’s public image is consistently upheld and enhanced.
