Case study
Fandango Mobile Nav Redesign
Redesigned Fandango's mobile navigation experience so movie browsing, theater discovery, and ticket purchasing felt easier to scan on small screens.
Company
Fandango
Role
UX Design Intern
Timeline
Summer 2022
Team
Product Manager, UX Designer, Engineers
Context
The mobile site had to support browsing, location, trailers, showtimes, and ticket intent in a very small frame.
Fandango helps people discover movies, compare theaters, watch trailers, read ratings, and buy tickets. A large portion of users access Fandango via mobile web. The redesign focused on one practical question: how could the mobile web experience keep core browsing paths close without letting navigation take over the page?
Home, Movies, and Theaters were the highest-value paths.
Search and location needed persistent access without crowding content.
Promos, studio logos, and page tabs competed with movie discovery.
01
Experience issues
The issue was more about hierarchy under compression.
The existing page exposed many useful choices, but the top of the screen was doing too much at once: logo, search, location, studio strip, promo banner, movie rows, and page navigation all competed for attention before a user could settle into browsing.
Navigation clutter
Core page tabs and utility actions were visually close together, making the browsing model harder to parse.
Weak scanning rhythm
Promotional and partner content interrupted the movie list before the page established a clear discovery flow.
Screen economy
Repeated chrome consumed vertical space across home, movie detail, and theater pages.
02
Design exploration
I used research artifacts as working tools, then moved quickly into alternatives.
The strongest throughline was not a formal research process. It was the set of decisions that followed: simplify the top-level model, protect search and location, reduce redundant tabs, and test how the nav should behave while people scroll.
User framing
I used the persona and journey map to keep the work anchored in casual movie planning: people wanted to keep up with releases, find something worth watching, and move from browsing into showtimes without too much planning overhead.
Navigation exploration
The brainstorm session gave me a broader set of navigation observations and constraints. I then combined those inputs with the research findings and sketched four early concepts to compare which controls deserved persistent access, which tabs could be simplified, and how much of the header should stay visible while users scanned movie rows.
The four sketches explored different ways to balance page-level navigation, search, location, and vertical space: shrinking the nav, hiding it during scroll, elevating search and location, and testing whether bottom navigation made the browsing model easier to reach.
Wireframe options
After the sketches, I brought the strongest directions into three wireframe options so the team could react to the structure rather than the visual styling. Each option tested a different balance between navigation persistence, page space, and access to search or location.
Keep key utilities close
Search and location still needed fast access, especially from browsing and movie overview pages.
Reduce repeated chrome
The navigation should save space while users scroll instead of repeatedly pushing content down.
Simplify the tab model
The team feedback pointed toward fewer top-level tabs, clearer labels, and less reliance on icons.
Visual iteration
The visual pass compared active states, tab count, brand-bar relationships, and accessibility considerations. The selected direction reduced the tab model and made the active browsing path easier to recognize at a glance.
03
Final experience
The final direction made browsing paths more explicit while giving page content more room.
Home, Movies, and Theaters became the primary tab model. Search and location stayed in the utility area. Offers moved below navigation, and studio logos shifted lower so the first screen could better support movie scanning and ticket-planning intent.
Responsive surface
The same navigation model carried across theater and movie contexts.
The final screens keep orientation stable while users move between discovery and ticket planning. The scroll behavior also preserves access to search and location without letting the full navigation block dominate the page.
04
Reflection
A small navigation project became an exercise in prioritizing what the screen should protect.
The useful lesson was restraint. The site already had the ingredients people needed for movie planning, but the mobile interface needed a clearer order of operations: orient, browse, compare, then act.
If I revisited this work today, I would prototype the scroll behavior in more depth and validate the navigation model against real showtime and theater-selection tasks.