ContactInfoA_v02@2x.png
 
black banner_v01.jpg
 
 
 
 
scrolldown@1x.gif
 
 
 
 
white banner_v01.jpg
 
 

Project Overview

_

Pyrus approached Launchsquad and Devon Stern to help produce a short piece on the primary Pyrus service. Pyrus was interested in branching out into new markets and wanted a piece which would introduce their platform in an exciting new way. 

I was tasked with developing animations and scene components which built the structure of the world while focusing on brand messaging and continuity.

 

Styleframe for marching scene

 Marching scene confetti.

Marching scene confetti.

 Paper airplane

Paper airplane

 Crowd asset

Crowd asset

 
 

 
 

Production Stills

_

The process was free-flowing and collaborative, empowering design to explore various ways of storytelling with micro-animations that guided the audience's attention. I started with the color pallet which was derived from the Pyrus brand then started asking questions like, "What elements will make this scene feel more dire?" and "How do the character's perceive the solution brought on by the Pyrus product?". Questions like these led to the development of additional assets and features which helped to elevate each scene.

 
 

Pyrus explainer storyboards

 
 
 Tuba character walk cycle

Tuba character walk cycle

  Smart watch

Smart watch

 Pyrus "P"

Pyrus "P"

 
 

 
 

Animation

_

Client - Pyrus

Motion Design & Animation - Devon Stern

Direction - LaunchSquad

Produced by LaunchSquad for Pyrus. Copyright 2015

 
 
MotivBannerTitleB_v01@2x.png
white banner_v01.jpg
 
 
Motiv_TitleImage.png

Project Overview

_

Motiv is a wearable technology brand focused on providing evidence-based health tracking in an unobtrusive form-factor.  Their IP they wanted to highlight, is Active Minutes. According to Motiv, they occur when the users exert themselves over a certain threshold of time under specific types of exercise. This feature is important for Motiv because it supports the notion of evidence-based tracking, but the details can get complicated. 

Because animation can aid in the presentation and dissemination of complex topics, they approached me to develop a playful and encouraging illustrative animation, elevating the benefits of meaningful activity tracking, to be used in their support apps.

 
 

Process

_

Pre-production began with the look and feel. Motiv had supplied a few preliminary passes at the script and character design, so we had a solid foundation to start with. They wanted their character androgynous, simple, aligned to their iconography, and accompanied by an environment which referenced the app's rich color palette.  In an attempt to push the design; we brainstormed the various related themes and keywords, created character sketches, and broke apart the script to see where we might find unexpected inspiration. We found the "iconman" concept best aligned to our goals so moved forward into storyboards.

 
 
 Theme Brainstorm

Theme Brainstorm

 Character Concepts

Character Concepts

 

Because there was going to be a lot of character animation, we decided to dive into the next phase early. This meant combining thumbnails sketches, color scripts, storyboards, and styleframes so we could move into production sooner. The styleframes below were the round one result or that process.

 

When animating characters for piece with no cuts, I like to break up each action into seperate parts. This character was broken into four parts: the walk/run, the cycling, the yoga hold, and the celebration. This helps to focus my efforts but is also less overwhelming. Each part is then plotted with key-frames, which are used to illustrate speed, pose, and weight, in addition to laying the foundation for the rough animation.

 Character Run Cycle - Keyframes

Character Run Cycle - Keyframes

 Character Run Cycle - Ease, Tweens, Revisions

Character Run Cycle - Ease, Tweens, Revisions

 All

All

 
 

The animatic launched us into the final phase. Typically this rough animation is made up of stills from the style frames or storyboards and is used to fine tune the timing and make any additional visual design adjustments. Finer adjustments to character movement, are also made, making the character feel more alive and fluid.

 
 
 

 

Illustrative Animation

_

 

Challenges

  • Communicating a complicated calculation system that is simple and approachable.
  • Considering how the video will appear across multiple platforms.
  • Establishing iterative and flexible color system
  • Single flow, no cuts
  • Seamless looping animation

 

Discoveries

  • Numerous constraints when using character rigs with Lottie
  • Better to use Lottie for shorter animations
  • Ray dynamic color plugin essential for iterative color systems

 

Client - Motiv Inc.

Motion Design & Animation - Devon Stern

 
 
 
 
MDLBannerTitleB_v01@2x.png
white banner_v01.jpg
 
 
MDL_DS_header_v01.jpg

Project Overview

_

The popular bay area brand approached me with the opportunity to help them discover what the PayPal platform would look like in motion. The goal was to help the company understand the benefits of motion as it relates to brand and digital experiences. This was accomplished by creating a Motion Design System which illustrated animation related to a pilot portion of the company's platform.

Although I only worked on a small section within the larger experience, the guidelines I helped to establish was built on thorough research, iteration and collaboration.

 
 

Process

_

The documentation was built by working closely with the UI and UX designers most familiar with the platform. Through this collaboration, we identified key aspects of the brand within the interfaces and assigned relevant characteristics which would help to design a coherent animation system. We then discovered the largest potential pain-point for the teams. If they had no context of how motion could benefit the entire experience, how could anyone hope to extend the system? So we also documented benefits which related to the overall platform.

 
 
 

The benefits of motion creates a common foundation.

Characteristics communicate the brand through movement.

 
 
 
 

Similar to a Design Language, this documentation needed to cover various specifications, while appearing in a relatable form for both development and designers not familiar with animation. Once we had established the system, we prototyped the animations with existing visuals assets to ensure we had created a robust foundation. 


Motion Design System

_

Client - PayPal

Motion Design & Animation - Devon Stern

 
 
white banner_v01.jpg
 
 

Project Overview

_

Chapter SF is a bay area creative agency specializing in strategy and digital experiences. They were started by a few people from AKQA and NIKE who each bring a unique approach to the digital design process. 

Initially, they approached me to only work on their demo reel but we took the opportunity to explore what else we could do. 

The goal with these vignettes was to build something which spoke to Chapter's creative problem solving and their methodical, yet adventurous approach to design. Later, I used these vignettes to support their demo reel, interspearsing them as needed.

 
 
 

 
 

Production Stills

_

Because we had to stay within the original timeline and budget for the reel, I wanted to focus on the visual representation of their process rather than a purely narrative piece. I started this by documenting my thoughts about their studio environment, and the various things which reminded me of their process. To me, their process was very scientific, methodical, precise, and mathematical. This lead me to think of circuitry and scientific equipment. But there was also an aspect of discovery, a more organic side, and I wanted to champion this as well. For that, I went to a more abstract idea. So I thought about a place that combined the feeling of something un-touched with the visual sophistication of scientific instruments.

 
 

Moodboard

Early exploration

 
 

 
 

Animation

_

Client - Chapter SF

Motion Design & Animation - Devon Stern

 
 
rightarrow@1x.gif
leftarrow@1x.gif
 
 
 
 

Contact

_

Motion design and direction. Available for freelance and contract work. Contact me for availability, day-rates, collaborations or if just want to say hello!

Devon Stern

contact@devonstern.com

Phone: +1 808 937-2789

 
Name *
Name
 
 
black banner_v01.jpg