Search Interaction for Navigation App

Made using Sketch & Framer.

This screen is a part of a case study I made, it's about a navigation app for traveling wizards: https://medium.com/@briandito/navigacio-an-app-for-traveling-wizards-9232800a3354

Like a common search bar, there would be suggestions. There are also two types of cards that shows attractions for muggles and attractions for wizards. To be honest, I haven’t thought about the differences between the two.

The card was made to slide from the top, as if it came from the search bar. And when you tap on a suggestion, it would have a nice animation that shows a change in the search bar. The idea is to give an impression of coherence, that the card is a part of the search function.