When I was hired as by Bass Pro Shops as a web developer in 2010, one of my first assignments (before the size guides redesign) was to redesign the store map or the store locator. This map showed current Bass Pro Shops stores around the United States and Canada with basic contact information and a link to their respective store pages with much more information, as well as showing the locations where future stores would be located. The old store map was dated and hadn’t been updated with the website redesign in 2009, and was an entirely manual process to update the map information every time something changed. The needs were deceptively simple: make the new map larger to fit our new website format (before responsive design kids!), update the design to match the new branding, and integrate it into our homegrown backend CMS for easier updating.

This was before I began an interest in user experience, and our team’s resources didn’t really factor in prototypes or wireframes, just high fidelity mockups iterated over and over again. Consequently, I didn’t consider user flow or mobile accessibility, but rather just a visual and backend redesign. Yes, I know, that’s terrible. Welcome to the real world developers! At this point, our brand’s visual style was more skeuomorph (designing something to look like a real object) with a throwback to “early 20th century rustic” so I used actual map textures and a natural, neutral color scheme (aka “more like leaves and dirt”).

I needed a way to show visually our store coverage over the United States and Canada while also making it easy for users to select the store they needed more information about. At the time, I was developing in a vacuum and not working directly with the backend developer who was in charge of the store information database and integrating the new design into the current CMS; consequently I made some decisions that weren’t the best from a performance standpoint, or couldn’t be recreated in ColdFusion (which powered our CMS) and the backend developer ended up throwing away a good chunk of my code for efficiency’s sake and because it was irrelevant. (Side note: developing in a vacuum is a horrible idea, and should never be done by anyone.)

Looking at many different store locaters at the time revealed that stars on a map were the norm. Remember this was 2010, and Google Maps wasn’t widely supported on Apple devices, especially through a web interface. Because I was implementing support for iOS devices, I moved away from a Flash powered solution and used a stock vector graphic and Javascript for the star interaction. This design is what was live on the Bass Pro Shops website from late 2010 until I left in 2015.

2010-store-map

In 2014, I was tasked with updating the design of the store map again. This time, I was investigating options to use the Google Maps API as well as just updating the design and use the jQuery library for performance. Our first iteration was a version with the vector map. I removed all the background textures and moved the store information below the map instead of to the side to maximize the map area. I included the icon set showing the features available at each store after selection, as a summary of the information on the store page itself (redesigning the store pages wasn’t included in this project, and the icons were created for the store pages by another team member).

After getting feedback that the design needed to include an image of the flagship store in Springfield, Missouri, I made a second vector map version with only that change and a version with more images from Bass Pro Shops stores.

Management really liked the version with multiple lifestyles, so they requested a mockup of what it would look like with a Google Maps implementation. I also played around with the placement of the store information.

Also posted on Behance.