Carv Activity Overview

Prototyping a realistic map UI is HARD. While my go to prototyping tools are super powerful in creating hi fidelity mobile prototypes, they fall short when it comes to dynamic map interactions.

Here’s a prototype I created for the Carv activity overview screen. I was able to communicate a lot of the specific micro interactions/animations here eg. animating the bottom panel view up when the page transitions (this helps communicate to the user that this view is moveable), navigating between split view / list view and so on.

However, in split view (map on top) when you scroll the list - the map should reposition to show each individual activity breakdown, zooming in and out and repositioning as necessary. Unfortunately I wasn’t able to build this in my tool of choice. Luckily I was working with an awesome developer who knew exactly how it should work 👊

Designer developer collaboration is key 🔑

Proto built in Principle.