small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

Published on <a href="http://ift.tt/2nR1DB0">| Prototyping: From UX to Front End &mdash; Medium</a> Meisi Huang <img alt="" src="http://ift.tt/2njEAlU">
Inspired by <a href="http://ift.tt/1OLLgdy">Brian Lovin</a>, I want to share some design techniques I learnt from my favorite apps. Let’s start with Foursquare — my adorable assistant for finding what to eat.
Simply put, Foursquare is an app which can learn about your preferences and proactively recommend places you’d love. I first heard about it 3 years ago. My friend convinced me Foursquare’s venue ratings, which relied on people’ check-ins, were more trustworthy than Yelp’s star ratings. I downloaded the app out of curiosity. After discovering a few awesome restaurants with its help, it soon set up the trust feeling. Not long after, Foursquare made a huge rebranding. Now it is becoming more personal, intelligent and context-aware. Its redesign is so fresh, simple and engaging, and there are lots of stunning design details. Let’s take a close look.
<img alt="" src="http://ift.tt/2nR2p0M">
<h3>Getting Started</h3>
If you’re new to Foursquare, the screen above is what you’ll see. The image in the background speaks out the theme. A nice text-transparency effect is applied on Foursquare logo, which makes the image part of it and hints Foursquare is about food and places. The tagline is simple yet covers the points.
Foursquare does an awesome job in offering four different options to get started(sign up with FB/email, skip signup, log in), while still keeping the screen clean and clear. The differences in the four buttons’ width, colors, transparency, with/without an icon, and locations can easily help people tell their priorities. Neat visual tips.
I like Foursquare especially writes “We’ll never post to Facebook without permission” below the “Sign up with Facebook” button, creating a sense of safety and reliability. I’m also glad Foursquare offers the option “Skip sign up”, which provides a complete and valuable signed-out experience for people who want to try it out. This is especially important for a new product. Why will people spend the time signing up before understanding the products’ values?
<img alt="" src="http://ift.tt/2njnC77">
<h3>Signing Up — 01</h3>
I previously signed up with Facebook, now let’s try signing up with email.
Looks a lot to fill out, guess that’s why Foursquare puts Facebook sign-up the primary option. There is a subtle detail that the contrast is slightly different between the required and the optional section.
I tapped the grey “+” box on top to add a profile photo. On the action sheet, Foursquare kindly tells me “this photo will be public”. So far, Foursquare gives me the impression of highly paying attention to people’s privacy.
The visual details of the grey “+” box is interesting. It’s not simply a rounded-corner square. Each of its four sides actually has a slight curve, adding a delightful feeling. You will notice this on other Foursquare icons and it becomes an iconic pattern. Bold visual innovation.
<img alt="" src="http://ift.tt/2nRcGtL">
<h3>Signing Up — 02</h3>
Foursquare is very considerate to place a “Previous”, “Next” button on the keyboard to help people easily jump between fields. I’d only argue the “Done” on the keyboard may be misleading as I thought it functioned the same as the other “Done” button on the upper-right, but it only folds the keyboard.
The way how Foursquare handles inline validation feels neat and lightweight. Moreover, rather than rigidly saying “Please enter a valid email address” as lots of other apps do, Foursquare puts it in a soft and friendly way — smart injection of personality.
<img alt="" src="http://ift.tt/2njECu2">
<h3>Loading</h3>
I’m a fan of Foursquare’s preloader. It feels so natural and slick. I wouldn’t mind watching it for a few minutes.
While I’m waiting, it’s genius that Foursquare pops up a sweet welcome message, which seems to shorten the waiting time. Wow learnt a cool technique to make things look faster! The transitions among different screens seem a little abrupt though — This is something that needs more designers’ love.
For some reason, Foursquare recognized I am an existing user when I tried to sign up on my phone. That’s probably why the welcome message says “welcome back”. I will switch to the web for a complete onboarding experience.
<img alt="" src="http://ift.tt/2nRijby">
<h3>Adding Tastes</h3>
(Imagine this will happen on you mobile app)
Foursquare did a brilliant job at introducing the “Tastes” concept. First, “Sushi”, “Chocolate Cake” are given as examples, then it uses “match your tastes”, “click a few tastes” to strengthen this idea. Moreover, Foursquare gives “tastes” an iconic color — pink. It’s noteworthy that something like “Romantic Places” or “Good for working” are also considered tastes. Hmmm, that’s thoughtful. Directing people to add tastes right after signing up reveals the core of Foursquare — “Personal” — in the first minute.
It’s worth mentioning the cute animation of all the taste options shaking into view in sequence. Adding/removing a taste also triggers a lovely trembling. This feels like all the buttons are made of tadpoles.
Here I found an interesting way to indicate “There is more” — the taste options on the last row are cut off. When people click “Show more”, in this case, displaying some transition of the bottom buttons moving up may be more in line with anticipation.
After I click “Show me”, I’m expecting there is a list of places already. However, there is not, which seems a little confusing.
<img alt="" src="http://ift.tt/2njuSjy">
<h3>First Screen</h3>
All right let’s back to the mobile app.
After adding tastes, we see this first screen “Search”. Everything is quite simple and straightforward. With the message “What are you looking for”, and the well-illustrated 6 options, I understand immediately what Foursquare is trying to do.
If you tilt your phone, you will notice the background image slightly moves around, adding more tangibility to the experience.
<img alt="" src="http://ift.tt/2nRl0tq">
<h3>Searching Lunch</h3>
Let’s try “Lunch”. We can see Foursquare offers the ability to search in a specific category (vegan, cafe, Thai…). That’s sweet. I enjoy reading the one-sentence comment displayed below each place. They’re just like a close friend’s suggestions, and I get the specials of each place at a glance. Wow I see my pink tastes in those comments, Foursquare, you know me.
When you do a pull-to-refresh, I love how the blue ring gradually comes to its full shape as you keep pulling down. Once you release, the ring blooms to ripples. It produces a joyful rubber-band tension.
There is a tiny detail that after you refresh, the category filters will be readjusted in order, echoing the refreshing action.
<img alt="" src="http://ift.tt/2njuSQA">
<h3>Filter</h3>
I’m impressed with how rich and attentive Foursquare’s filter is. It takes care of so many specific needs in different circumstances, truly people-centered. On the “Filters” pop-up, once we pick something like “Distance”, “Rating”, we can see Foursquare starts to load content in the back. Right, this happens even before we tap “Done”! Foursquare works ahead of us to provide a fast and smooth experience. Another smart trick to learn.
The different states of the “Filters” button(the first button on the top left)caught my attention. There must be a lot elaborate efforts behind it:
<ol>
<li>By default, the button is composed of a filter icon and the text “Filters”.</li>
<li>Once people apply a filter (e.g. Price, Open now, Liked), the filter icon becomes the number of filters being turned on. Brilliant!</li>
<li>If you keep scrolling, the text “Filters” will fade away as people are focusing on other things.</li>
</ol>
These little tweaks enable one single small button to satisfy several purposes. What’s more, you may not even notice these changes as it makes sense so much that you take it for granted. Smashing detail.
Besides, notice the joyful bounces as the “Price” filter expands and collapses.
<img alt="" src="http://ift.tt/2nR5nlQ">
<h3>Info About a Place</h3>
It is fun watching the green little bookmark falling down when you save a place, and more important, the location it falls into indicates where you can find it. A perfect example of using animation to guide people. It would be nice if unsaving a place can be treated with equal love. The heart explosion when I rate a place is gorgeous.
I deeply appreciate it when I tap “Directions”, Foursquare offers me a few choices. This is a huge time saving compared with Yelp’s solution, which always defaults to Apple maps. In Yelp’s case, I have to switch to Google maps, and manually tap in the restaurant, which really drives me crazy when in a hurry.
<img alt="" src="http://ift.tt/2njDnLt">
<h3>History</h3>
Foursquare is certainly good at making slow things look faster. While the system is detecting where I am, my eyes are occupied with these cute bubbled-in elements. When the animation is done, my current location shows up. Seamless connection! In addition, Foursquare stands out in copywriting. The message not only explains what “History” does, but triggers my curiosity to check back later.
<img alt="" src="http://ift.tt/2nRkknO">
<h3>Signing In</h3>
This is my favorite transition in the app. Things appear in the order of its priority, which guides people’s eyes through each element. Also, the way how each element appears varies, from zoom-in, slide-up, fade-in to slide-down. Sequence and various animation creates a pleasant rhythm of the app. Nicely done.
That’s all the little details. Of course there are more, but these are the ones I really want to talk about. Next I will briefly share my opinions on what makes Foursquare stands out. This might be helpful when thinking about product strategy.
<h3>Why Foursquare Makes a Difference</h3>
There is no doubt that all the amazing design work contributes to its success. But in addition to that, Foursquare advocated something unique in its product concept. First, the app learns about your preference. Based on the tastes you add, and the places you have been, Foursquare offers distinctive recommendations for each individual. For example, two people are standing in the exactly same spot, searching nearby, they get different results. Apparently, these tailored suggestions will be of higher qualities.
Second, unlike its competitor Yelp, whose core idea is you search something, and we provide the results, Foursquare give you suggestions before you even ask. And don’t forget Foursquare knows your preferences. Therefore, the powerful final ending is they proactively recommend places you’d love. The image below is one example. I gave Billingsleys and Ugly Sushi Roll high ratings before, and Foursquare began to suggest places similar to them. This is so helpful!
<img alt="" src="http://ift.tt/2njwoCl">
Furthermore, with the concept “History” (image below), all the places I’ve been are connected together to tell a compelling story. They are no longer just places, but precious memories, life tracks, or even who I was. Once integrated with emotion and personal identity, a product exceeds pure functional values, and creates a spiritual attachment.
<img alt="" src="http://ift.tt/2nRjw2n">
Last but not least, Foursquare is so intelligent! I was completely blown away when I got this notification (image below) right after I stepped into Feng Mao Kabob. I simply tapped the notification, all the secrets of this restaurant are in front of me. As AI is becoming a hot technology, Foursquare has a promising future by taking one step ahead of its opponents.
<img alt="" src="http://ift.tt/2njF23R">
This is the end. Thank you very much for reading!
<img src="http://ift.tt/2nR5mhM" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2njxBts">Things I Learnt from Foursquare Design</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Things I Learnt from Foursquare Design

Things I Learnt from Foursquare Design

Top Stories