Vibram Global Locations
The current map of Vibram locations is displayed on the company website, but the map suffers from some shortcomings. Notably, the indicated locations are not accurate and the text is somewhat difficult to read. These issues may lead to decreased information transfer, confusion, or frustration.
In an attempt to provide users with an improved tool, two proposed map variants are presented here. Each map option offers accurate location data and a higher degree of legibility through the use of vector graphics instead of raster graphics. Additionally, each map presents users with an interactive tool, allowing for independent exploration and hopefully higher engagement.
Each of the interactive maps was created using javascript libraries. One map relies on D3 and the other on Leaflet.
Current Version
- - inaccurate locations
- - incomplete geography
- - low-res raster graphics
- - low legibility
- - small font size
- - low engagement
- - inaccurate "Vibram Yellow"
- - difficult updates
- + consistent display
- + branding through color
Option: D3
- + accurate locations
- + complete geography
- + high-res vector graphics
- + high legibility
- + larger font size
- + moderate engagement
- + high-legibility tooltips
- + no external resources
- + branding through color & icons
- + accurate "Vibram Yellow"
- + on-brand "Verdana" font
- + custom colors for land
- + easy updates through data file
- + responsive carrarmato icons
- - no zoom & pan
Option: Leaflet
- + accurate locations
- + complete geography
- + high-res vector graphics
- + high legibility
- + larger font size
- + moderate engagement
- + zoom & pan
- + dark & light map options
- + branding through color & icons
- + accurate "Vibram Yellow"
- + easy updates through data file
- - less vivid than other options
- - requires click for tooltips
- - cannot edit land colors
- - map tiles from external source
- - map tile credits visible
Credits: Vibram, D3, Leaflet, OpenStreetMap, CartoDB, Michah Stubbs, Kaggle