Foursquare Tip Voting

Creating a counter-balance to “Liking” a Tip (or Review) on Foursquare which gave people an opportunity to express negative, though important, sentiment.

Final tip cell designs (right) and your own tip view (left) on iOS

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

Background

Up until this point, the Foursquare app only had the ability to “like” a tip. If you disagreed with a tip, Foursquare did not allow you to share that reaction. For example, there could be a lot of “likes” for a burger-related tip, but when you ate the burger, you didn’t think it was as good.

The app needed a way for people to contribute when a “like” just wasn’t enough.

Tips are meant to be short snippets (think, a Tweet’s length). The existing tip cell layout was hard to quickly scan and since we were going to add more actions to a tip, I knew we needed to switch up the layout of a tip to make better sense of the tip hierarchy.

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.

A Foursquare tip, before tip voting was included

Explorations

I worked with our product team to try and nail down what the best verbiage would be for this action.

A few options considered for what verbiage made most sense

 

Once I helped figured that out, I started exploring many different layout ideas for how these two up/down actions could be unbiased in the UI.

I kept working to refine these directions.

Tip cell layout treatment explorations

Outcome

The final designs used the up/downvote actions, but kept the tip cell layout simple. I’m usually a big fan of labels on icons, but the repetitive nature of thes cells when scrolling, text ultimately was very heavy as your eye went down the page.

The tip cell before (left) and after (right) on iOS

 

Tips in the Foursquare app had a variety of different states. It was important that this design was flexible to fit into many of the different possibilities.

A few different states, accounting for different types of Foursquare tips

Someone else's tip (left) and your own tip (right) on iOS

Someone else's tip (left) and your own tip (right) on Android