Boston Consulting Group (BCG) Office Locator
Web page redesign to help site visitors find information about BCG’s 100+ city locations and offices
Role: UX Coordinator
January - February 2022
The Problem
BCG owns offices in over 100 cities across 50 countries. Currently those offices are listed on one massive page that is difficult to sort through and organize, as seen in the following image:
How can we organize hundreds of BCG offices and help site visitors find desired, relevant information on each?
RESEARCH
Identifying patterns and user expectations
By looking at other Contact Us and Office Locations pages for similar companies with global offices, I familiarized myself with patterns that users might expect, paying attention to the following:
▫ Where in the navigation are these pages located?
▫ How are different cities displayed?
▫ What information is present for each city and/or office?
▫ How are multiple offices in one location handled?
▫ How are different cities displayed?
▫ What information is present for each city and/or office?
▫ How are multiple offices in one location handled?
Trends from other sites with map and scrollable items
Similarly, I looked at patterns across different sites and created a wireframe that captured the main elements and expected places of components.
DESIGN
Initial mockup and exploration of office items
With the wireframe in mind, I created a mockup using BCG’s existing branding and design components. I also explored various layouts for the card elements within the office list, showing how variants might look with and without imagery and descriptions, among other elements.
After discussing with the digital marketing team, we chose to display only the office name and address, without paragraph descriptions or phone numbers, as these details are considered secondary. Users can find this information by clicking an “Explore More” button on each card, leading to a separate office page.
Iterating on the filter design
In the initial mockup, I used an existing tag component from the BCG design system. However, this component inaccurately suggests that multiple cities can be selected. So, I explored two new filter structures: dropdowns and tabs:
We decided tabs best fit our use case. The tab structure aligns with other BCG site pages where only one option is allowed at a time, and switching tabs changes the content on the page.
Designing for mobile
I also created designs for the mobile experience, where limited screen width meant stacking card items and maps vertically instead of side by side. To save space, we chose to replace the tab filters with a a dropdown selection, which is consistent with other BCG experiences on mobile.
