New WunderMap
Old WunderMap only worked on large screens, but had many confusing options. Nested layers and layer behind gear icons.

Old WunderMap only worked on large screens, but had many confusing options. Nested layers and layer behind gear icons.

New Mapbox styles for WunderMap that promoted better visibility of data layers on top of the map. Three custom map styles for WunderMap: Light, Dark, and Terrain.

New Mapbox styles for WunderMap that promoted better visibility of data layers on top of the map. Three custom map styles for WunderMap: Light, Dark, and Terrain.

WunderMap on mobile, full screen and with settings menu open.

WunderMap on mobile, full screen and with settings menu open.

WunderMap on larger screen.

WunderMap on larger screen.

Wundermap Refresh

Roles: UX/UI Designer, Mapmaker, Art Director
Project Type: Collaborative
Live: WunderMap

Overview
WunderMap is our interactive mapping experience for Weather Underground, in the last year we have been refining the data and streamlining the back end. In addition the business was changing from Google Maps to Mapbox so I created new basemaps for our new data layers coming from the new repository, we also used this opportunity to refresh the UI.

Phase 1 - New Basemaps in Mapbox

Problem
For many years we used Google Maps for our basemaps, within that system we created many basemaps and interactive maps throughout our site, both mobile and big web, to show off weather data.

Development
In the past 6 months we have started a partnership with the growing Mapbox to create a new set of maps for all of Weather Underground. I worked with the Mapbox team to code and design new maps specifically to display weather data. Most importantly radar, satellite, and our weather station data had to shine on these maps. I made three types of basemaps, making sure that the maps got more detailed when zoomed in but showing the right amount of detail so that the user could use the geography on the map to orient themselves but not too much detail that it cluttered the data. The three basemaps created were a general road map with airport information, and a light and dark simpler version. These maps are used throughout the site most notably the homepage, city forecast page, severe page, full screen weather, and the new WunderMap.

Phase 2 - Wundermap UX/UI Refresh

Problem
With the new basemaps and data layers, WunderMap needed to be rebuilt, we used this opportunity to look at the pain points that users had been experiencing with the product. The largest issues were on load speeds, not working on mobile devices, and hidden layers.

Testing and Design
Many features within the WunderMap were hidden behind menus and gear icons without a reason where they were hidden. We worked to bring out the most used features in the best way and make layers such as the Model Maps more visible and in the forefront. We combined all the map settings under a single menu and had layer opacity options at the user's fingertips. Throughout the process we analyzed what was used most so that launching was in an agile fashion and that the framework is there and simple enough to build more layers into it.

We also created a mobile version of WunderMap since the mapping service would be able to load on cellular devices now. Instead of creating a responsive design that would stay the same from a large screen to a smaller screen, we created a layout specifically for mobile

Outcome
We now can serve interactive maps faster throughout the entire site, and have built a framework that is easily updated. We have continued to add new features as they are available. With this refresh WunderMap has less crashes and loads faster, which is beneficial for users on different connections, and mobile devices. Also with new Co-branding guidelines I helped lead, we also created an official WU Co-branded logo for WunderMap.