How Pixate Helps Me Design & Learn Faster

Apr 21, 2016 · 2 min read

When I was researching on a good prototyping tool that doesn’t require too much code, Pixate came into my research. Compared to other popular tools like InVision and AfterEffects, I think Pixate does a way much better job on the micro-interactions and animations, and it is a more light weight tool compared to AfterEffects.

There is definitely some learning curve on how to make the best use of Pixate for individual cases. But it is not too hard to start by looking at the helpful documentation and sample files. Also its support team and community are great.

From a personal experience, it works better for smaller chunk of a product. Due to the lack of a master timeline like AfterEffects, it requires some more mental calculation on timing for a more time-sensitive prototype, as well as thinking of how interactions trigger motions for a complex prototype. But overall I’m very happy with the tool and it has been facilitating me on how to translate a design into reality fast without engineering.

Here are some prototypes I created during my design process.

1. prototype app with side navigation

prototype for the app with side navigation
Image for post
Image for post
previous tab navigation VS current side navigation

Design challenge:

Change the app navigation from tabs to the side while keeping the functionality consistent

Learned from prototype:

  • side navigation provides much more flexibility in terms of scalability
  • camera view as the landing streamlines the product experience

2. Chat experience with progress bar

chat UI exploration on timer and chat status updates

Design challenge:

  • Explore the chat UI options with a subtle progress bar
  • set better expectations for students when waiting for experts’ messages in the chat
  • reduce the timer stress

Learned from prototype:

  • let students know what is coming the next help with the perception of speed
  • uncertainty still exists without actual waiting time estimation
  • a moving timer might cause more stress

3. Product new user flow on-boarding introduction video

new user flow education video

Design Challenge:

Add an educational video during the new user on-boarding to help users understand the product, and improve the quality of first asked question

Learned from prototype:

  • introduction for products doesn’t have to be instructional to show all the steps to be comprehensive
  • storyboard & motion & micro-interaction matter a lot

Since prototyping more in the design process, I understand the story-based flow better and iterate faster. I also experiment more and more of the small details on motion, transitions and micro-interactions. Pixate has been great for those use cases and it will continue to be an important part of my workflow.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store