Exploring Motion Design

Add motion to Odyssey hiking app to help describe functionality, intention, and to give users feedback.

 

Context

Solo Student Project

Date

2016

Role

User Experience Design

Visual Design

 
 
 

Planning

I created Odyssey, an interactive trail finding app in a previous rapid prototyping focused project. 

During the user research phase of the initial project I found that when hikers are looking to plan trips, they often have to use multiple resources that are often conflicting, out of date and uninformative. As a result, I created Odyssey, a trail finding app that allows hikers to quickly search for trails in their area, tailored to their needs, based on features they would like to experience and includes crowdsourcing to add and confirm current trail information.

At the conclusion of the project I developed a list of some next steps I was interested in pursuing in the future. Some of these were:

  • ability to create a profile + save explore settings

  • favorite/save trails

  • built-in hike timer linked with GPS, so the app knows where the hiker has finished trail and an alert can be sent to remind the user to give trail feedback 

 

Home

Explore

Results

 

Main Trail

Rate

 

Motion Design Research

I set out to discover more about what makes good motion design. The most impactful information I came across, was Google Design’s Material Motion guidelines, and the article Jedi Principles of UI Animation on Medium by Kit Oliynyk.

From my research I concluded that good motion provides:

  • guided focus between views

  • hierarchical and spacial relationships between elements

  • visual feedback and preparation for next steps

  • character, humanity and fun 

​

Motion Design Inspiration

I started looking for some inspiration that embodied these motion design principles. Dribbble and Up Labs are a couple sites where I found good examples of motion design. 

Motion Inspiration - Giving the User Feedback

Motion Inspiration - Guiding Focus + Fun

Motion Design - New Tool

As part of this 2 week design sprint, I needed to learn a new tool, in order to animate the updated Odyssey UI. I found numerous articles comparing the different features of current popular UI animation software. I decided to use the software Principle, because the interface is similar to Sketch, Sketch files can be imported, there are multiple tutorials and learning resources on the internet, and there is an active community online. 

Sketching + Ideation

Based on my research on motion design principles, I began sketching out some ideas for Odyssey that would help describe functionality, intention and to give users feedback. A few of the functions I explored animating were:

  • deleting a favorite trail

  • viewing a feature drop down menu

  • searching for a trail

  • favoriting a trail

  • choosing an trail from a list.

Prototyping + Testing 

I decided to keep the UI schematic in order to completely focus on the motion design. I felt that images, and text may distract from the intentions of the motion implemented, therefore withheld them.

In testing the first iteration of my animated prototype, I found: 

  • the search icon on bottom navigation confused some users

  • the trail photos on the trail main page appeared to be one photo to some users

  • some users through there was too much spring in some animations

  • page transition seemed jarring to users 

As a result, I made the following changes to the prototype:

  • changed search icon in bottom navigation to compass icon

  • clarified trail photo graphics

  • toned down spring animations

  • smoothed out page transitions

Final Prototype