CREATIVE
CPI-CreateAccount-Title.png

Club Penguin Island Account Creation

UI/UX Design

 

The Opportunity

In our Club Penguin Island game, we were getting a 25% drop-off rate with our create account experience.


The Solution

Design & iterate through A/B testing ways that will ultimately improve our user flow completion rate by:

  1. Simplifying or removing friction points in the form entries

  2. Adding fun/entertainment to the experience

  3. Providing incentives or rewards

CPI-CreateAccount-TopImage.png
 

Role

UI/UX team lead and lead designer at Disney Consumer Products and Interactive Media.

 

The Process


 

Data-informed design

  • Partner with our BI (business intelligence) team to discover key friction points in the current flow

  • Partner with our BI team, producer and developers to design relevant A/B tests on our design assumptions

  • Hold play tests with kids to get real-time feedback from users

  • Improve and iterate on our designs based on our play and A/B test results

 

Unique challenges

coppa_compliant_badge_white-62ca535ed9ff69323bca1541cdf7bf107d82f47831105aeeadaa7f2099b306ed.png

Legal
Since we were a kids product, we had to ensure we followed the strict CARU and COPPA compliance legal requirements, which included asking for a parent email to complete the process and activate the account.

 
DisneyAccount.png

Parent brand alignment
All of our account creations were processed through the wider Disney Account creation system. A Disney Account was the user’s access to all other Disney digital products, not just the Club Penguin Island game. This required us to partner with the Disney Account team for brand approvals and tech alignment.

 

Design & Test


Current experience

An “all-at-once form”

The create account steps were served up on as a form on one screen. A one screen form may seem like a simplified user experience; however, we were seeing a 25% drop off rate before the form completion. Our theory was that it became tedious for the user to complete so many steps to get past one screen. Also, if they came across any friction in the form completion, they gave up rather than start over.

 

New experience

A “dispersed form” & Progress celebration

To give the user a sense of progress as they complete the form, we would break each step out per screen as they were completed. Also included in the design update:

  • removal of the branded Disney Account screen to simplify the flow

  • a progress bar with celebration particle FX/scale animations to appear with each step completion

  • a penguin avatar to animate and react to each step completion to evoke emotional connection to the penguin they user is bringing to life

  • tool tips to provide info about Disney accounts

  • a back button to go back a step

  • animated completion states for buttons as each each form is completed

  • generated username options if the name is taken

  • removal of the "already have a Disney Account" sign in button

 

Once we had a design and flow that was approved by the product team, legal team and Disney Account brand team, we implemented the new design (shard 2) into our Unity game as an A/B test against the original flow (shard 1).

AB Test Results

Goal: Can we improve new user funnel completion rates?
Metric: % first boots who complete account create flow.

shard 1

CONTROL
Current Experience (all-at-once form)

  • 65.6% completion success

  • N/A % lift

CPI-Create-Current.png
 
 

shard 2

(Winner)
TEST A
New Experience (dispersed form)

  • 67.2% completion success

  • +2.5% lift (statistically significant)

 

Flow Optimization


Now that we knew our revised design was a winner, we wanted to see if we could improve it even further by optimizing the steps in the flow. To determine the most effective way to serve up each of the form steps, we created variations of the designs as shards in another A/B test.

shard 1

CONTROL
First name → Email → Username → Password
Results: 84% completion

shard 2

(Winner)
TEST A

Email → Username → Password
Results: 86% completion

CPI-Create-ShardA.png

shard 3

TEST B
Username → Password → Email
Results: 82% completion

CPI-Create-ShardB.png

Take aways

  1. Removing first name is a small win for funnel throughput

  2. Placing email address as first step is optimal

  3. Get the tough stuff out of the way to avoid fatiguing users later

 
 
 

Providing rewards


Friend referral feature

To further engage our players and connect new players with the community, we added a friend referral feature to the create account funnel.

Both the new player and existing player receive rewards when the new user signs up and completes the thank you gift form entry.

 

Friend referral in account creation

We added a friend referral step in the create account form so that new players can send a thank you gift to a friend who referred them.

CPI-Name-Penguin.png

Referee prompt

When the new player logs in, they receive a prompt letting them know they’ve received a gift from the user name they entered during sign-up. The animated rewards screen is then shown to reveal they have received the Party Blaster XL consumable item—when this pops, everyone nearby dances and gets coins!

Referrer prompt

When an existing player logs in whose name has been used during sign-up, they receive a prompt letting them know their friend has joined and that they have received a gift for helping grow the Club Penguin Island community. The animated rewards screen is then shown to reveal they have received the Party Blaster XL consumable item—when this pops, everyone nearby dances and gets coins!

CPI-Friend-Referrer-Prompt.png

Feature communication

To surface this new feature to our users, we added an evergreen marketing loading screen that is shown on rotation at login as well as a clickable banner within the friends list feature.

Marketing Loading Screen

 
MarketingLoadingScreen.png
 

Friends List prompt

CPI-Friend-List.png
 

Final design


 

Lessons


  • a feature is never “final” when launched in a live product—it can always improve

  • partner with BI to help inform your designs based on analytics and A/B test results

  • partner with BI to help understand what features should contain BI hooks and how to design your A/B tests to be scientifically sound

  • keep constant and open communication with stakeholders and partners to ensure they feel part of the process and to take advantage of everyone’s unique experience

 

Content shown © Disney.