Due to Adobe XD not allowing video or gifs to exported into the software currently I have had to use Adobe After Effects to show how certain aspects of the app would be able to animate. There were only certain elements of the app that needed to be animated including the route being walked and the drawing the route when adding to the system.
One of the good things about using Adobe XD is you can easily export selected art boards straight into after effects. It transports all images, type and paths that were created in XD and allows you to edit them in after effects. For these two animated art boards I decided to select the path that I had drawn in XD that highlights the walk route. Once they were selected then I added a trim paths to allow the end and start percentage to change making the line move as though it was being drawn or walked.
I will present these alongside the video screen recording of the app prototype to allow the user to understand how it would look in the final outcome.