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.
.gif)
[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.
[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.
[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.
[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.
Option 1
Orange tabs
Option 2
Blue tabs
Option 3
Pill tabs
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.
Option 1
Blue/Orange Tabs
Option 2
Non-Colored Tabs
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.
Modals
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.
[7] Stress testing iterations of gradient modal
Option 1
Non-Decorative Model
Option 2
Gradient Modal
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”.
[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.
[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.
.gif)
