Foursquare designer talks challenges of redesign process

By Dan Thorp-Lancaster
last updated

If you're an aspiring Windows Phone developer, a new blog post by a designer of the Foursquare app may be of some interest to you. A little over a week after debuting a fresh new look on Windows Phone, Foursquare designer Basak Haznedaroglu took to a blog post to describe some of the design challenges behind the visual revamp.

Haznedaroglu says that the team's mission was to take a hard look at Windows Phone and what makes it unique:

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.

Speaking on the importance of Windows design itself, Haznedaroglu says:

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.

To address the above challenges, Haznedaroglu says that the design team worked hard on a number of fronts to bring the app to life. One of the most important aspects of the redesign was to improve the onboarding experience for new users. To this end, the team worked to implement a fast and fluid interface by adding engaging animations and transitions during onboarding in order to emphasize personalization while keeping the experience fun. Additionally, Windows Phone's use of pivot control (menu navigation via left and right swipes) made the team think harder about the the app's prioritization of valuable information in each menu.

This is a fascinating look at the thought process that goes into bringing an app to life, and Haznedaroglu goes into much more detail concerning the exact steps that the Foursquare design team took in the full post. Be sure to click on over via the source link below if you're interested in learning more, and let us know in the comments how you're enjoying the redesigned Foursquare.

Source: Basak Haznedaroglu

QR: foursquare

Dan Thorp-Lancaster
Dan Thorp-Lancaster

Dan Thorp-Lancaster is the former Editor-in-Chief of Windows Central. He began working with Windows Central, Android Central, and iMore as a news writer in 2014 and is obsessed with tech of all sorts. You can follow Dan on Twitter @DthorpL and Instagram @heyitsdtl. 

