Research, wireframe, prototype, repeat

Our research team started out doing research with outside participants while the design team quickly got to work looking at what was out there to see what was being done well, what we thought we could do better and defining an early style guide for the new Foursquare. The initial version of our style guide was a lofty moodboard, it talked about how we wanted the app to feel: “intelligent, relevant and useful”, “magical and fun”, “trustworthy and highly-regarded”. It showed some fun directional color schemes as well as laid out much of the groundwork for our overall information architecture and navigation.

We spent much of the early days talking, sketching, wire framing, and prototyping ideas and directions for the new version of Foursquare. We had regular meetings with all of the stakeholders involved, where we presented our progress, refined our ideas and honed in on what everyone was feeling strongly about. We threw away 90% of the work we did. No idea stayed sacred for too long.

At times, that was hard to stomach. We had worked hard on something, and felt strongly about it. But, ultimately, it’s pushing through those barriers as a designer that results in some of your best work. The regeneration of ideas born from past experiences provides some of the best output.

One of our first big research projects was on a quickly built working prototype on Android and our research team was off to work. We felt good about the direction, even when there was a lot of polish missing. Doing research on a working prototype with real people who would use the app was invaluable. We got great answers to behavioral and UX questions relating to some of the new features, and evaluated the effectiveness of the different ways to find places to go that our initial prototype proposed.

We took the results of the research and did a lot of iteration and refinement on some of our initial designs and assumptions. We used everything from Sketch and Keynote to Flinto and Skala, web-based prototypes and hacked together builds to get things in front of employees and research participants in search of answers. We did this multiple times over until we got to where we are today, and even now we have more research slated for straight after launch. We are committed to never resting on our assumptions.

fsBatmanWatermelonColor, fsBatmanNavyColor

Rebranding

From the beginning we had planned to rebrand Foursquare. With a new and improved app direction should come a new and improved logo. The old app icon was a checkmark which was so closely associated with checking in, and the word mark itself felt like a relic of a bygone era.

The new logo and word mark were designed in conjunction with Red Antler to represent something bigger, something new, to be a combination of map pin icon and superhero emblem. We’re really stoked with the outcome. From mood boarding and ideating with them in their offices, to having their designers work out of our own, it was a fun and rewarding experience.

Early visual design explorations with feedback written on post-it notes

Endless visual design explorations

We had a really great mix of designers working on the new Foursquare, from those people who specialize in IA and UX, graphic design and branding, to visual design and prototyping. The best process for experimenting with different visual design directions for us was to start as broad and wild as possible, narrowing down into something that was universally loved. That took time, a lot of time, and a lot of versions.

A visual design exploration we had fully-fleshed out

Once we had locked down features and softened out any of the complex areas, we were heads down in building out our visual system. That started with the creation of an internal style guide that covered everything from color, iconography, type styles, how to use imagery, button use cases, and reusable components. Laying that foundation allowed us to move together in unison, multiple designers working on different aspects of the app design with ease and efficiency that resulted in a single uniform design style app-wide.

The standout color scheme that had evolved from our branding work really started to shine when we began working it into the app. It didn’t take long for everyone to fall in love with the pink — watermelon — color. The tastes feature of the new Foursquare is such an interesting and unique data set to get to design around, and was quickly adorned with our punchy new color. Tastes and personalization have a unique look in the new app, allowing you to quickly spot out those results. Why should you get the same results as someone else when searching for something, our results are for you.