Nhảy đến nội dung
Information
Services
  • Telephone

    (+84) 97 531 9889

    (+84) 86 929 1771

  • Email

    infor@beau.vn

  • Our Office

    33 Giang Van Minh Street, Ba Dinh District, Hanoi, Vietnam

Swarm Branding and Visual Design

17 Th10, 2018 /

First Some Background

Since 2009, Foursquare has had two core use cases: sharing your location with friends through check-ins and searching for the best venues nearby.

With all of its features, questions about Foursquare usually required long-winded responses:

Usually, people who were interested in the personalized search functionality didn’t want to use Foursquare to check-in or share their location.

We talked to a lot of Foursquare users, and always heard that they either opened the app to search, or to check-in, and rarely both at the same time. That’s why we decided to make a bold move to improve the experience of both use cases.

After a series of proposed solutions, we decided it was most natural to separate our two use cases into their own standalone apps. One devoted to sharing your location and the other for personalized local search. This meant moving the check-in functionality out of Foursquare to a second app, Swarm, leaving room in the Foursquare app to focus 100% on local search and discovery.


Final wordmark and logomark lock up

Meet Swarm

Swarm is the fastest and easiest way to keep up and meet up with friends. As an evolution of the original Foursquare check-in experience, Swarm provides an at-a-glance view of all your friends and what they’re up to, making it easier to keep up online and meet up in real life.

UI design by Courtney Christopher and Nicole Formica

The Branding Process

We worked closely with our friends at Red Antler throughout the branding process for both Swarm and Foursquare and I was happy to call their headquarters home for a little over a month while working together.

During the process I had the unique opportunity to work closely with the Swarm team on visual design within the app while simultaneously working with Red Antler on the app’s branding.

Left to Right: Zack Davenport, David Ricart, Mike McVicar

Left: Early name ideas for the app, Right: My check list at the beginning of the branding process

Part I: Drawing Inspiration

We wanted Swarm to feel fast, playful, and evoke serendipity so we needed an identity that matched this personality. We began the process by digitally collecting references and imagery using Pinterest then physically printing, cutting, and arranging the images into a mood board.

Visual inspiration collected on a private Pinterest board

Left to Right: Zack Davenport, Jon Steinback, Sam Brown, Courtney Christopher, Sean Salmon at Red Antler HQ.

Final moodboard for Swarm

Part II: Ideating and Iterating

Once we settled on a mood board that visually represented the personality we wanted to embody, we began to sketch out ideas for a logomark.

Our previous Foursquare identity didn’t have an official logomark (though there were many unofficial ones…) so this was something we were very interested in incorporating to both the new Foursquare and Swarm brands.

Logomark Development

160 bees. A collaborated effort between Red Antler’s Mike McVicar and myself.

A selection of bees designed by Red Antler’s Mike McVicar and Foursquare’s Zack Davenport

Wordmark Development

A selection of wordmarks by Mike McVicar, David Ricart, and Zack Davenport

Presenting to Dennis Crowley and team at Foursquare.

Part III: Finalizing the System

Final Wordmark and Logomark Lockup

Incorporating the flight path for web ads and banner lockups

Final app icon

Swarm’s Visual Design

While I worked with Red Antler on branding, Courtney Christopher led the UI design efforts in the app. Eventually we collaborated as we began implementing more visual elements within Swarm. I had a blast developing the overall styling of Swarm’s stickers, iconography, and other visual design.

Earlier versions of Swarm’s check-in button. We wanted it to feel light to represent the quickness of the action.

Final iconography set

Final Swarm iconography and it’s positioning in the app. UI design by Courtney Christopher and Nicole Formica.

Stickers

When we built Foursquare back in 2009, game mechanics were added to help users learn how to use Foursquare and help make real-world experiences more fun. Users were awarded badges and points for exploring new places and mayorships for customer loyalty at their favorite spots.

As our user base grew, the gaming elements began falling apart. Mayors were great when Foursquare was small but as our community grew, earning a mayor crown became nearly impossible. Badges were fun to collect but many of our longterm users had stopped unlocking badges long ago, leaving no more added incentive to check in.

So, with Swarm we decided to give our gamification elements a much needed refresh. Now, people can unlock stickers to apply to their check-ins to quickly express how they feel or what they’re up to. Rather than competing with the rest of the world, Swarm mayorships are earned by beating out your friends in a particular venue category. If you’ve checked into the gym more than any of your friends, you’re awarded a golden bicep sticker to use to humblebrag any time you’d like.

Gotta catch’em all

Being a part of Swarm’s branding and visual development has been an unbelievable opportunity and learning experience. Not only did I witness the incredible amount of work it takes to make an app from scratch, I also got a behind-the-scenes look at Red Antler’s branding process.

For Swarm, the all new visual identity is just the beginning. Follow along as we continue to iterate our game mechanics and other features to make keeping up and meeting up with friends even easier.

Download the app here.

Article by Zack Davenport

Sign up for our latest news