I own 100% of the visual design and animation in this project
pHin mobile app reports water quality and asks customers to take action if needed. Most actions are instructing the customer to add a certain dosage of a certain chemical to their pool or hot tub water. But there are other types of actions as well like "Dip a test strip"
"Test Strip" action asks the customer to perform a very specific 4-step action. In our earlier versions of the app the instructions were given in a text heavy screen that was not very much successful. Customers tended to skip reading it and many submitted results were not accurate.
My task was to create clear illustrations to go along with the instruction text.
And finally in the latest version I animated each illustration (in AfterEffects and exported each as a json Lottie file) We have received positive feedback from customers about how easier they can follow the steps, and way more success rate in completing the action.