Howster
disneyMix_thumb.png

Disney Mix

 
disneyMix_thumb.png

Disney Mix

A social media app for kids
UX Design • UI Visual Design • UI Architecture and Integration


Global UX - Wireframes

Early pass at the high level UX for the major features of Mix.


Parental Controls and Friend Management - Wireframes

Early pass at blocking out parental controls and managing friends in Mix.


Sending Media - Wireframes

Early pass at wireframes for sending photos and videos and other media types in Mix

Click image for more


Conversation Screen

Users can quickly see and navigate to their saved conversations.


Play in Chat

Users can play 3D mini-games in chat seamlessly without ever leaving their conversation.


UX Case Study - Profile / Avatar Editor

The Problem

Usability testing indicated the following issues in the Profile and Avatar Editor screens:

  • Users were having a difficult time understanding and navigating through both screens
  • Users wanted the ability to save multiple outfits and quickly change between them
 

Goals

  • Introduce a saved outfit feature
  • Streamline Avatar Editor features so that customizing features are clear and uncomplicated

Combining Screens for Less Clicks

An early exploration for streamlining these features included combining the Profile and Editor screens into a single screen. The result, however, was an overcrowded design and caused cognitive overload.

LESSONS LEARNED

  • Combining features into a single screen with the sole intent of streamlining the experience can make for a far more confusing experience overall
  • Complex features and activities must be broken down into clear and distinct steps or groupings

Hiding and Showing Content

A technique I've often utilized when approaching complex activities is hiding content and only showing that content when necessary. But care must be used when doing this, as certain tasks become overly complicated and cumbersome.

LESSONS LEARNED

  • Burying tasks into multi-tiered actions can quickly become cumbersome and confusing

Surface Quick Actions / Clear Breakdown of Tasks

PROFILE SCREEN
Saved outfits were realized into distinct slots always visible to the user on the Profile screen. Here, the user sees the result of the actions performed in the avatar editor after saving their edits. They can quickly switch between their outfits as well as delete or overwrite old creations.

AVATAR EDITOR SCREEN
High level navigations groupings were kept consistent at the top of the screen. Undo and delete actions were surfaced to the user as persistent buttons so it was clear how to manipulate items on their avatar.


Final Design and Implementation

Profile Screen

Users can select and manage their saved outfits. Setting custom UI colors for the app was a feature later added to this screen.


Avatar Editor

Users can edit their avatar's appearance and wear fun and expressive accessories and costumes. Quick action buttons allow users to reset or remove avatar features.