Image for post
Image for post

How we designed Foursquare Swarm 5.0

Revamping our lifelog app

Greg Dougherty
Aug 10, 2017 · 7 min read

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.

Image for post
Image for post
A few early sketch ideas
Image for post
Image for post
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.

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

Next up: Redesigning the home screen

Image for post
Image for post
The redesigned home screen
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Foursquare

News and stories from the team at Foursquare

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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