Fandango Crosslinking Tabs
Strengthening the connection between Fandango and users
Role
UI Intern
Duration
January - April 2024
Tools
Figma
Jira
Adobe Analytics
Team
Fandango Product Experience Team
01 / Overview
Project Background
I was a UI Design intern for the Fandango Product Experience team for the 2023-2024 academic year.
My day-to-day responsibilities include designing for Fandango’s screens across mobile web, desktop, iOS, and Android screens.
Fandango and streaming brand Fandango-At-Home are currently in the process of merging design systems into one brand to have a shared identity. This project focuses on the implementation of seamlessly integrating each other's brands on the Fandango website.
How might we merge theater and home entertainment as part of one brand?
Creating a shared identity is crucial for users to understand the connection between Fandango and Fandango-At-Home as the brands merge.
Project Goals
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 Movie Overview Page Today
- Fandango’s Movie Overview Page shows relevant movie information
- Fandango-At-Home branding is buried, reducing traffic to the streaming site
.gif)
The Solution
Tabbed Navigation
I proposed a tabbed navigation system for desktop and mobile web to improve visibility for both Fandango and Fandango-At-Home, allowing users to easily switch between viewing options.
Final Product02 / Iterations
Converting low fidelity to high fidelity
Upon joining the team, I refined existing low-fidelity wireframes into high-fidelity designs using Fandango’s established 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.
Business Challenges
During the design phase, I needed to:
- Optimize for SEO by preventing layout shifts above mobile fold
- Discover a fallback design for certain cases
Understanding copy and users
To address edge cases, I implemented the following improvements:
- Added human-centered messaging labels
- Enhanced modals with icons for better user comprehension
These changes thus:
- Resolved layout shift issues
- Provided additional information to users
Designing tabs
My mentor and I explored the design for movies available on both Fandango and Fandango-At-Home. We opted for pill tabs for their accessibility and brand alignment.
Orange Tabs
Option 1
Option 2
Blue Tabs
Option 3
Pill Tabs
Visual explorations with pill tabs
We experimented with the pill tab design, incorporating Fandango's and Fandango-At-Home’s primary brand colors. After discussions with stakeholders, we opted for neutral tabs to ensure a cohesive and accessible design.
Option 1
Orange/Blue Tabs
Option 2
Neutral Tabs
But what about desktop?
Pill Tabs
Orange Stroke tabs
For the desktop version, pill tabs appeared bulky, so we chose our existing design system tabs with an orange stroke. This:
- Optimizes whitespace
- Maintains responsive design
- Ensures accessible tap targets on mobile
Modals
We faced 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.
Option 1
Non-Decorative Modal
Option 2
Gradient Modal
User-Centric Copy Changes
Data revealed that 50% of users were unaware they could buy tickets on Fandango. To improve clarity, I changed the call-to-action copy from “Find Tickets” to “Buy Tickets”.
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.
