4.0 Release - Swarm by Foursquare
For Swarm's 4.0 release, I designed multiple features, including redesigned photos in feeds, a feature allowing users to check in later, and a round-up of your friends' most interesting activity as a means of discovery called the weekly swarm. This release allowed us to introduce multiple features with multiple design updates. I wrote about these updates on Medium here.
Project Details
Project Goals:
Photos-in-Feed:
To redesign multiple features, I was working on a few features in parallel or in close succession. For photos-in-feed, I was tasked with designing the UX of photos-in-feed after we found that check-ins on Swarm had a higher engagement rate than those without. The process of this project involved designing photos in the feed as a visual design update, where I considered how the visual design details I was using correlated to the rest of Swarm and also thought about the visual design of photo layouts in a way that might increase engagement with check-ins (in the form of likes and comments).
The Weekly Swarm:
The Weekly Swarm was designed as a weekly roundup of users’ friends’ most interesting check-ins of the week. From a product perspective, the goal of the feature was to increase engagement with check-ins by highlighting a user’s social graph’s most interesting activity. Secondarily, we wanted to experiment with the idea of a consolidated weekly activity feed, to see if that might also increase feed consumption from a user’s perspective.
Post-Check-ins:
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.
Role:
UX, Visual Design
Metrics Considered:
Engagement with: check-ins, photos-in-feed, activity feed, consumption and engagement with The Weekly Swarm, Number of post-check-ins
Process
Photos-in-Feed:
Our goal for photos-in-feed was to celebrate user photos, and our thinking was that adding more emphasis to photos, which led to higher engagement with feed posts, would lead to higher engagement with the feed overall. To add emphasis to users’ photos and to celebrate their content from a design perspective, we increased photo sizes to add visual emphasis. To accommodate Swarm’s visual design details, my explorations became a balancing act of including on-brand elements like rounded corners on photos and a multi-color orange background loader for photos in various shades of Swarm’s brand color and balancing the emphasis on user content. To explore these designs, I worked at low-to-mid fidelity, prototyping different concepts with visual design to show layout and loading animations in Sketch and AfterEffects in order to iterate through design reviews with my team.
The Weekly Swarm
Along with providing a weekly round-up of friends’ activities, The Weekly Swarm also provided a lightweight way of seeing how your friends are doing with the game elements of Swarm, like seeing what stickers they unlocked that week. To iterate on showing different versions of the Weekly Swarm, I created layouts of the Weekly Swarm feed and iterated on UX flows in Sketch at a low to high visual design fidelity as I met with my team for review and approvals. For both UX and visual design, it was important to consider how the design decisions I was making related back to Swarm’s super playful visual design, which was a large highlight in our 4.0 release. Part of relating this feature back to Swarm’s super playful tone was the visual design that was included, including our larger full with photos-in-feed from the above feature, as well as the name ‘The Weekly Swarm’. To make these visual and copy decisions, it made perfect sense that in the super playful Swarm universe (that includes our Swarm/Foursquare mascot, a cloud with eyes (a derp cloud, as we called it) and many many stickers with faces) there would be a weekly paper called The Weekly Swarm that summarizes your friends’ activity.
Post Check-ins:
Prior to Swarm’s 4.0 release, 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. Our goal for this update was to provide a way for a user to check-in to all of the places they might have missed from one screen. Since the bulk of the UX of this feature was already complete, I created the UX layout of this feature at a low visual design fidelity and iterated through the visual design details, thinking of ways 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’ (which was EDU/educational but a bee :)) 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.
Final Designs
For all of the features designed for Swarm 4.0, once I had low-fidelity designs that were informed by research, and approved by my design, product, and engineering team, I completed final designs at high fidelity visual designs for both iOS and Android for all feature designs. Overall, my goal for this release was to create engagement for photos-in-feed, The Weekly Swarm, and Post Check-Ins while integrating updated visual designs for components in these features that were designed to reflect a super fun and playful app experience. This was especially important since Swarm had previously incorporated game mechanics of sticker unlocks and earning coins, and in this release, we were also emphasizing life-logging as a value proposition, so I aimed to create cohesive designs that emphasized playfulness to match Swarm’s game elements with it’s more utilitarian features. Additionally, I created marketing creative for this release that again emphasized Swarm’s playful tone mixed with visual polish.
Designs included:
iOS, Android Designs, Marketing Image creative