Audiostep

Interaction & Motion Design

SUMMARY

  • Role: UI/UX Designer / Motion Graphics Designer
  • Platform: iOS
  • Timeframe: 5 weeks
  • Deliverables: Animated task flow, mockups
  • Tools: After Effects, Sketch, Illustrator

BACKGROUND

This project was a study on the motion graphics behind movement within an application. This encompassed motion in interaction and transitions of on-screen elements. The overarching goal was to create a dynamic, interactive, and rich user experience.

In addition to the functionality of motion in transitions and interaction, motion graphics can drive the user experience by creating the feel and character of the interface through the 12 principles of animations.

The application I decided to create was a music player designed to be used on the move. This meant that all the interaction needed to be easily achieved with one hand and while walking, jogging, or running.

INTERACTION DESIGN

My research for this project was mainly focused on exploring the details in animations that communicate to the user. Animation can help lead a user to an action, orient the user to where they are in the experience, give feedback to the user, and simply be enjoyable to use.

Aside from the motion graphics, I explored the physical limitations of using a phone with one hand.

The figure displays two methods of holding a phone with one hand and the range of mobility the user has with their thumb. I wanted this to be reflected in my designs because of the importance of ease of use with one hand.

TARGET AUDIENCE & PERSONA

The target demographic incorporated daily commuters, joggers, and students. Because of the use case, I wanted large UI elements and bright visuals to indicate where the user was within the applications.

TASK FLOW
SKETCHES

I sketched out three different concepts based off my research, persona, and task flow. With these designs, I wanted to maintain the vision of keeping the application easy to use while on the move.

FINAL APP DESIGN

These were the final designs that I worked off of in After Effects to create the task flow and sizzle video.