What I did
- Design:
Sketch, Photoshop - Interaction:
Framer.js, Mapbox Studio, Mapbox GL - Animation:
CSS, SVG Animation
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
- Calculate all possible routes between the user’s starting point and primary destination.
- Suggest all attractions along those routes.
- select one or more of the suggested attractions.
- 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
Results
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
- Animation might cost some delays in perceiving information
- 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
- Add the function to pre-calculate total travel times
- Source and display attraction’s basic information
- Differentiate types of activities and places
- Add the function to filter search based on time of day
- Justify Iconography