Swarm Visual Design

DETAILS

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. I had a blast developing the overall styling of Swarm’s stickers, iconography, and other visual design.

Skills

Illustration
Iconography
System Design

TEAM

Dennis Crowley, CEO Foursquare
Courtney Christopher, UI Design
 

Swarm 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 long term 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.

 
juice.png
mayor_pizza.png
suitcase.png
ticket.png
birthday.png
mayor_clapper.png
shopping.png
sunglasses.png
tree.png
art.png
fireplace.png
skateboard.png
sunshine.png
chicken.png
doublecrownrotate.png
newyears2015_2.png
sofa.png
surfer.png
brunch.png
guacamole.png
mayor_fastfood.png
newyears2015.png
unicorn.png
sub.png
taco.png
 

Visual UI Elements

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

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

Final iconography set and custom hexagon avatar container shape

Final iconography set and custom hexagon avatar container shape

Final Swarm iconography and its placement in the app

Final Swarm iconography and its placement in the app