Portland, Oregon
 

Role:

Web Designer/Developer (Current)

 

Day to day

Hand model, video production, motion graphics, 2D animation, UI Design

 
 

Tap every time

 

My first year working with TriMet, we launched our separate fare system Hop Fastpass. During this project I worked heavily on animating the hopster trio, building micro-websites for marketing campaigns, along with providing design references for developers to implement.

YearProjectType
2019Whats Your Fare QuestionnaireWebsite
2019Apple Virtual Card LaunchCampaign
2018Virtual Card Hopster AnimationVideo
2017Hopster AnimationsVideo
2017Website LaunchWebsite
 

Whats your fare questionnare

August 2019

  

With the all the different payment options riders have, which one fits them the best? We came up with a questionnare workflow that helps every kind of rider.

 

The Workflow

 

Collaborating with our senior web designer and our content strategist, we found a relatively short path to figuring out what kind of payment option fits any kind of rider. My main responsibility was to build the experience. I used a Gastbyjs which is a wonderful framework built with Reactjs.

Take the questionnare

Apple Virtual Card Launch

July 2019

 
 

Collaborated directly with Apple’s marketing team on producing videos that demonstrated how to install and use Hop’s virtual hop card on iOS. The main roles I took on this project: Hand model talent for print and video content, and collaborated with our videographer to produce how-to videos.

Watch the how-to videos (00:09 Yours truly!)

Learn more about it

 

Virtual Hopster Card Animation

July 2018

 Virtual Hopster Card Animation 

This project I was asked to create motion graphics in the space of a Google Pay payment option. I don't think it had been tried before. Working with developers, I we tried different formats and a simple gif worked just fine. When the card is selected each hopster comes out from the left animating in, waving, then animating out of the frame.

Results:

 

The animation turned out great! It is subtle, cute, and retrospectively we realized the motion was a great way to indicate a valid fare.

Download Hop for Android

Hopster Animations

July 2017

 hopster animations

Animation Design:

 

Adding motion to these characters meant adding rules to their behavior. During the early stages I got to ask questions never asked yet such as, "Do Hopsters walk?", "Do hopsters talk?", "Can I change their position to be side, profile or behind?", "Can I animate them in 3D?". Setting these design constraints were important for the types of videos I eventually was instructed to create.

 

During the launch I created two commercials. One six second ad that played on Youtube videos and a 30 second ad that was aired on television at the time. From the launch I've created one-off animations for social ad campaigns.

View the video playlist

Website Launch

August 2017

 
 

I contributed public portion of the website by providing static webpage design references and motion graphic deliverables to developers to implement. This is on going.

 Go to myhopcard.com
 Hop Motion