Improving clarity to Foursquare’s place ratings by providing more transparency into what actually goes into a detailed rating.
We’ve heard time and time again in user research that people really liked Foursquare’s one through ten ratings a lot, but Foursquare is perceived as having a non-transparent place rating system. We set out to create a way to make place ratings easier to understand by creating a breakdown of what comprises the rating system.
Place ratings are opaque. For the average person, it can be hard to calibrate what an 8.5 means. Ratings on Foursquare aren’t solely comprised of reviews, so the team needed to reveal a bit of the “magic” behind what a specific rating entails. We had to choose some of the more meaningful signals that were also easy to articulate back to people, while also not revealing exactly how they were calculated.
Foursquare is a local search and discovery app which provides personalized recommendations of places to go to near a your current location.
After sketching out a few ideas. I started putting together a bunch of different ideas that we could then get user perspectives on. We did research on these conepts.
After user research, we knew we were headed in the right direction, so I continued to iterate on a few design directions I felt strongly about.
I felt keeping the different color spectrum in the design was compelling because it matched the actual color block numbers that are seen throughout the app.
The solution I landed on allowed for each rating type to feel a bit unique. I incorporated a simple animation that slid the scale from right to left.
I worked with a copywriter to make the copy feel impactful and descriptive, which was to remove some of the mystery around the rating, but without giving away too much of the “special sauce” that’s unique to Foursquare.