Swarm Home Screen Redesign

Redesigning Swarm’s information architecture and visual style to refocus the app around a timeline of your own place visits.

Swarm's redesigned Home Screen on iOS (left) and Android (right)

  • Role
    UX Design, UI Design, Prototyping
  • Platforms
    iOS and Android
  • Shipped
    August 2017

Background

Over time, the home screen for Foursquare's Swarm didn’t really tell the story our team wanted anymore, so this (v5.0) update, which I was the primary designer, reflected a new, personalized experience which focused the home screen all around your own self instead of people your are friends with on Swarm.

The app’s information architecture and visual style had also gotten to a spot where a few of the pieces didn’t quite fit together the way we’d want them to anymore, so I also made updates there during the process.

I wrote a bit more about this project over on Medium as well.

What is Swarm?

Swarm is a mobile-first companion app to Foursquare, which allows people to check-in to a given place, share it with friends, and in turn, create a personal record of places they've visited.

You can download Swarm on iOS and Android.

Before the redesign

We knew we had to update the information architecture to support your own check-ins, but we weren't quite sure how we'd accomplish that. This was the current state of what iOS and Android looked like before the redesign.

Before the redesigned Home Screen on iOS (left) and Android (right)

Explorations

I led a white board exercise with our team took some time to think through a few early concepts and ideas. One of the main goals here was to see if there was alignment on some of the initial design direction.

A few early sketch ideas

 

Working with our research team, I narrowed down a few different app hiearchy directions we could test with unbiased participants.

Doing a few rounds of research definitely helped hone in on a direction. We knew that people liked the idea of keeping track of the places they visit.

Directions tested in research sessions

 

Trying to think big about what some different directions we could take this project was important. Some directions ended up being a little too out there for our user base, but it was great to explore wide, then reign it in.

A few of the design directions explored

Final Designs

The home screen redesign effort turned out to include a bit more than just the home screen. Swarm's primary app navigation and a refresh to the visual design happened along the way.

We ultimately decided on a structure for the app which separated out your own check-ins from your friends' check-ins in the bottom navigation. This split the app nicely without segregating either type of user (one's that used Swarm with lots of friends vs. those who didn't). Keeping the check-in button prominent was also still very important, since it's an action that's very core to the app.

iOS before (left) and after (right)

Android before (left) and after (right)

Information architecture (left), your own check-ins (center), and your friends check-ins (right)

 

We were elevating check-in history to the home page of the app (instead of it being a subview on your own profile), so 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.

Check-in feed cells from the Timeline tab and Friends tab

 

Since I was working on updates to the visual language, which included colors, sizes, icons, etc. in the app, I created a style guide in tandem with this redesign effort.

Core iOS/Android components and iOS device templates, which are part of a style guide