Swarm 4.0 — UI elements as brand and brand as UI element
Hello Medium! It’s me, Alia. We released Swarm 4.0 today with many ~brand new~ and updated features centered around life logging and consumption. Of these features (which include a beautiful new profile design by Courtney Christopher), I primarily worked on: our updated in-stream photo experience, a feature called The Weekly Swarm, and a consolidated way to check in to past venues you’ve visited, that lives off of your profile. Additionally, near the time of our release date, I was able to design a new marketing look and feel for Swarm, one that hopefully tells the story of where the app and brand is today.
The Past and the Present: 3.0 gaming to 4.0 life-logging and Swarm the Brand
In our 3.0 release, which I wrote about this past summer, we were focused on bringing back the fun in Swarm, and our visual design followed suit. As a summary of this time: I added a header element that included a squiggle, Courtney added super cute Mario style coins, and generally, our UI elements served to reinforce the message that Swarm was about fun. Utility, for sure. But fun? 1000%.
Swarm 4.0 has been different. It was less starting from scratch. We had many design elements in place already, including: an expanded color palette, squiggle headers, scalloped cloud footers, coins and an expanded set of font treatments. Because of this expanded design palette, for me, design decisions for 4.0 became less about creating new things, and more about upping the consistency factor. In this release, I also thought a lot about sprinkling updated UI elements throughout the features I worked on, and attempted to treat design elements a bit more minimally in general to better tell the story of what Swarm has become.
Below I’ll break down the major design decisions I made on each of the features I worked on, and how I tried to weave our updated voice and tone throughout.
Updating Photos — Make it bigger!
In 4.0 I was tasked with improving the design of photos in our feeds. Since Swarm users use the photo features in Swarm to remember their adventures, it was important to us to update our design to better celebrate their content.
Design-wise, it seemed simple enough. If we wanted to celebrate user photos, they should be bigger to add visual emphasis to their content. As with most design decisions though, how to treat photos in our feed became more complicated when the details were considered. Considering our goal of celebrating user content by essentially increasing the size of the photo, my main questions became: if we should break the existing layout of user cells in our feeds, and if we could include Swarm’s visual brand elements in the experience to make it clear that you were still viewing photos on Swarm. In terms of including Swarm’s visual elements here, it became a balancing act of trying not to include too many attention-grabbing details, as the focus should still remain on user content.
From a visual standpoint, I was able to inject Swarm into our updated photo experience in a few ways: as loading states, I used our palette of Swarm oranges as color blocks and included a scalloped orange seal over the last photo to indicate how many photos are included in a photo set. I also made sure to include (more subtly) rounded corners to again, make the experience of photos still feel like Swarm.
The Weekly Swarm
The Weekly Swarm is a pretty simple feature that we hope will be helpful to facilitate quick consumption of a user’s Swarm friends’ feeds. The Weekly Swarm, simply put, is a consolidated version of your friends’ most interesting check-ins from that week. Because all of this content is aggregated, it’s our hope that you’ll be able to gain an ambient awareness of your friends’ activity in a quick way, as well as provide a light weight method of discovering new cool places you might not have found yourself. The Weekly Swarm also provides a light weight way of seeing how your friends are doing with the game elements of Swarm, like seeing what stickers they unlocked that week.
In terms of design and tone, the most significant things to me were the inclusion of our updated full width photos to make feeds more visually interesting, as well as the name ‘The Weekly Swarm’. For both of these decisions, both from a product and design perspective, it was important that the decisions I was making related back to, and contributed to, what we think would be included in the Swarm universe.
In this case, to me, it makes perfect sense that in the super playful Swarm universe (that includes our Swarm/Foursquare mascot, a cloud with eyes (a derp cloud, as we call it internally) and many many stickers with faces) there would be a weekly paper called The Weekly Swarm that summarizes your friends activity.
Post Check-Ins and a colorful slider
Since Swarm is primarily a check-in app, but many users sometimes forget to check-in, or don’t want to disrupt a social situation by checking-in, we wanted to provide an easy way for users to access all of the places they didn’t check into in one place. This reasoning led us to designing a screen off of the profile where you can check in to all of the places you might have missed.
In terms of design, I had already designed the interaction for checking in to past venues on Swarm when we decided to design a consolidated screen for this feature. The design decisions for this experience then became how I could add simple, yet playful UI elements to this experience to again carry through Swarm’s playful voice and tone. In this case, it resulted in a colorful flat slider, a colored line separator and the inclusion of our ‘bee-DU’ (get it? EDU but it’s a bee! Lolz.) character to educate you about the experience, and an empty state centered around our Bee-du character to carry the feel of the feature through.
Serious Marketing for a Kawaii product
In terms of marketing, it was a new challenge for me to consider how to tell the story of Swarm externally. Since Swarm’s functionality focus has shifted from being games focused to include life logging, it felt like the visual style of Swarm in our app was coagulating to tell both stories. As a result, to continue this narrative, the marketing look and feel for Swarm became a mix of visual polish and playfulness in style.
This updated tone is what I tried to accomplish in our marketing materials with the inclusion of photo backgrounds, tighter font lockups, and bringing our trusty UI element the squiggle into layouts. Because we use the squiggle prominently in our app UI, beginning to use it in product marketing backgrounds feels like it begins to close the loop of unifying Swarm’s visual design elements, which tells a larger story of what Swarm has become.
Overall, my hope with the all of the design I’ve worked on for Swarm’s 4.0 release is that by continuing to weave new and familiar design elements throughout the product and marketing collateral, we’ll continue to create a product whose voice is familiar, and continues to be more and more recognizable as we build new things.
(ps: I’d love to hear what you think, or talk about Brands, or Squiggles, say hi @alia_o_f )
You can download Swarm on The App Store, The Android Play Store