63 Comments
  • Can i say that it looks so bad, that blue isn't comfortable. Also why doesn't the icon "comunicate" with the app itself, by icon i mean that squared logo, i know it is but i wouldn't say its the Foursquare icon,
  • The app looks like crap.
  • That color blue was quite popular during the days of the HTC 8x
  • Go beyond the blue. It gets worse. They somehow forgot how unique the experience was of Foursquare with the real-time map as header instead of that ugly blue. What the hell is wrong with those 4 ugly small icons? Have they looked at these on Lumia 930 or 1520? On huge phones it's wasted space. Have they looked at how "Log in" and "Sign in" button are NOT aligned and dragged to left of screen when you add Twitter account? Have they looked at how under "Sign in" for Twitter, they still have a tick mark symbol under the screen sitting redundant? Think the have thought nothing while redesigning. All they wanted to do is make it look ugly like other OS. Even a Blackberry intern could have done a better job.
  • Then don't update the app. Sit on the previous version which crashed without fail everytime I launched it on my l920.
  • The app is okay.
  • I feel like if the Swarm app is better designed. It has a cleaner look to it.
  • Yes. Although I didn't quite like Swarm, it is a feast to the eyes in terms of visual and UI design. The new Foursquare app is so hideous I quit using it altogether.
  • The animation run smoothly on low end devices yay
  • I don't even use this service but I feel like I should check it out anyway now.
  • It's a nice designed app, don't let others tell you it's not.. Try it for yourself, I actually like it better than any other Foursquare app.
  • Looking at the screenshot, my only nitpicks are the ugly shade of blue, the uppercase letters on the pivot header and the odd mix of square and rounded corners.
  • I don't even care about the upper case letters in the pivot. In other languages (German in my case) it has always been this way in Windows Phone. Upper case, upper case everywhere :D
  • It's awesome now and pretty informative. I need that much more than becoming a mayor of some spot. Love this service and app. And yes, this blue could ve a bit diferent. :)
  • I personally don't like this design. The app is cramped with alot of information all at one time. Two rows of panoramic information makes it even more confusing. They could've made a layout better than this.
  • +1
  • Productive criticism, they need more of these and less of the nags. I agree with you, content looks too cramped. It's really weird because their previous app was very clean and well designed.
  • Another thing is the navigation is inconsistent between the Swarm app, they look similar to each other but behaves differently. In new Foursquare app, navigation at the top doesn't swipe gestures because there is already pivot navigation at the main content. In Swarm app, the navigation at the top does swipe gesture which is also consistent to overall Windows Phone navigation. This issue is another added confusion interacting between those apps, especially they look the same.
  • Awesome, awesome example of a developer that tailors their apps to the platform! We need more developers that recognize that iOS, Android, and WP are all completely different platforms, and are able to take advantage of the individual strengths.
    Looking forward to seeing more of this as Windows Phone gains popularity.
  • -1.
    Use the app. You will know it ISN'T tailored to the platform. The one tailored to platform was when Nokia helped them make the app. It was gorgeous.
  • They didn't though...
  • I really like their own take of Metro that didnt deviate much with the Android and iOS counterpart, which is the app brand.
  • Its not the app itself but rather the philosophy behind the app. And this is a perfect example of how a true developer should think and act.
  • tl;dr The team getting an obligatory participation ribbon details their losing game plan
  • That dude has an incredible surname
  • I agree with what he says but that design embodies none of it -_-
  • They misused almost every single UI element.
  • #RIPMETRO "content before chrome" (more on typography and less on graphics )
  • +930
  • Hopefully the design process didn't change drastically with w10. If it does hopefully it's the last time they do it, and that if there are going to be any changes that will present significant challenges to devs that they release the SDK early to EVERYONE. Constantly changing the dev environment on a platform that people aren't totally sold in yet is a bad idea.
  • If anything, i have a feeling W10 is actually going for more "constant" design with iOS and Android (such as the burger bars), while maintaining some of the design language that has become synonymous with the OS (metro/sideswipes). That might actually make it easier for devs to "port" over their apps rather than completely redesign it.
  • I'm surprised by some of these comments. I like it. What I haven't been able to figure out is whether the, "tastes" are carried over through Cortana. For some reason, I would be more comfortable with auto check-ins if Cortana was handling that as well. I do much more searching for nearby locations using Foursquare than Yelp through Cortana given their updated support for the platform. Cortana extensibility between these services (beyond what they have now) would be even better.
  • One of the ugliest app in the store. And what's with the BSOD blue? The previous version was better. UI and colour usage. The only thing I like is the new logo. Old version:  http://goo.gl/g3L7eV
  • Do you mean the previous one, or the previous previous one? I realized after coming back to this article that screenshots in the Store were outdated. Looks like their original version had potential though. (there is an image with 8 screenshots of the one I mean).
  • I dont like the blue color, it hurts my eyes!
  • Great design, I love it!
  • I love the design as well, really don't get what all these people are complaining about... The blue looks fine.
  • I prefer the new menu and navigation system. It is more intuitive and straight forward. The old one might look nicer but it is horrible to navigate. Performance wise I definitely felt it is more fluid and responsive overall. I understand sometimes you can get over indulge trying to fit the blue theme. But, the old color scheme is still more easy on the eyes.
  • They should look at the CBS News app if they want to design an app for WP that people will like.
  • The app looks horrible. She should have drawn inspiration from the MSN Food app and the Android Foursquare apps. Cut down on alot of that garrish blue, especially in the top ribbon (which really shouldn't have been there, or at the very least smaller, to maximize on actual content display). Put circles around the segment icons, as is the norm in Metro design language, and keep the white space between image clusters/large images to a minimum.
  • There also doesn't need to be an everpresent search bar on the "homepage". Do what MSN Food does and have a search button to bring up the searching function...especially since that search icon n bar combo is so damn ugly.
  • I appreciate their effort and courage, but the fact that they got rid of the mayor system and points, this app basically derailed. Swamp isn't even enough to make up for it. I now barely use the apps to check in, and I think soon I never would.... which saddens me considering that I've been using it for over 4 years
  • +928
  • Looks like an ugly web wrapper more than a native app. Meh
  • Then the designer should have read first the Windows Phone design guidelines. There is no word of this ugly "navigation" buttons on top. And the live tile and this F on white/grey background looks on a WP device with white Background like an amateur designer has done his homework here.
  • I don't know what people are complaining about so much. The app looks really well done and I actually like the shade of blue. It's almost the same colour as the accent colour Cobalt on our WP -- which, btw, is my favourite accent on WP.
  • "I don't know what people are complaining about so much" … "I actually like the shade of blue" … "Cobalt my favourite accent on WP" The world revolves around the sun… #JustSaying
  • I'm just pointing one of the things that I like. Sorry for expressing myself, Mr. Jesus.
  • I've been sitting on the sidelines for over a year now awaiting the progress of MS Win10 experience. I would like to try out some of the apps, but i am still on 8.1 & on an SP2. Is there a way to experience the new system without using a Windows based phone? I really want to buy the next version of the 1520; 1530? I really want to experience it working and using before i make the jump from my i5s. Any useable links i can try out ?    
  • new app design is really ugly
  • I like the redesign.  I wished it used the larger background picture like the Android app does...there's a lot of wasted space at the top.  It is not without its bugs though...if I click on the map for the resturant on the WP app...it shows me my house.  Android app...shows me where the resturant is like it should...so they have a little work to do yet.   However, I do prefer the navigation using the WP app over the Android app!  Nicely done.
  • I agree with you on the wasted space up above. How could they approve that?!
  • I was using foursquare like crazy. My friends came up with a nickname for me - the mayor. And then they've introduced the app for checking in - swarm. Then I've noticed that my check-ins no longer count. So, I got stuck with a nickname I can't justify anymore. Now, the new design of Foursquare... For me, it is terrible. Maybe it requires some time to get used to it, but I'm not willing to spend any. For me, this was "Bye bye Foursquare.
  • Apps in general got worse design every day.
    Take as example "hamburger menu". Why the hell it have to top left or right of screen? Do designers think I have thumb 6 inch long? Apps share same shitty design across ios, ando and now WP. What's wrong with you designers!? For WP please use 3dots menu...
    Foursquare app... I don't like update, it pushed me to uninstall app and I don't use foursquare at all. No more.
  • She's got a great name. What's that worth at Scrabble?
  • The design is excellent
  • I use this app all the time and I'm Love ❤ it more & more :)
  • I like the new app, it makes the Foursquare and Swarm seperation seem more logical. The app really feels focused around my interests now, while the old app just attempted to do that.
  • integration with "here drive" or "maps" doesn't work anymore .. 
  • Comparing it to the old version, this is way better. Nothing wrong with the blue color its like a fancy color for me same as swarm. Its better to adapt the design from swarm. All in all good work to developers
  • I don't like the logo.
    I would also like to see some design settings.
  • Great job
  • The only reason I use this official app is because it's integrated with Cortana. Otherwise, I think the UI design stinks. Much rather use 4th & Mayor.