Fandango My Account Redesign pictures

Fandango Account Redesign

Strengthening the connection between Fandango and users

Role

UI Intern

Duration

January – April 2024

Tools

Figma

Jira

Presented to Senior Leadership

Overview

This case study outlines the my conceptual redesign project of the My Account page on the Fandango iOS app. As the leading movie ticketing app on the iOS App Store, Fandango is well known for its entertainment services and has extended itself beyond theaters with its streaming service counterpart, Fandango-At-Home.

Throughout my 8-month internship at Fandango, I noticed a substantial gap in the platform's relationship with users. Thus, I asked:

How might we strengthen the emotional connection between Fandango and users?

Project Goals

Engage users

Engage users with captivating and informative content.

Optimize whitespace

Optimize whitespace to provide impactful, action-oriented resources.

Project Flow

1.

Gathering Insights

2.

Research

3.

Brainstorming

4.

Iterations

5.

Comparisons

6.

Final Designs

TAKE A PEEK!

Product Preview

Prototype of My Account dashboard

DASHBOARD

Improving clarity in one screen

The redesigned My Account Dashboard page provides previews of each section, optimizing space and simplifying navigation while showcasing important elements like Tickets.

REWARDS

An incentivizing reward system

The FanRewards section offers a comprehensive view of points and redemption options, encouraging users to engage with loyalty features.

Movie Journey

Connecting brands

The My Movie Journey section integrates Fandango's brands – Rotten Tomatoes and Fandango-At-Home – offering users a holistic view of their history and activities across platforms.

01 / Gathering Insights

TODAY'S FLOW

Current flow analysis

The current user flow in Fandango is inefficient: users browse movies, buy tickets, and watch movies. As the average Fandango user buys tickets every 2-3 months, this downtime results in decreased app engagement. Implementing dynamic content or personalized recommendations during these periods can enhance user interest and maintain engagement.

However, when users have no upcoming movies, the Upcoming Tickets screen is blank, leading to wasted screen space.

[1] Fandango user flow

Analyzing the user connection

User-centric information is confined to the My Account page, accessed via a small, easily overlooked profile icon. This page opens to a restrictive list view, limiting user exploration.

[2] Fandango's My Account Today

02 / Research

Validating assumptions

Utilizing Fandango’s KnowledgeHound research and a 2023 iOS app data pull, I discovered that  the My Account page receives significantly fewer visits compared to the Home and Movie Overview pages. This suggests a lack of prominence, immediate usefulness, and possibly complex navigation.

[3] Data of total visits on Fandango pages on iOS app

Loyalty program insights

2.2% of orders are redeemed with FanRewards.

The low redemption rate signals a potential issue of low awareness of FanRewards likely caused by its nested placement within the My Account page.

[4] Statistic of orders redeemed with FanRewards

The value of rewards

Considering that two-thirds of users express a desire to attend more movies if incentivized with points, there exists a significant opportunity to enhance the loyalty program’s visibility and functionality.

[5] Movie loyalty program drivers

Defining primary users

Before designing, I wanted to understand the key users that this project would be targeting. Key questions included:

1. Who are the common Fandango app users?

2. Do app users value FanRewards?

3. What frustrates Fandango app users?

Through Fandango's comprehensive user research, I identified two primary user segments:

The Escapists

  • 22% of Fandango users
  • Enjoys: Finding a great movie to watch
  • Values: Being the first to know about movies, keeps up with rewards
  • Pain points: Difficulty tracking rewards, lack of personalization
  • Should leave Fandango feeling: Valued and excited

The Occasional

  • 39% of Fandango users
  • Enjoys: Spending time with friends and family
  • Values: Convenience and efficiency
  • Pain points: Being unable to quickly find the information they need
  • Should leave Fandango feeling: Surprised and interested

A look at competitors

I proceeded with a competitive analysis to understand strategies employed by other movie ticketing apps. Notable direct competitors include Atom Tickets and CGV, a South Korean movie ticketing platform, while indirect competitors encompass IMDb and Megabox, focusing on movie information provision.

Across these platforms, a common trend emerged: the integration of personalized sections designed to incentivize users to prolong their app engagement. These personalized sections range from watchlists to movie statistics, serving as effective tools to keep users actively engaged within the app ecosystem.

[6] Logos of Fandango's direct and indirect competitors

03 / Brainstorming

An interactive sketch session

I conducted a sketch session with the design team, focusing on key elements such as FanRewards, Upcoming Tickets, and personalized content. We prioritized features based on user needs and project scope.

[7] Sketches of brainstorming activity conducted

Priority list

With key insights from the sketch session and my goals for the project, I created a priority list to serve as a strategic roadmap. This helped me ensure project feasibility within the designated scope and timeline.

I categorized each key feature based on its impact on the user experience and its contribution to strengthening the relationship between users and Fandango.

[8] Priority lists of Fandango My Account features

Developing a task flow

I developed a user and task flow to navigate potential user scenarios within the My Account page.

This ensures a seamless user experience, preventing dead ends and providing our Escapist and Occasional users with personalized content to enhance exploration.

