How to Get to the B&H Superstore

While consulting for B&H Photo in 2016, I updated their Maps & Directions page. The old page suffered from an overwrought custom map, out of date public transit info, and vast, dense blocks of driving directions text. Additionally, the actual address was extremely difficult to find! I asked 5 colleagues, and only one of them could find the address in less than 30 seconds (spoiler: it’s prefilled in a text field at the top of the map). See it below:

Before

This is what the DIrections page looked like before I redesigned it in Spring 2016

My business stakeholders were store managers. I met with them to understand the main issues with the page and what improvements they’d like to see. Then I did a little guerilla UX, and went down to the store to interviewed shoppers as they were leaving. I asked about how they got to the store (almost everyone took the subway), if they were tourists or locals (it was 50/50) and if they had any issues getting here (very few).

After

This is the new Directions page I designed, based on shopper interviews, the latest MTA info, and a decade of NYC public transit experience.

I put a simplified google map and directions CTA front and center. Since public transit was the most common way shoppers arrived, I put those options in the left column. Big icons for each train line would help tourists who were new to the subway. For locals, I made sure each train line was followed by the stop information, so that it would read the way we naturally speak about the subway ie “Take the ACE to Penn Station”.

Driving directions went in the right column. Full directions were behind show/hide links not only to keep the page uncluttered, but also to gather analytics on which driving routes are the most popular. For the bus routes, I opted for unofficial iconography that would be clean and readable, as the only alternative seemed to be using the dot-matrix letters from the displays on the front of the bus.

You can see the site here.