Foursquare Place Ratings

Improving clarity to Foursquare’s place ratings by providing more transparency into what actually goes into a detailed rating.

Final Foursquare place rating detail screen on iOS (left) and Android (right)

  • Role
    UX Design, UI Design, Prototyping
  • Platforms
    iOS and Android
  • Shipped
    September 2016

Background

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.

What is the Foursquare app?

Foursquare is a local search and discovery app which provides personalized recommendations of places to go to near a your current location.

Download it on iOS and Android.

The only insight given to a place’s rating, before this project

Explorations

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.

Design explorations around ratings

 

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.

Continued design explorations around ratings

Outcome

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.

Final Foursquare place rating detail screen on iOS (left) and Android (right)

Animating the rating card, sliding scale, and graphs

A few different states the rating detail can have