Maluuba Material Speech Animation

Here's the new redesign of the Maluuba speech animation. This animation is shown when a user makes a voice query and the speech recognition output is shown. Similar to the home screen, we tried to keep a 'Material'-like aesthetic although our transitions and animations aren't yet inline with the Material design guidelines.

Unlike most animation you see on Dribbble, this GIF was made from an actual screen recording of an Android device so this is what the animation looks like in real time from real world microphone input. I used a Nexus 6.

Originally, I had a very smooth wave animation (with subtle easing) in my mockup but when I started working with the Android engineers we quickly realized that the volume level input given from most device microphones are not accurate (picking up background noise) nor consistent to achieve the same look. We worked closely to figure out ways to smooth the input while keeping the animation responsive to the subtleties in the users' speech. I'm pretty happy with the final product.

You have to really try it live to appreciate how it feels! Give it a spin in our app: https://play.google.com/store/apps/details?id=com.maluuba.android&hl=en