Foursquare
Published in

Foursquare

How we designed Foursquare Swarm 5.0

Revamping our lifelog app

Getting started

Our first priority was simplification. We knew that Swarm had a lot of the right pieces, but they may not have been organized in the most intuitive way. The plan was to make some changes, and then test them with real consumers in real time — and learn and build on this feedback.

A few early sketch ideas
The final app chrome

Updating our internal style guide

Swarm has always had a great visual design foundation and we didn’t want to lose that when thinking about 5.0 and beyond.

Typography, colors and Sketch symbols in our internal style guide
Icons in our internal style guide

Next up: Redesigning the home screen

The redesigned home screen
Home page preview card and map

Updating Swarm’s two dynamic feeds

Once we decided to simplify Swarm’s visual language, we decided to make updating the existing dynamic feeds in Swarm our next priority. Since we were elevating check-in history to the home page of the app (instead of it being a subview on your own profile), check-in feed cells needed to closely match what your friends’ check-in cells looked like. Meaning, the home screen (Timeline tab) should feel very similar to the Friends tab since both highlight check-ins. This was difficult for a few reasons.

Check-in feed cell comparisons from the Timeline and Friends tabs
  1. These cells also had to clearly articulate that you can confirm or deny whether or not you’ve been to a place. To account for this, we created grey (unconfirmed) visits that are displayed on the timeline. These stand out on purpose, so you can quickly confirm or deny you were at that specific place — and then get back to exploring the world.
  2. Also, you don’t want to see your own avatar repeated multiple times on the Timeline tab, so we needed to figure out how to make the Timeline tab feel similar in weight to the Social Feed tab. We used a category icon inside a circle on your Timeline tab, which helped with consistency between tabs.

Redesigning the profile

One phrase that was said quite often, was that a person’s profile should capture the lifelog from a 10,000-foot view.

A few different states a profile could be in

Two key design tips

Big releases don’t happen without a couple big takeaways. Here are mine:

  1. Share early, share often, and sort through the clutter. I tell myself this going into every project and/or feature that I work on (though I’m not always great at it). There are a lot of people and teams that want to be included in early design directions, but it’s not always feedback that’s actionable. Sometimes it’s hard to cut through some of that to get a clear and meaningful opinion. It’s always good to remember that just as it’s important to share, it’s your job as a designer to take in all the feedback and use it to make informed decisions.

Lastly

Looking back on all the planning, prototyping, researching, designing, and building — launching Swarm 5.0 has been a huge feat. The engineering team rewrote many core views in Swarm and almost every screen was changed in some way. 20+ people were dedicated to working on the Swarm team over the past eight months, including Sam Brown and Jack Osborne specifically, who helped out on design work.

--

--

News and stories from the team at Foursquare

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store