Desktop and mobile web view of Fandango website with crosslinking tabs

Fandango Crosslinking Tabs

Bringing the cinematic discovery experience to the comfort of your home.


UI Intern


September 2023 - April 2024





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 Vudu, one of Fandango’s brands, 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.

[1] Universal building and my Fandango team!

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 Vudu 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

The Movie Overview Page on Fandango serves as an informational and action hub, displaying movie showtimes, nearby theaters, cast information, and FAQs.

Currently, the Vudu branding is hidden, requiring users to scroll past all theaters, which reduces traffic to Vudu.

Video walkthrough of Movie Overview Page on desktop

[2] Video walkthrough of Movie Overview Page on desktop

The Solution

Tabbed Navigation

To address the integration, I proposed a tabbed navigation system for both desktop and mobile web. This allows users to easily switch between viewing options, improving visibility for both Fandango and Vudu.

Jump to solution

02 / Iterations

Converting low fidelity to high fidelity

Upon joining the team, I collaborated with the existing UX Designer, who had drafted low-fidelity wireframes for the Movie Overview Page. My role was to refine these wireframes into high-fidelity designs using Fandango’s established design system. Given that over 88% of Fandango’s traffic comes from mobile web users, my design efforts were primarily focused on optimizing the mobile web experience.

Low-fidelity drafts of mobile web Movie Overview Page

[3] Low-fidelity drafts of mobile web Movie Overview Page

Business Challenges

A significant concern during the design process was optimizing for SEO while preventing layout shifts, particularly for movies only available in theaters or at home. We needed a fallback design for these scenarios.

View of shifting layout when adding tabs

[4] View of shifting layout when adding tabs

Understanding Copy and Users

To address edge cases where movies aren't available in theaters, I collaborated with Marketing and Research to craft friendly, human-centered copy. Additionally, I enhanced the modals with icons for improved user comprehension. This approach resolved layout shift issues and provided the added benefit of delivering more information to the user.

Addition of movie status label

[5] Addition of movie status label

Designing tabs

As my mentor and I began designing the tabs for the state that a movie is available in theaters and on Vudu, we ran through several iterations of designs. We eventually chose pill tabs for mobile web due to their accessibility and brand alignment.

Orange stroke tab

Option 1

Orange tabs

Blue Tabs

Option 2

Blue tabs

Pill Tab

Option 3

Pill tabs

Cross analysis of tab design iterations

Visual Explorations with Tabs

We explored further with the pill tab design, playing around with the brand identities of Fandango and Vudu’s prominent orange and blue primary colors. After experimentation and discussion with stakeholders, I moved forward with the non-colored tabs to maintain a cohesive and accessible design.

orange/blue tabs

Option 1

Blue/Orange Tabs

Non-Colored Tabs

Option 2

Non-Colored Tabs

Cross analysis of pill tab design iterations

But what about desktop?

[6] Pill tab to orange stroke tabs on desktop view

For the desktop version, pill tabs appeared bulky. We opted for our existing design system tabs, defined by its orange stroke. This allowed us to optimize the whitespace that existed on desktop while maintaining responsive design principles and ensuring accessible tap targets on mobile.


We encountered challenges with  Vudu’s Watch At Home modal, which exists under the “Watch At Home” tab, particularly in ensuring visual harmony with all movie posters. After stress-testing gradient modals, we selected a non-decorative modal design for its cohesiveness and seamless integration.

Stress testing iterations of gradient modal

[7] Stress testing iterations of gradient modal

Non-Decorative Model

Option 1

Non-Decorative Model

Gradient modal

Option 2

Gradient Modal

Cross analysis of modal design iterations

User-Centric Copy Changes

Data revealed that around 50% of users were unaware they could buy tickets on Fandango. To improve clarity, I changed the call-to-action from “Find Tickets” to “Buy Tickets”.

Changing from "Find Tickets" to "Buy Tickets" copy

[8] Changing from "Find Tickets" to "Buy Tickets" copy

Contributing to the design system

I published the pill tabs in the Fandango Design System library. I also created guidelines to help other designers and engineers use for future designs. Prior to this, there was no existing documentation in the design system.

Crosslinking UI Kit and documentation for pill tabs

[9] Crosslinking UI Kit and documentation for pill tabs

Comprehensive Design for Multiple Use Cases

I created over 30 high-fidelity mockups, collaborating closely with designers, engineers, and PMs to cover all possible use cases. This process honed my organizational skills and prepared my designs for review and implementation.

The Final Product

Fandango Crosslinking Tabs

Fandango crosslinking tabs
Watch at Home movie option
Movie messaging labels

Desktop view

Fandango Mobile Web Prototype

Mobile Web View

03 / Takeaways

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.

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.

More Projects


Removing bias and ensuring honesty in product reviews

Fandango Account

Strengthening the connection between Fandango and users