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
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
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
- 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.
- 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.
- Burying tasks into multi-tiered actions can quickly become cumbersome and confusing
Surface Quick Actions / Clear Breakdown of Tasks
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
Users can select and manage their saved outfits. Setting custom UI colors for the app was a feature later added to this screen.
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.