Designing Foursquare for Windows
The saga of designing new Foursquare for Windows Phone
Everybody loves launch days. It starts with your company’s blog post, next, tech blogs begin to pick it up. Suddenly, it is raining tweets. Happy tweets, excited tweets, upset tweets, and angry tweets. You embrace it all, hungry for any type of feedback from users and tech enthusiasts. The initial reaction of the userbase is even more critical when you are launching a product for a new platform.
Last week, we introduced our new Foursquare for Windows phone and I had the pleasure to lead our design efforts in this brave new world. The new Swarm and Foursquare were our first in-house work for the platform. With our small-yet-ambitious team, we had a few short months to design and build the product. I want to share our journey of designing Foursquare while going through some Windows design principles and guidelines for designers like us, who are designing for a new platform.
First hand shake
Our goal as a team was simple —to craft an experience that is tied to the new Foursquare vision and embraces the Windows design language. While simultaneously not deviating too far from the Foursquare designs and branding present on iOS and Android.
The first thing to do was to familiarize ourselves with the Windows Phone Platform, primarily the existing interaction patterns and interface style guides. We delved deep into the documentation and guidelines, as we needed to have a good understanding of what makes Windows phone stand out as compared to other platforms. We then worked to identify what the major constraints are, while considering the form factors and different devices in the market.
We looked at what’s out there, which apps are best, identified the causes of their success, and determined how they communicate their narrative. We did not have to search for long to find many great apps, due to the thriving nature of the market for Windows applications.
We also wanted to come equipped with the proper tools to do the job. We created a new #windows Slack channel to share designs, exchange knowledge and post ideas/iterations. We also set up a github repository to inform each other on our contributions. Finally, we went on a vision quest to find the right Sketch plugins that would help us generate Windows-specific layouts and assets, or support us with naming conventions.
Letting your content shine
One of the things that really struck me in the Windows design process was defining the “great-at statement”: demonstrating the strengths of your app, and what you want your users to get out of their experience. For us, that meant to build upon our vision and narrative that Foursquare learns about you, your tastes, and your preferences to help you better explore the world.
Windows is very unique in that it encourages the designers to take a minimal approach, to focus on the content before actions and let the content become its own interface. We wanted to reduce the complexity by looking at the elements on hand, keeping the relevant pieces, and removing the rest of the information to streamline the experience in a clean, minimal way.
To achieve this, we looked at one of their major design patterns, chromeless page designs. This is exactly where “less is more” thinking makes sense. App chrome and other persistent elements get out of the user’s way and do not interfere with the user’s interaction with the actual content, enabling a more direct communication within your product system. And when essential contextual actions and controls were needed in the chrome and canvas, another Windows design pattern; app bars, represented these actions cleanly.
Being fast, furious and fluid
Windows design emphasizes heavily on compelling experiences with meaningful transitions and animations that makes your app feel fluid and alive. Considering the sequence of the operations your user will be taking is a key part of laying out the motion design. After seeing successful examples in the market, we knew that not taking advantage of motion design to convey our app’s narrative would be a missed opportunity.
We think that the new Foursquare provides a fresh and unique experience as it gets to know you and the things you like. It uses these preferences to power tailored experiences with personalized recommendations.
During app onboarding, conveying this message of personalization was very essential for us. Motion design was a critical part of our process to tie this whole experience together. Using fluid motion here allowed us to make the transitions between screens and pages engaging as well as make adding tastes (aka interests) a more fun and compelling experience.
The pivot control is the dominant navigation pattern in the Windows Phone platform. It is a quick and efficient way to manage views and pages by horizontal panning or flicking left to right. It really made us think through our hierarchical information architecture to prioritize our key experiences and distribute them using these pivot pages. It gave us the flexibility to surface valuable content on a high level within the pivot pages rather than behind a tap.
Being responsive and fast also matters in the sense that your product provides feedback to the user and makes the user feel that they are in charge. We spent a good amount of time thinking about our loading animations, empty states, and providing proper feedback to users after taking actions.
Designing for context
We want Foursquare to be an intelligent assistant for our users by always being there when they are looking for where to go or what to order when they arrive at a place. At this moment, Windows tiles supported our design thinking uniquely, surfacing real-time information on homescreen. They enable our users to access relevant tips and tastes at the place where they are at, or just to give them props for their popular tips.
In addition, you can get personalized local recommendations from Cortana, the personal assistant on Windows Phone.
Leveraging Windows Style
Another challenge for us was reflecting the Foursquare brand personality while creating a native look and feel that works well on Windows devices. Windows modern design language comes with a vibrant color palette, immersive use of images, strong grid alignment, and slick typography. Their style guide gave us the encouragement to go really bold with rich typography compositions, fun iconography and accent colors.
To be continued…
So far, the initial reaction has been great and we are very excited to hear more from our users. Just like every design, our work is constantly evolving. Not every final screen looks and feels as it did in the original mocks. And we had a plethora of ideas that never saw the day of light. Going forward, we hope to incorporate and reiterate some of those ideas which didn’t make it into our release due to time constraints. So, stay tuned!
Have a Windows phone? Give our new app a try and let us know what you think.
Interested in learning more about our design team? Let’s talk. basak@foursquare.com
Some Windows design resources:
http://blogs.windows.com/buildingapps/
http://channel9.msdn.com/Series/Windows-8-UX-Design-Jump-Start
http://ux.artu.tv/?page_id=190 (not very up-to-date but could be helpful)
