Yahoo! Map Tile & UI Revamp
Stakeholders
  • 1 BU head
  • 1 Project Manager
  • 1 Producer
  • UED: 1 Designer (Ian Hung) + 1 Supervisor
  • Engineering: 1 Web developer + 1 back-end engineers
Project Brief
Due to contract issue with map content provider, Yahoo! Map Team will migrate old platform to new one, and plan to redefine map style for improving Map UI usability, growth of page views and unique users.


Studies
  • Reference site collect
  • Paper Map collect
  • Map element analysis
Map Level Definition
Different zoom level make different style, map team need to decide what map elements (Like road, mountain and river, traffic signs, buildings…Etc) should appear in each map levels. Through continuous meetings and discussion, we got rough elements list for each levels, then visual designer can start to define CSS and drawing work.
Icons Drawing
According every levels definition, I designed many kinds of icon set to fit map levels style and arrange the priority between map elements and icons. See more about icon drawing.
Map UI Design
I reviewed map’s old platform UI Accessibility and compared several on-line map provider's user interface, then I got some ideas from studying these competitor’s site. I designed easy to use map navigation bar. Our User Experience Researcher hold a research session through interview and field study method, I got good feedback from our map users.

Same Data Make Different Image
Different Zoom Level Make Different Style (Example Google)
Visual Designer define each levels' definition.
Icons drawing
Reference sites collection
Level definition Before and After.
Concept of visual designer how to define every level.
Map UI design.
Compare and study many kinds design of navigation bar.