Prototypes & animations
Below you can see some of the prototypes and animations I created during my time at Pypestream. My go-to prototyping tool is Principle animator. I use it for creating simple screen to screen prototypes as well as more in-depth high fidelity prototypes. I can also animate on AfterEffects with enough time given.
ON ANY DEVICE.
I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you.
This prototype was built using Principle. The goal was to create an onboarding experience that would help users better understand the difference between Pypes and Streams, as well as help users get conversations started with businesses. We developed this onboarding process by performing a series of in-house usability test with company employees from different teams.
Web widget date picker (Mobile)
Built on Principle animator, this prototype was designed based off of an existing date and time picker API. I worked with a frontend dev to understand the capabilities of this API and determine what could and couldn't be changed about it. My Goal was to implement Pypestreams design language as much as possible so that when triggered this Date picker would not feel out of place.
Chat history card expansion
This animation was built quickly to explain my needs to developers further. I wanted chat history cards to expand while becoming the headers for the chat conversation below them.
Pype manager overview refresh
Due to backend technical debt, data on our CRM dashboard overview page could not be updated automatically. We needed to come up with a manual way for users to trigger a refresh in the data while letting them know how much time has passed since the last update.
Satisfaction survey emojis
This project came about after an in-house brainstorming session. We discovered that our existing customers were determining NPS scores with old out of date tactics. Asking users how they feel from 1 to 10 just made no sense in a world of emojis that expressed so much more emotion.
Web widget loading animation
This GIF animation was built using AfterEffects. The reason being I needed a higher resolution of my exported output. The graphic was a multi-purpose solution. Our avg loading time for our web widget was longer than desired, and we needed to design a loading animation that would lessen user stress when waiting for the widget to open. This graphic also acted as a way to promote Pyestreams brand.