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.
|2019||Whats Your Fare Questionnaire||Website|
|2019||Apple Virtual Card Launch||Campaign|
|2018||Virtual Card Hopster Animation||Video|
Whats your fare questionnare
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.
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.
Apple Virtual Card Launch
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.
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.
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
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
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