The "Explore Guides" button is the gateway to exploring all of the guides publishers have created in Maps. When we originally created this grid of highlighted publishers, they were actively participating in creating and updating guides.
As time progressed, some publishers stopped participating in guides and the grid became outdated. This highlighted our problem and helped us create our goal.
As the Product Designer, I was responsible for the visual design and asset delivery. I collaborated with cross functional partners to design and present multiple solutions before handing it off to Eng. over 5 weeks.
Early on, we learned that this redesign would be limited to an image swap and we defined our success by the button’s discoverability, visual engagement, and future proof design. This helped me iterate several solutions to update the button and invite users into the guides in a new way.
We started our exploration by removing the grid entirely, but we quickly moved on because this left the button feeling empty and uninviting. Next we looked at a more practical button treatment like the chevron which signified a drill in moment and felt more like a functional button. However this didn't reflect the excitement that lies behind guides, so we replaced the chevron with our current icon for guides. After more discussion we decided that this icons may not truly represent guides and we need to think more about what it represents.
These early iterations felt like the safest options, so for our next couple of iterations I wanted to explore more vibrant and fun options. For the next option I decided to keep the grid and swap out the publisher icon for the POI icons that users can find on the map. I designed this option because the bright and vibrant icons signaled a connection between popular categories and guides. Our final iteration came to us from one of the 3D artist who wanted to add some dimension to the button.
I collaborated with Product Managers, Design Managers, and Executive leadership through design reviews to come up with these three potential solutions. Through our conversation, we decided that the chevron was the best option because although it didn't have the color or the vibrancy it was extremely functional because of the drill-in experience.
Once we came to a decision as we delivered the asset over to engineering who uploaded it for us to review it on test builds. Through testing the button on different devices, we learned the chevron disappeared in disappeared in dark mode, so we sent engineering an updated asset for dark mode. Upon receiving the new asset, engineering let us know that this image swap is limited to one asset for both light and dark mode.
This was a shock, because we didn't consider dark mode in our explorations and now we needed a new asset that can exist in light and dark modes. Luckily, because we had many iterations it was easy to pivot to different option and test the comps in dark mode. After another round of async discussions we landed on – the POI icon grid.
