Solution 3
One Tap Booking - Case Study
Project Summary
In the one-tap booking flow, the user can tap on a pre-existing draft order (Screen 1) and find a driver immediately (Screen 3) without having to re-enter the pickup and drop-off addresses. Before finding a driver, the user briefly reviews the order (Screen 2).
This page remains on screen for a set duration and automatically transitions to the next screen once the timer expires.
Problem Statement
The flow that was live in the app was not designed by the motion team and had several issues:
-
The shimmer/shine effects on the components were visually unappealing (Screens 1 and 2).
-
An unnecessary fullscreen overlay loader appeared after Screen 2, before finding a driver. This delay was needed for an API call.
Solution 1
-
In versions 1 and 2, I have improved the shimmer/shine effects on the components in Screen 1 to enhance visual appeal.
-
To draw attention to the timer on Screen 2, I’ve added a bounce effect to the relevant section and explored alternative illustration and loading patterns.​
However, another issue emerged: even after the timer expires, users can still interact with elements on the screen, such as the back button, which cancels the one-tap order. Due to technical constraints, this interaction could not be disabled on the backend.
Solution 2
For the second solution, I implemented a fullscreen transition that elegantly shifts from the timer on Screen 2 to the location pin on Screen 3. This effect integrates UI element movements with Lottie animations to ensure a smooth and cohesive user experience.​
At this stage, another issue arose: the API call could take up to 10 seconds to process the booking.
In the final solution, I implemented a continuous looping transition that persists until the API call is completed. Markers were added within the Lottie animation to handle different scenarios: one for an immediate response and another for a delayed response, ensuring a smooth user experience regardless of how quickly the call is processed.
