Disney Social - Social Hub

PLATFORM 
WEB, MOBILE

SCOPE
UI, UX, BRANDING IDENTITY

 

PLATFORM 
WEB, MOBILE

SCOPE

UI, UX, BRANDING IDENTITY
 

PLATFORM 
WEB, MOBILE

SCOPE
UI, UX, BRANDING IDENTITY
 

TOOLS
SKETCH APP, ADOBE ILLUSTRATOR, INVISION

YEAR
2017

TOOLS
SKETCH APP, ADOBE ILLUSTRATOR, INVISION

YEAR
2017

When I was working for Disney Interactive, I got the chance to work on some cool projects. I was part of the Social Experience team, which was responsible in crafting user experience for social interaction in the Disney virtual world.

The main project that I worked on during my time at Disney was the Social Hub. The Social Hub acts as the main gateway that connects all of the Disney online products. Previously, each of the Disney product is their own entity. Club Penguin had its own friends list, while Pixie Hollow had its own friends list. The Social Hub will act as the middleman between all the products and consolidate all of the social candidates and interactions. Because of the Social Hub, the user will finally have a universal friends list that stays the same no matter what platform/video games you are currently in.

The Social Hub was designed in a way that the look and feel of it could be customized according to what media or platform it’s currently in. They would have the same features and functionality, but with different ‘skin’ on it. The Social Hub in Club Penguin will look different than the Social Hub in Disney.com, for example. The Social Hub consists of 3 main modules : Friends, Chat, and News Feed.

When I was working for Disney Interactive, I got the chance to work on some cool projects. I was part of the Social Experience team, which was responsible in crafting user experience for social interaction in the Disney virtual world.

The main project that I worked on during my time at Disney was the Social Hub. The Social Hub acts as the main gateway that connects all of the Disney online products. Previously, each of the Disney product is their own entity. Club Penguin had its own friends list, while Pixie Hollow had its own friends list. The Social Hub will act as the middleman between all the products and consolidate all of the social candidates and interactions. Because of the Social Hub, the user will finally have a universal friends list that stays the same no matter what platform/video games you are currently in.

The Social Hub was designed in a way that the look and feel of it could be customized according to what media or platform it’s currently in. They would have the same features and functionality, but with different ‘skin’ on it. The Social Hub in Club Penguin will look different than the Social Hub in Disney.com, for example. The Social Hub consists of 3 main modules : Friends, Chat, and News Feed.

Social Hub 1

The login window for the Disney Social Hub

Social Hub 2

The Friends module within the Social Hub bar

The Friends module within the Social Hub bar

Social Hub 3

Friends functionality

Social Hub 4

The default Social Hub on Disney.com

The default Social Hub on Disney.com

Social Hub 5

Customized Social Hub look

Social Hub 6

Chat Module

Chat Module

Embedded in the chat feature in the Social Hub is a very important feature, the Phrase Autocomplete. Phrase Autocomplete is the mechanism that makes sure all kids can chat not only freely but also safely. The way Phrase Autocomplete works is by giving 4 to 5 word suggestions based on what the user types. In this case the suggestion acts more like available choices as the user can only send messages consisting of approved words. Messages with wrong spelling and/or forbidden words (such as swear words) won’t be able to be submitted. I was awarded a US Patent for contributing in helping design the user interaction model for Phrase Autocomplete. For a better idea on how Phrase Autocomplete works, take a look at the video below.

Embedded in the chat feature in the Social Hub is a very important feature, the Phrase Autocomplete. Phrase Autocomplete is the mechanism that makes sure all kids can chat not only freely but also safely. The way Phrase Autocomplete works is by giving 4 to 5 word suggestions based on what the user types. In this case the suggestion acts more like available choices as the user can only send messages consisting of approved words. Messages with wrong spelling and/or forbidden words (such as swear words) won’t be able to be submitted. I was awarded a US Patent for contributing in helping design the user interaction model for Phrase Autocomplete. For a better idea on how Phrase Autocomplete works, take a look at the video below.

Disney Social Mobile App

Further implementation of the Social Hub can be seen in another project that I worked on. That project was the Disney Social Mobile App, which was one of the most fun project I’ve worked on to this day. The purpose of the app is to give kids a fun and exciting way to interact with their friends online in safe environment. Being one of the leading brands in the world that appeals to kids, safety is a very huge concern for Disney. The user experience must be crafted in a way that’s safe for the kids, but also fun to engage with. The experience must be clear and not ambiguous. 

Why is the Disney Social Mobile App necessary? Disney Social Mobile App enables the user to interact with his/her friends without having to play the video games. 

With the Disney Social Mobile App, the user is able to :

  1. Create/Build user avatar using Disney’s own Avatar Builder or Disney’s existing Avatar library.
  2. Find and add their friends through their Disney ID, as well as the ability to delete their friends.
  3. Chat with their friends safely.
  4. Buy and/or redeem Disney Pins (Digital and Physical) from the Disney store in the app. The digital pins can be used while chatting with friends.
  5. Buy and/or redeem Disney Theme from the Disney store in the app.
  6. Be updated with their friends’ activities throughout the Disney virtual world through the News Feed.

Further implementation of the Social Hub can be seen in another project that I worked on. That project was the Disney Social Mobile App, which was one of the most fun project I’ve worked on to this day. The purpose of the app is to give kids a fun and exciting way to interact with their friends online in safe environment. Being one of the leading brands in the world that appeals to kids, safety is a very huge concern for Disney. The user experience must be crafted in a way that’s safe for the kids, but also fun to engage with. The experience must be clear and not ambiguous. 

Why is the Disney Social Mobile App necessary? Disney Social Mobile App enables the user to interact with his/her friends without having to play the video games. 

With the Disney Social Mobile App, the user is able to :

  1. Create/Build user avatar using Disney’s own Avatar Builder or Disney’s existing Avatar library.
  2. Find and add their friends through their Disney ID, as well as the ability to delete their friends.
  3. Chat with their friends safely.
  4. Buy and/or redeem Disney Pins (Digital and Physical) from the Disney store in the app. The digital pins can be used while chatting with friends.
  5. Buy and/or redeem Disney Theme from the Disney store in the app.
  6. Be updated with their friends’ activities throughout the Disney virtual world through the News Feed.
Disney Social – 1

Onboarding process

Onboarding Process

Disney Social – 2

Disney Avatar Builder  - DisneyID Registration - Friends Module

Disney Avatar Builder  - DisneyID Registration - Friends Module

Disney Social – 3

Chat feature in the Disney Social Mobile App

Chat feature in the Disney Social Mobile App

Disney Social – 4

Disney Pin Shop

Disney Social – 5

Redeeming Pins by scanning the QR code and then using the pins on Chat.

Disney Social – 6

Custom themes for the app

Custom themes for the app

I can help solve your design problem.

Interested in working with me?
Book your free 15 minutes consultation now to discuss your project with me.

Got any questions?
Shoot me an email at [email protected].

I can help solve your design problem.

Interested in working with me?
Book your free 15 minutes consultation now to discuss your project with me.

Got any questions?
Shoot me an email at [email protected].

See my other works