[9] Task flow charts of the Dashboard and Rewards page

04 / Iterations

I iterated through a total of three design phases, incorporating continuous feedback and critiques from the Product Experience team to eliminate any gaps in the project. The following showcases the changes and explorations made throughout the journey towards the final designs.

DASHBOARD

The power of cards

I designed a dashboard interface that utilized cards and dividers to create a seamless navigation system that doesn’t overwhelm users with information. This allows users to gain a short overview of each section without tapping.

[10] Skeleton of dashboard with cards

Finding an intuitive layout

As I delved into redesigning the My Account page, I initially experimented with anchored tabs for navigation, as depicted on the left. However, upon further exploration, I chose a single-page scrolling navigation to optimize whitespace and maintain design consistency across the app, as anchored tabs were not used elsewhere on the Fandango platform.

Option 1

Anchor Tabs

Option 2

Single-Page Scrolling

Considering order of information

During the My Account Dashboard design iterations, I gave thoughtful consideration to where to place the "About You" section, which features user-oriented movie statistics. After exploring various options, I chose to position it at the bottom.

This choice was driven by the goal of pleasantly surprising users while ensuring it harmonizes with other sections and doesn't overshadow essential features like FanRewards. This approach aimed to elevate the overall user experience by balancing delight with functionality.

Option 1

High Emphasis

Option 2

Medium Emphasis

Option 3

Low Emphasis

FANREWARDS

Redesigning FanRewards

The current FanRewards page lacks a clear visual hierarchy and a seamless user interface.

To address this, I experimented with using cards to enhance the visual appeal and information organization of FanRewards. Incorporating clear call-to-action buttons, I aimed to promote user exploration and engagement within the Fandango app.

[11] Side-by-side comparison of today's FanRewards page with card explorations

Card Explorations

I conducted several rounds of iterations for displaying rewards that would be digestible at a glance.

Each iteration explored different types of progress bars, from circular to linear, experimented with color combinations, and refined the hierarchy to ensure optimal user comprehension and engagement.

[12] Visual explorations of the card element for the rewards page

UI Kit

While adhering to Fandango’s established design system, I incorporated existing icons, CTAs, and cards to maintain a seamless UI design. I also introduced new cards and icons that align with brand guidelines, ensuring consistency and visual harmony throughout the design.

[13] UI Kit used for the Fandango My Account Redesign project

Final Screens

I designed and prototyped a total of 17 screens that would be used for the My Account page of the Fandango iOS app. Each set of screens is split up into sections based on the Dashboard, Reward, and Movie Journey.

All
Dashboard
Rewards
Movie Journey
Final screens of My Account Redesign
Final screens of dashboard
Final screens of Reward
Final screens of My Movie Journey

COMPARISONS

Out with the old, in with the new

Dashboard

CURRENT

Lacks visual appeal and fails to highlight specific features effectively.

REDESIGN

Features an engaging scroll using cards and visual elements to emphasize various features, enhancing user engagement and comprehension.

FanRewards

CURRENT

Lacks hierarchy and hidden links on how to use rewards.

REDESIGN

Clear visual hierarchy with prominentCTA buttons that guide users on how to redeem rewards.

FanRewards – Magnified

animation of rewards page accumulating points
The Final Product

My Account Redesign

GIF
PNG
Prototype of My Account dashboard

DASHBOARD

Improving clarity in one screen

The redesigned My Account Dashboard page provides previews of each section, optimizing space and simplifying navigation while showcasing important elements like Tickets.

GIF
PNG

REWARDS

An incentivizing reward system

The FanRewards section offers a comprehensive view of points and redemption options, encouraging users to engage with loyalty features.

GIF
PNG

Movie Journey

Connecting brands

The My Movie Journey section integrates Fandango's brands – Rotten Tomatoes and Fandango-At-Home – offering users a holistic view of their history and activities across platforms.

Future Considerations

Conducting usability tests

Given the timeline and scope of this project, I was unable to conduct tests that involved users and the design. If given more time, I would emphasize the importance of user testing to ensure there are no gaps or confusion in users' experience with the My Account page.

The future of Fandango and its brands

Because this project integrates Fandango's brands, Rotten Tomatoes and Fandango-at-Home, into the My Movie Journey section, considerable thought should be given to how Fandango will continue this brand integration. Whether it will be connected more seamlessly or limited should be decided.

Takeaways

Pacing yourself

This project taught me to take time with each step. Maintaining a steady pace and having a solid foundation to build off helped contribute to the seamless integration of data and research into my final designs.

Designing for edge cases

When working with several screens and user-dependent data, I needed to consider many edge cases. Examples include empty states, multiple tickets, and more. This project allowed me to stay creative with how these edge cases would be designed.

More Projects

Hue

Removing bias and ensuring honesty in product reviews

Fandango Crosslinking Tabs

Bringing the cinematic discovery experience to the comfort of your home

Let's create design sunshine.

Works
About
LinkedIn
Resume
minm@usc.edu