Today we released the latest version of Foursquare to the world. We crafted, designed and engineered this version from the ground up, and today you can download it.
I thought I would write up my thoughts on the journey of leading the design efforts, with a truly great team, for our biggest launch to date.
Earlier this year we sat down as a company and looked at all the amazing pieces of technology we had built. Foursquare then had two distinct use-cases — keeping up and meeting up with friends, and finding places to go — and we’d tried just about every way possible to have them live together in a complementary way. We came to the conclusion that there were millions of people that want a better and more personalized search experience than currently exists, but are averse to check-ins and location sharing.
After much deliberation we decided it was time to take the next natural step and separate those use-cases into standalone apps with their own branding, marketing, feature sets, and interfaces that clearly served their distinct needs.
The overarching document that outlined the issues and solutions was aptly titled ‘Batman and Robin’, and those two names would go on to be the internal code names for our two apps.
Foursquare (Batman) and Swarm (Robin).
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.
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.
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.
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.
The last throes of any big project like this evokes feelings of excitement, anxiety, nervousness and euphoria. We’ve felt them all. It took a lot of time, love, care and attention to detail to get both our Android and iOS apps ready to ship. We poured our hearts and souls into this version, and the team around me is the best I’ve ever worked with.
It’s really fun looking back over the past 8 months, the amount of effort and work that was put in by everybody at the company to get us to where we are was phenomenal. This is the beginning of a new chapter for Foursquare.
On December 10th of last year, we showed this slide at the company meeting. It said, if we aren’t so fucking excited, we’re not launching. Today as you finally get to play with it, our entire team believes in and is behind the new Foursquare. We are so fucking excited.
If you like what you see and are interested in knowing even more about design at Foursquare, or perhaps, you don’t like something and think you can help us make it even better, you should get in touch. sam@foursquare.com
