App Dissection

← App Dissection
Foursquare

Foursquare

Posted 5 years ago · 11 details

Foursquare is entering a new era. The long-time check-in service has undergone a radical redesign and reposition with its 8.0 release for iOS. No longer is Foursquare an app to check in at your favorite places and keep tabs on your friends – no, it’s now attempting to become the de facto recommendation engine for food and entertainment. The Verge has explained this repositioning quite clearly: The new app cuts through Foursquare’s massive corpus of data to answer one question: what if your food-finding app knew your favorite restaurants, but also your favorite foods?

Regardless of where you turn to find the best restaurants in your area, it’s no question that Foursquare is making a bold move into the arena dominated by the massively-popular Yelp. The 8.0 version of their iOS app takes this bold move quite seriously, bringing in a wonderfully simple and clear redesign.

The email newsletter

Get updates about new posts, new projects, or other meaningful updates to this site delivered to your inbox. Alternatively, you can follow me on Twitter.

Pull to refresh

The pull-to-refresh interaction has become a universally-known gesture for smartphone users. Being so universal provides a hidden challenge for app designers: how do we stand out? Foursquare has embodied a clear simplicity in this detail – a pulsating ring, honing in on your location.

I love how smooth this detail is – the way the ring fills and expands as you pull down, springing to life once released.

Following

In previous versions of Foursquare, users needed to request permission to follow someone else. The nature of checking in and broadcasting your location necessitated a higher level of privacy for its users. With Foursquare’s latest shift, the emphasis is no longer on check-ins, but on recommendations. For this reason, following someone else no longer requires permission and is a low-barrier action that Foursquare hopes people will find useful.

This detail is small, but worth noting: when following someone (or…something perhaps), the transition of the checkmark element is quite slick. It’s certainly not a deal breaker, but I wish that there was an equal level of polish whenever I stopped following someone, rather than having such an instant, static state change.

Adding tastes

Small and subtle – notice the way the tags bounce in place as they’re selected.

Likes

I’m a big fan of responsive interactions – when things behave as though they’re actually being touched. That’s wonderful. Foursquare is halfway there with their like button interaction. I love the way it springs to life when tapped. How could this be better? Go the full mile and put the same attention to detail when un-liking something.

Saving places

If a user saves a place in Foursquare, what happens? Show, don’t tell.

At least, that’s the strategy the designers at Foursquare have chosen. Saving a place triggers this playful animation, bouncing the bookmark towards my Profile tab, using motion to subtly guide me through the app.

Rating a place

Foursquare wants to know everything about the places it recommends. Crowdsourcing this data certainly makes their lives easier. I wanted to showcase this flow where users can fill in missing information about a specific restaurant – the view has a drastically different design and feel from the rest of the app. While I’m sure this was intentional, to a degree, it feels innocently out of place.

Done rating

After you’ve rated a place, Foursquare gently tries to guide you on your way back to the main app, or onwards to more ratings. The view here feels a bit static and rushed, not quite explaining why I should keep rating places or what those ratings even mean. I appreciate the detail here, but I’ll be anxious to see how Foursquare’s team develops and optimizes this flow over time.

Scrolling

This detail is so close to being right! When scrolling up on a place, the title and meta information slowly fade out to reveal a static title bar. The only thing that feels off here is the way the top and bottom black gradients overlap mid-way through the transition.

Changing accounts

This is probably one of the smoothest parts of the app, and someone clearly put a lot of time and attention into this view. When you’re logged out of the app (but the app recognizes a previous login), you have the option to continue or switch accounts. If you switch accounts, the view slides gracefully off the page. It’s a beautiful mixture of scaling, opacity and easing that make this feel wonderful to touch.

Logging in

When first logging in, I was happy to see the way a few elements bounced into place. The use of motion here guides a user’s eyes towards an intended action – in this case, picking a particular mood or desire (e.g. lunch). The rest of the app elements came into view quite suddenly, which feels jarring compared to the sliding list pictured here.

Foursquare's website

This might just be the best design detail of them all, on Foursquare’s website no less. Visitors are greeted with the older, familiar Foursquare branding. It quickly disappears behind a wall of blue tiles as we’re introduced to the new Foursquare. Slick.