Screens from Swarm's 3.0 release with inspiration above! L-R in circles: Sergi Delgado & Pedro Baños — Oyster Stout pack design, Richard Perez illustration , Ice cream pattern (unknown) , illustration by Rachel Denti, CUSP typography by Toko, Adventure Time , Elle Japan
I've been a designer on Swarm for the past 6 months, and it's been a busy ride leading up to our 3.0 release. This release is notable for our use of leaderboards and coins, which our team (including the super talented designer I work with/tell bad jokes to/show pictures of my cat to, Courtney Christopher) have worked tirelessly on. And, if I do say so myself, it came out great.
As a user of Swarm and Foursquare prior to working here, I've continued to have a close connection to the check-in interaction, and was stoked to work on the product. Because we've made so many changes to the UI in this release of Swarm, I thought it was a great opportunity to break down some of the inspirations for our UI changes, and think about how these inspirations relate to Swarm's updated tone.
When I began working on Swarm, I was super excited, but a challenge presented itself: How could I, as a designer, design functional pieces of UI like messaging with the mandate of fun? The 3.0 release was all about bringing back the fun, and we didn't want messaging to feel out of place.
To tackle this problem, I began to think of what fun meant to me, visually. I pulled a lot of inspiration. I went on Pinterest a lot. I watched a lot of Adventure Time. A LOT of Adventure Time. I found it refreshing to approach designing these functional UI pieces in a way where tone is as strong a feature of the product as it's functionality.
Since inspiration was such a big part of this release for me, I thought I'd break down a few things that inspired the features I worked on.
As I was working on Swarm, I found that the design language we were beginning to develop (and probably also while under the influence of members of our team) was heavily influenced by Japanese kawaii style. Specifically, I've been looking at a lot of Japanese fashion magazines including Japanese Elle and Japanese Vogue for inspiration. There's so much in Japanese magazines that I love — the bright neons, the type lockups and the layouts for example—that are super inspiring to me as I've been designing Swarm. It's been super refreshing to pull from print design and fashion as inspiration for a mobile user interface.
Also, I looked at a lot of illustration and graphic design! I tried also to incorporate inspiration from my favorite illustrators and graphic designers, like Richard Perez, for the UI pieces I was working on. A lot of the graphic design I was looking at fell into the modern / brightly colored / playful camp, which felt like it naturally slotted into Swarm's new playful direction. Also, from looking at a lot of (especially European) graphic design, a magical UI element began to present itself to me: the squiggle, which I began to use as a dominant UI element throughout the features I worked on (and hopefully will continue to do so!).
The thought process behind the squiggle generally fell into being inspired by so many playful visual elements, and thinking about what elements of the UIs I was working on could be manipulated to include an unusual shape. This is a process I hope to continue: attempting to design a product that feels fresh contextually, but correct in tone.
So, with that said: here's what we ended up with:
Swarm 3.0's friends tab, with our Here Now feature, and cloud themed messaging! Kawaii!
Our updated message UI!
So that's where we're at! I am very excited about this week's release, and to be working on a product where tone has been a dominant design element.
As we work on Swarm, I hope to continue to develop Swarm into a playful product that's as fun to look at as it is use; so much so that it becomes something close to a fun friend that helps you experience your day.
To download the latest version of Swarm, check it out here!