Visual-First Placesheet
“What’s the vibe of this restaurant, and do they have patio seating?”
Sometimes you just know it when you see it, but Google local search results were far more text-heavy than visual, making it hard for users to get a sense for what a place would be like without taking time to dig into details.
I redesigned the image carousel on Google’s Placesheet, allowing users to see more visual information with less effort so they can decide if a place matches their needs more quickly.
MY ROLE
Design lead
As the sole UX Designer supporting this program, I was responsible for everything from getting leadership signoff on a visual-first strategy that I co-created with my PM partner, to the final pixel perfect specifications delivered to my engineering team. From the onset, I gathered feedback on my designs from peers via weekly syncs, from leadership via periodic review meetings, and from users via user research and a/b testing. The outcome was an experience with abnormally high user satisfaction and a sharp increase in on-page interactions.
Visual-First Strategy
Users crave visual density
The next generation of internet users consumes content much faster, and, while Google has great photos and videos of local places, we only showed one at a time, frustrating users and doing a disservice to places that can’t be summed up in a single image.
Before the redesign, users formed a first impression of a place based on a single image. You can see the Burke Museum offers far more than what’s shown on the left.
In close collaboration with my PM, we proposed an experience that would allow users to get a sense for a place faster, speeding up their evaluation process. Once we got leadership approval, I got to work drafting early concepts.
Early Concepts
Dense but not “spam-y”
In an effort to learn quickly, we set out to a/b test a redesigned version of the carousel to understand how well denser visuals support users’ workflow. We considered improvements beyond the carousel but ruled them out for V1 since we wouldn’t be able to isolate users’ sentiments.
As soon as I started ideating, two things became clear: 1) too much density comes across as spam-y, and 2) cropping portrait images to fit landscape “slots” (or visa versa) makes for a broken experience—it also limits the visual information users get from images. The ideal solution would preserve image orientation and offer enough breathing room to feel curated and purposeful.
To avoid cropping issues and overcrowding, as shown here, I had to account for image orientation and limit the number of images in view at once.
Getting buy-in
When the hard thing is the right thing
If we were going to preserve image orientation, it would take a lot of engineering logic (and time) to display the carousel in an elegant way. I was able to get PM & eng buy-in for the extra effort by showing examples where cropping is already failing users in the live experience (like the MLK Memorial page shown here). I then worked with my eng partner to understand all possible use cases so I could design a layout that solves for every scenario (for example, if there are four or fewer images, all images are portrait, or the last image is landscape).
We would need to break the larger set of images into blocks of five, and designate a layout for each combination of orientations. I created a table to make it easy for my engineering implementation. With the project team aligned on the ideal solution, my PM and I were able to get leadership approval to move forward relatively quickly.
Remote testing
Early user feedback
I partnered with a UX Researcher on a rapid research study that served as a gut check for the general concept. The researcher collected feedback on a prototype I created, as well as the production experience, in eight remote, moderated testing sessions.
(Later we would also run aesthetics testing on how showing a variety of content types in the mosaic carousel impacts users’ experience).
Testing stimuli included the production experience as well as the proposed mosaic carousel.
Participants overwhelmingly favored the test variation over the production experience, describing it as “more organized, informative, and thus efficient for decision-making.” This gave us the confidence to move forward towards a live a/b test, but first we would need leadership approval, which required pixel perfection.
getting Leadership approval
Working up to a/b testing
If the a/b test was a success, we would need to be prepared to turn on the experience for all users quickly, thus had to refine each detail as if we were about to launch. Major design considerations like how users would view more photos, how users add photos, and how the height of the carousel scales on different screen sizes, as well as small details like the corner radius and padding for each image, and how images are ranked within each image block, had to be throughly documented. I also worked with my engineering partner to create a demo so leadership could see how the experience would render for real world places that had lots of images or only a few.
Slide from leadership review deck.
Sampling of UI specifications for how carousel images are displayed, and for the “View all” and “Add photo” button that appears at the end of the carousel.
A/B Test Iterations & Launch
In the wild!
Initial a/b test results were positive, particularly for verticals that were inheirently more visual verticals like food and leisure. We ran a customer satisfaction survey in parallel with the initial a/b test and found that users preferred the redesign over control the vast majority of the time. But we were also seeing a dip in interactions with content lower down the page. A little digging revealed that some actions, like reserving a table, were getting cut off on smaller screens. Three rounds of a/b testing various carousel heights later, we had a winner. The redesigned experience was launched shortly after.
Outcomes
Increased engagement
The redesigned experience is now live and receives billions of weekly page views (search for “tacos near me” and select one of the place results). Users swipe the carousel and tap on photos more that the previous version, and are more likely to take action on the page. This experience also lays the foundation for layering in other content types among carousel images in the future.
