Switch profile
Delete profile
Cancel bill payment

With the recent release of Material Design 1.0 and the principal that “motion provides meaning,” how do we insert meaningful micro interactions within the Android app? Faced with the daunting task of rebuilding our flagship app from the ground up, we wanted to ensure that motion was used purposefully to provide meaningful insight for our users.

As we tackled each feature, we asked ourselves when and where motion can be used to support user actions and move them forward. We (the two sole Android designers) evangelized the necessity and importance of building out animations. At the time, Google provided code for components, but did not include the code for animations. So we had to be diligent and consistent in our efforts.

Keeping in mind we had to account for bandwidth, tight timelines and product support, we chose our battles carefully. High volume flows and key user interactions would take precedence.

In our previous app iterations we were legally required to ask the user if they were sure they wanted to proceed with an initiated action. This was cumbersome and resulted in additional taps to complete a task but it was necessary to ensure the user hadn’t accidentally tapped an action. With 5x, the minimum viable product for acceptance was account login and paying a bill.

Starting with Bill Pay, we researched alternative gestures. From a legal stand point, dragging or sliding is considered a more definitive action and less likely to be a mistake. We were given legal approval to drop the “Are You Sure?” dialog if we used a “Drag to Submit” instead. After carefully reviewing Material Design guidelines and looking at other Android design applications we settled on the floating action button. We took it into research and the feedback was overwhelmingly positive.

In addition, we needed to provide a way for users to add and delete profiles and switch between profiles on their device. Aside from a toast message, we wanted to visually show that a profile was no longer saved. We used motion to further illustrate the action taken. This was then carried over into canceling a payment.

Initially users felt the drag gesture wasn’t “serious enough” for a bank but as we continued to role out features, users became more accustomed to the action. App store reviews settled in the 4-4.5 star range. Call centers did not report any issues in the submission process.

For accessibility, when TalkBack was enabled on the user’s device, the drag feature would become a double tap action to accommodate our users with disabilities.