Tournament Challenge

In a Nutshell

Bounce Rate Down by 13%

Improved UI

Improved Team Culture

I lead the team to elevate and modernize visuals for the welcome experience and decrease bounce rate by 13%.

Problem

Users drop out when app is loading for too long and seems "frozen", outdated visuals

Challenges

Collaboration between multiple departments, engineering constraints.

Timeline

May - June 2023

Role

Lead a team of motion designers, graphic designer, content designer and 2 teams of engineers.

Problems and Opportunities

Business Need

Figure out a way to introduce new unified Disney sign in flow into the current ESPN use case.

Problem

When the app loads for the first time it may take some time. Users drop out, because they think that the app "froze".

Opportunity

Revamp the visuals and make more modern, seamless, exciting and in alingnment with the new brand.

Solution

Create an updated modern sign in experience in accordance with the latest Tournament Challenge brand guidelines and new Disney account creation flow. Account for the edge cases when it takes a while to load and give user visual feedback that it's still loading.

Previous TC app experience

Research

Insight

Competitive analysis has shown the current trend for elevated and exciting welcome experiences with lots of motion. Most companies allow users to experience the app first before asking them to create an account. Another trend was for unification of sign up / sign in buttons under one CTA "Get started" or personalization flow.

Some of our direct and indirect competitors: Sleeper, Bleacher Report and NBA

Design

1. Aligning with stakeholders

Welcome experience is especially important in the app like Tournament Challenge, because most users in March either download it for the first time or have to fully update it. I had to make sure that my product partners and design partners from other Disney departments are fully on board and support this design direction. I created a chart of various welcome experiences on the market and explained how we can use this to better fit the new One-ID sign-in flow that was being launched by Disney while at the same time creating a better expereince for the user.

Creating visual charts usually really helps in communicating with stakeholders.

2. Defining UX flow.

Together with engineering partners we defined three stages of the welcome experience.
Stage 1 - splash screen with a flat image
Stage 2 - app loading with continuous looped movement
Stage 3 - intro animation ending with CTAs

UX Flow, defined after feedback from the development team

Three stages of welcome experience

3. Collaborating with Motion & Graphic Design

In order to create artwork and motion sequences for the suggested concept I had to collaborate with my fantastic and very talented co-workers in Graphic Design, Motion Design and Content Design. My job was to explain the concept, the requirements, provide storyboards and align on aesthetics.

"Empty Court" concept storyboards that I created to collaborate with graphic designer

From concept to final design of the home page.

Mocking out prototypes from existing graphics and assets to makee sure we align on the exact lottie files needed for delivery

3. Visual feedback for loading stage

Old vs New App Loading stage - collaboration with content designer, motion designer and graphic designer.

Delivery

Working with design systems and engineers

Delivery included redlines, motion specifications, lottie files, video and clickable prototypes.

Some sections of delivery file

Impact

Bounce Rate Down by 13%

Less users leave the app during the loading time.

Improved UI

Better elevated visuals lead to a more enjoyable and modern experience.

Improved Team Culture

Cross-functional partnership between product design, motion design, graphic design, contend design and 2 team of engineers is not something that happens often and has strengthened our culture.

Final Screens