Map animation

Lead Me There

Project Goals

As a geographer and UX designer, I am devoted to creating interactive maps that not only satisfy users' needs, but also of profound aesthetic value. This assignment gives me a chance to present my understanding of information hierarchy, dynamic interactive components, and most importantly, how users process information in a specific setting.

Design Problem


Most of Key West visitors tend to cluster themselves around Duval Street and Mallory Square, while there are many more places of interest and amazing activities in Key West outside those areas.

Target User


For this application, the target users will be tourists in Key West, FL who already had the destinations in mind, but would like to explore the areas around their destinations.

Design Requirement

Map should make suggestions and enable the user to discover new attractions that are close to and locate in the same direction of their point of origin and primary destination.

Design Constraint


Possible Solution

A map-based that helps users make the most of their trip by recommending new attractions near their current locations and primary destinations.
Users can then select one or more of the recommended peripheral attractions, and the map will generate the most efficient route from their current location, through the selected item(s) and ending at the primary destination.

Application Core Activities

  1. Calculate all possible routes between the user’s starting point and primary destination.

  2. Suggest all attractions along those routes.

  3. select one or more of the suggested attractions.

  4. Regenerate the most efficient route through all selected attractions and primary destination.

Design Process


Design Information / Activities Flow


Design Base Map


Design Map Features - Marker Colors

color palette credit: Tobias's Color Calm


Design Map Animation



This map application helps users explore and do more in the city without interrupting or taking away from their existing itinerary. It can help reduce pain points from switching back and forth between Spatial Search Engine and Map Application So, users can focus on having the best travel experience

Trade Off & Risk

  1. Animation might cost some delays in perceiving 
  2. The chosen activities or places might not appear to 
 be the same as the information that shown on the map 
 ( all information is gathering from the internet) — 
 Yelp integration might help showing open-sourced 
 ratings and reviews on attractions to help the user 
 make a more informed choice.

Future Work

  1. Add the function to pre-calculate total travel times

  2. Source and display attraction’s basic information

  3. Differentiate types of activities and places 

  4. Add the function to filter search based on time of day

  5. Justify Iconography