Building Real World Experiences in Foursquare City Guide
A look into the re-design of our place pages
As a designer, it’s exciting to have a hand in inventing the future. Many of our decisions ultimately shape human behavior.
Over 10 months ago, the Foursquare City Guide team set out to figure out how we should tackle the next version of our app. After conducting research, strategizing and months in design, we ended up building all-new place pages that help users really experience a place before they go there. Whereas there used to be one long, continuous scrolling page, now, all content is broken down into a 4 tab system — Highlights, Info, Photos, and Tips — making it easier for anyone to find the information they need.
Here’s a look at how we landed on this direction.
Breaking ground.
After what felt like a million hours of on-site research, focus groups, in-home and out-of-home ethnographic studies and in-depth one on one discussions with our users, it finally became clear to us what users needed.
Users of both Foursquare City Guide and other competitive products want to get a better sense of the full experience of a place. Users essentially do everything they can to mimic the feeling of being at a place, before they make a decision to go. This includes researching the food and service, but most importantly, figuring out what the atmosphere was like. This experience of going somewhere starts the moment users pick up their phone.
Laying the foundation.
After initial kick-off meetings and brainstorm sessions, we were able to develop a “North Star” of what we decided to build, craft an action plan around how we could get it done and define the core goals that would help get us there. Place pages are the most viewed page in the Foursquare City Guide app, generating over 370 million views per month, and were the best place to realize the changes we wanted to make, so we focused our efforts on surfacing information there in a new way.
Framing the experience
With a focus on helping users mimic the experience of having visited a place before committing to going, we needed to rebuild the place page from the ground up. We focused heavily on the “evaluation stage,” which is when users analyze and decide if a place actually satisfies what they are looking for. We elevated features such as tagged photos to give users a quick look at the most popular food tastes at the venue, interior and exterior photos, popular tips and feedback from users and a quick bulleted list of what the venue had to offer.
Designing the infrastructure
The amount of content living on these pages was overwhelming and required users to dive in and out of different places to gather all the information they were looking for. This constant back and forth resulted in users losing context and added mental strain by having them hold onto information in their memory, while they were still evaluating.
We started to look at a new structures that incorporated many points of interest. The design needed to be simple and easy to support our users in their “evaluation stage” while also optimizing for quick decision-making and minimizing cognitive load. Our primary goal was to make sure the user felt informed and confident to make a decision after seeing this page.
Assemble and Construct.
Leading a project as large and important as this one, it was critical to make sure each and every team member was involved and aligned from kickoff to launch so everyone would feel invested in its success. Even though I led most of the design changes, everyone on the product team, from engineers to PMs to copywriters, was involved in the feedback and decision-making processes.
Building solutions together
As the lead designer, much of my time was spent sketching and wireframing ideas, based on all the conversations and data we had collected as a team. Some ideas were wacky, some were safe or boring, but nothing was ruled out. I presented every idea and visual solution to the team, no exceptions. This exploratory exercise helped jumpstart my creative thinking and focused my design efforts with a real concern for a human experience.
My creative process circled around this idea of how to create an “experience”. Each place needed to have its own vibe. I wanted to give our users the “insider sneak peek” they were yearning for. It was a crazy idea, but I needed to make each page feel custom and unique. Not all places were created equally, so why treat them that way? In doing so, we were able to not only make gas stations pages look decent and approachable, but we could make the hottest spot in town look even better!
Most of what I designed was thrown away. Nothing was cherished for too long. This gave us the chance to really dig deep on what we thought our users absolutely needed. We were able to create these solutions together and in doing so, we built a page we all were proud of.
We established a tab system that would allow users to easily find what they were looking for and optimize for quick decision making. To avoid cycles of iteration and information overload, we created rules for this system by defining objective and subjective patterns our venue information was showing. These rules made pages flexible and would allow an easy transition for future content on this page to have a home. All our pieces were ready and it was finally time to put it all together and make this page really come to life.
Foursquare users from around the globe have helped us build our database of over 105 million places. They’ve shown us what’s great inside those places by uploading over 630 million photos and writing over 91 million tips. We’re proud that we’ve redesigned the app in a way that really makes this content shine.
The final walkthrough.
Looking back on these 10 months, the amount of effort and work to build these pages was an amazing feat. The entire team was involved in vetting and executing a new design system. At times it seemed like all the pieces would never quite come together, but we kept on pushing. We were a small, but mighty group who worked closely and iterated on design decisions together. This was truly the best part of the process.
A huge shoutout to the team: Marissa Chacko, Ben Mackey, David Pimentel, Mario Lin, Matt Dyson, Emily Kane, Tori Ugarte, Andy Tao, Jack Osborne, Kevin Most, David Weissler, Shashank Gupta and Nate Folkert. Thank you for making this a journey worth remembering :)
