Craig Huff logo Craig Huff logo Craig Huff logo
Hi, my name is Craig. I'm a UX/UI Designer.
Scroll down to see how I think and what I make, grab my resume, email me at craig@craighuff.ca, or connect with me through LinkedIn or Twitter.
Link to Craig Huff Dribbble Link to Craig Huff LinkedIn Link to Craig Huff Instagram Link to Craig Huff Behance

“Stirr is a mobile app that uses the accelerometer to capture and record motion so it can be incorporated into 3D animations.”

User Testing: When making an app for animators, it’s helpful to have a giant studio full of them next door to you. After introducing them to the concept, I asked users to draw a simple rectangular shaped path with the app:

Stirr wireframe low-fi record screen

In the first round of testing most users pressed “record”, then extended the phone out to begin drawing the rectangle, resulting in the above path.

Stirr wireframe low-fi playback screen

By adding a countdown with accompanying vibration for each stage, the user has the opportunity to get their grip positioned while giving them time to get the phone to their paths starting point.

Stirr wireframe low-fi settings screen

After the inclusion of the countdown users much more frequently achieved the above result.

Problem: animators have no access to low cost, easy to use motion capture technology.

Solution: With Stirr, animators draw a path in the air with their phones. Stirr captures this path and exports it to a 3D animation program, giving them quick and easy motion capture data to use in their animations.

Ummmm...: it does what now? The app is a lot easier to understand if you can see it in action, so below is a 39 second animation made to communicate the value and concept to animators:

“Animators communicate their ideas by acting them out: swooping, bouncing, and whooshing their hands around to illustrate the motion and timing they envision.”

Stirr app user flow

User Flow: Building a user flow from early sketches helped me spot ways to improve the user experience, such as contextually activated controls.

Stirr wireframe mid-fi record screen
Stirr wireframe mid-fi playback screen
Stirr wireframe mid-fi settings screen

Mid Fidelity Wireframes: By this point I’ve got some better ideas sorted, and am sketching at a higher fidelity to confirm I can fit the elements in the available space, and that touch targets are of usable size and spacing.

Stirr wireframe mid-fi settings 2 screen

This wireframe examines the Settings screen more closely, highlighting the tooltip that explains the path smoothing control.

Stirr wireframe mid-fi settings 3 screen

This wireframe highlights an example of various controls selected states.

Stirr wireframe Hi-fi record screen
Stirr wireframe Hi-fi path screen
Stirr wireframe Hi-fi settings screen

High Fidelity Mockups: These higher fidelity renderings help better communicate the value, concept, and aesthetic of the app to stakeholders and developers.

Conclusion: User testing indicates this app fills a need and professional animators would be interested in incorporating it into their workflow.

About
I’m a little obsessed with understanding and clarity. I think that motion can be incredibly meaningful in UX, and I want to show you how. I appreciate design that is user centered, elegantly functional, and aesthetically beautiful, and I want to help put more of it out into the world.

Link to Craig Huff Dribbble Link to Craig Huff LinkedIn Link to Craig Huff Instagram Link to Craig Huff Behance

Back to top