casey chisom - Creatorverse

The Problem

Linden Lab had purchased Creatorverse from an indie game developer as part of their new products initiative. While the app's functionality was very robust, the user experience and UI was non-intuitive and difficult for users to understand. The initial experience involved quite a bit of aimlessly clicking around, so I began to identify its various functions and obvious pain points.

This was the initial experience at the time Linden Lab had purchased it in 2012.

The Goal

Create a fun and intuitive user experience that guides users seamlessly through the desired flow: Draw an Object, Apply Color, Animate, and Share to Community. The app should allow users of any skill level to use basic features immediately, and learn to advance through an intuitive user flow with the help of a contextual UI and an omni-present help system that links to basic tutorial videos.

Since Linden Lab's signature drag-and-drop interaction paradigm had proven to be quite successful in Second Life and other apps, Creatorverse should follow suit.

THE DESIGN PROCESS

To get started, I created some design explorations, attempting to address some questions that came up during our feedback sessions: Should menus be consistent, or contextual? Is the placement and organization ideal for our users? What UI elements are best for each function? I found that presenting side-by-side options of potential solutions helped my teammates visualize the pros and cons of each, allowing us to make educated decisions on how to move forward.

Option 1

Features are grouped by category: drawing tools, color palette, and global properties.

Option 2

Animation properties are displayed in a drawer that is activated when user selects an object.

Option 3

Animation Properties are displayed in a pop-over window that is activated when user selects an object

Finalizing the Design

After presenting each tangible option to the Head of Product, I covered the main screens of the user flow in high-fidelity mock-ups. Experimenting with color, our Art Director and I agreed to keep the UI flat and simple, using some rainbow-colored elements that were developed in the branding we had been refining.

It was decided that any elements that were used most often are to be placed on the right side, as most users are right-handed, to avoid discomfort in using the app on an iPad. The animation panel was considered the most intuitive as a pop-over window by our teammates because the side-by-side view made it very clear as to which object the user is animating.

The animation canvas allows creators to draw with shapes, add joints, and apply colors.

Tap an object to move it around, or double-tap to view animation properties.

Tap the rocket icon to adjust global properties.

Welcome to Creatorverse

I created a fun, playful UI and a brand to match. Using simple icons, colors, and shapes to showcase fun objects that could be easily created within the app, while also implying motion. This was meant to inspire our young users to create to their heart's content without regard to skill level or artistic ability.

Design explorations

The initial landing page we acquired.

My first-pass at the brand.

Experimenting with "universe" and "motion" elements.

Added dimension to background, but we decided to keep the flat look since it could be created in the app.

Product Tour & HelP

Upon first time launch, a contextual help screen is activated on the animation canvas to show users where to find each feature. A sample Creatorverse animation is provided for users to play with and learn as soon as they begin using the app. The help menu can be brought back at any time by tapping the help icon.

Design Explorations

The initial help screen with basic improvements before the redesign.

Click on a topic to view a tutorial video.

Swipe through video topics to learn more.

Animation Canvas

Creators drag-and-drop shapes from the toolbar on the right onto the canvas, then drag colors from the bottom onto the shapes to create a character, scene, or anything their imagination desires! Tap the "Play" button to see your creation in action.

Design Explorations

Animation Properties Panel

Double-Tap any object on your animation canvas to edit animation properties available, and tap anywhere outside the panel to return to the default canvas view. This isolated view allows users to clearly see the effect of editing animation properties in real-time before committing to the change.

To determine the layout of the animation panel, I designed around our most robust use cases to allow for the "worst case" scenario of animation properties. This is one of the examples I worked to solve - other properties were less complicated and required less UI design.

Design Explorations