How Tinder Design Hooks You Up

Let’s dive into how Tinder onboards new users, creates habit loops, drives our behavior and hooks us up to keep using the app. Get on board!

Sign Up Screen

Tinder offers you only the login option at first. If your credentials aren’t already in their database you will proceed to the registration flow. Otherwise, you will log in to the app. Pretty convenient. Tinder gives you two ways to log in — with Facebook or phone number. You also have another option — ’Log In With Email’. But this one hides behind the ‘Trouble Logging in?’ link.

That’s the first example of how Tinder builds the choice architecture for users. They don’t give you all the possible login methods at once because they know — the more choices people have the harder it’s for them to select one. Tinder limits the choices putting the preferred ones onward as defaults.

Note how they reassure you to use your Facebook account for the login stating that Tinder will not post anything to Facebook. Let’s select the ‘Log in with Phone Number’ option and see what will we get.

Log In with Phone Number

Smart! The app automatically gets my phone number from my phone and offers me to use it. What’s so smart in it? Tinder knows the core of people’s motivation:

If you want people to do something, make it as easy as possible.

That’s the core of the behavioral theory by BJ Fogg. You need three things to nudge a person to do something — Motivation, Ability, and Trigger. Together they create an easy formula of human’s behavior. To do something people need the desire, ability to do this and a trigger that will nudge you to act. It’s hard to manage people’s motivation, but you can make the ability to do something as easy as possible.

Remember how many time you walked the office kitchen and grab a cookie? You don’t even want a cookie, you were going to drink water or so. But the cookies lay right before you, it’s so easy to get one that we keep taking cookies even when we didn’t want them.

Tinder uses any possibility to reduce the numbers of interactions required from the user. I don’t even have to recall and then type my phone number with my fingers — I need to make one tap. The country code is already prefilled based on the location settings of my phone so I don’t have to search for it from the long list.

Look at this screen. It’s not overwhelmed with UI elements keeping me focused on one task per time. User’s attention is a limited resource as well as the user’s time. You want to consider this when designing products for people.

The registration forms usually contain several fields to fill in. That’s when people drop off — we are lazy and don’t want to make extra efforts. You can help users in this case by splitting the complicated task into smaller ones. As BJ Fogg says:

Helping people take small steps you can lead them anywhere.

The big bright button is available right above the keyboard. Remember, the easier is something to perform, the more people tend to do it. This button is large enough to tap and don’t misclick. Compare it if the button would be in the top right corner of the screen as a small icon or link — what’s easier to reach and tap?

The input field is autofocused so I don’t need to tap it first to get the keyboard. Limiting the number of elements on the screen Tinder also avoids scrolling as an extra interaction. It amazing — I needed to make one tap and Tinder does everything next. Will I proceed next? Hell yeah, it’s so easy!

The next step is to verify your phone number. Tinder immediately sends you the code via SMS and — wait, wait, the magic comes again! — I don’t even have to go to my messages, copy or remember the code, go back to the app and type it. Tinder does it for me! The app automatically retrieves the code and proceeds me next. My respect, Tinder! You’re masters in reducing the interaction cost for your users. As I don’t have a Tinder account the app checks it with my phone number and sends me to the registration flow. Why not! 🤗

Registration Flow

The registration process consists of several steps. Tinder is consistent in offering you one task per step (I’m not saying that this method works well in all cases, it depends on the context). The main input field is autofocus, keyboard available, a prominent button is easy to reach.

Also, Tinder uses an active wording here — ‘My first name is…’ This method creates some kind of conversation with the user. And it’s written from the user’s perspective — not ‘Your first name is’ but ‘My first name is’. This gives me a feeling of control when creating my account.

By the way, take a look at the cool progress bar at the top of the screen.

It performs a pretty important role — it indicates how long the whole process will take, gives feedback about my current status, and keep me motivated as it provides immediate feedback about my progress. The indicator also acts as a reminder of how much time I have already invested in the flow. When you see that you’re one or two steps away from your goal, you’re more likely to complete the task. It’s already pre-filled making me believe that my progress is 1/5 completed.

One big respect for not sending me the ‘Verify email address’ email now. That’s the right way to distract your users and lead them away losing motivation and concentration.

Note that Tinder uses there a numeric keyboard and input with a mask for date of birth. There are different ways to do this — split it into 3 separate fields, use dropdowns or spinners.

It can work great for selecting a date you don’t remember well. But every person knows their date of birth. It’s something personal and significant for us as our names are. And it’s much easier to type the date you remember so well instead of scrolling the spinners or dropdowns. Hey, I’m halfway from my goal now! 😅

‘My School Name’ is an optional step. Tinder wants us to make an extra step and placed it between the required ones. It looks the same as the required ones — only light grey link button ‘Skip’ in the right top corner makes it stand out. This button is hard to notice and tap — my fingers are too short and lazy for it! And after completing previous screens it’s so easy to complete this one as well.

Add photos

Next step is to upload some photos of me. It’s the important one — that’s how my possible matches will perceive me, let’s use some really good photos of me.

To upload photos Tinder needs permission to access my photos. Before displaying the standard ‘Allow something’ dialog, they show me one more screen. There they explain why they need the permission I will be asked to allow in the next step. Why add the extra screen? Why not no just display the dialog, you may ask? It’s a very suitable psychological technique called Priming.

It refers to activating particular representations or associations in memory just before carrying out an action or task. For example, a person who sees the word red will be slightly faster to recognize the word apple. Using this technique Tinder stimulates users to perform the next action. Good job!

Enable location

The button ‘Done’ on the previous step made me believe that it was the last one. But wait, there is another one — ‘Enable Location’. That’s the sense of Tinder — find the right matches nearby. They also used the priming technique displaying me an explanatory screen before the permission dialog.

Note the wording — first, the text says that enabling the location is required to use the app. But there is also a grey button ‘Tell me more’ that leads you to the other screen. There Tinder explains why you should enable the location in terms of your benefits — that’s how you will see matches nearby. Interesting way to get permission, let’s allow it!

Welcome on board!

Diddly Doodly!

And I’m here! After a very quick tutorial, the first thing I see is a card of my first potential match. Most of the card’s place takes the person’s photo. That’s the right way to attract any person’s attention. People evolutionally tend to notice and recognize other peoples faces.

The match card design is pretty simple — photo, name, age, one-line description and/or distance from you. Tinder limits the number of information about the person reducing the cognitive load to make the first move.

When you tap the card you see the next tutorial — how to interact with the card. Nice timing to show it — right when I would need it.

The main screen is very important as that’s how Tinder hooks you up. You see one match and you’re curious who will be the next. You keep swiping getting more and more cards. It’s the swiping brother of the infinite scroll used by Facebook or Instagram. Also, when you open the app you don’t know how many likes have you got, how many new matches await you. And this forces you to keep checking the app looking for the reward. And the desire to know it forces you to open the app more and more, creating the habit loop:

receive a trigger → perform an action → get a reward → invest more.

You receive a notification from Tinder that someone has liked you (external trigger) or you feel this itching desire to check if someone likes you (internal trigger). This trigger makes you get your phone and open the app (action). Right after that, you get the reward — new likes, matches, messages. You check the new picks, swipe cards, replay to messages investing more your time and attention in your account. I make this investment hoping to get more rewards in the future. And the loop repeats.

What’s more important the reward we get is variable, it changes every time you open the app. It stimulates you to open the app more and more as you don’t know what you will get next.

You can share the match profile with your friend to know their opinion. Very interesting idea — when making a decision people are more likely to look for help from others. Also, it’s a good way to get your users to promote your app with their friends. Instead of asking ‘How would you like to recommend us to your friends?’ Tinder combines the invitations with a user’s need.

Hey, while I was swiping through potential matches I’ve got 9 likes! (Mom, I’m popular 🤩). Note how the notification element is combined with the switcher and grabs your attention. Do I want to know how others liked me? You bet!

Whoa! To see these people I have to upgrade to the Gold account. Smooth. Tinder uses the nature of people’s interest in what other people think about us to tease. In our social life, we use different types of signals we send and receive. That’s how we select potential partners for relations, business and so on. Everybody wants to know who likes me, but upgrade first, please. Pretty logically, let’s try it.

Nice screen! And a very important one — that’s where you convert your free users into paying ones. Tinder uses the right accent on the benefits for me to upgrade — they show me the number of people who liked me to keep me motivated.

Subscription plans are displayed in an interesting order — starting from the most expensive to the cheapest one. The first plan is used as the anchor the user will use to compare with the other ones. 12 months sounds too much but looks cheaper than others. 1 month is the latest to notice and the most expensive one. The 6 month looks the most appropriate in this case — not so long as 12 months and looks cheaper than the 1-month plan.

The plans are calculated for the monthly payment that’s why the ‘1-month plan’ looks the most expensive comparing to others. But the other plans will be charged for 6 and 12 months at once accordingly, so the final price will be higher than the one-month payment. But to compare these prices you have to open the calculator and do some math. People are lazy, very few of them will do this, especially when the ‘6 months’ plan looks cheaper, saves me 37% and is already preselected.

I believe that’s the Tinder’s most popular plan. Hey, they already told me about this with the prominent badge ‘Most popular’. Very wise — when making a decision people tend to choose the most common/popular option — a dish of the day, friends recommendations and so on. So that’s a great way to reassure me that this plan is the best of all the perspectives.

We have dealt with the people who liked me and look — there are some Top Picks. Let’s try it.

Hmm, upgrade to Gold again 😑. Nicely done, however — making choice is one of the hardest things in our life. Providing users a set of already selected matches will drive them to make the move. Especially if you limit the number of top picks and their time availability.

This is a ‘Scarcity’ effect — we value things more when they are hard to get. And people also link availability to quality. If something is so rare it should be worth it. The limited-time availability uses people’s fear of missing out. This tactic is often used with some perceived benefit for acting fast, like a reduced price or some additional bonus items.

Conclusion

As we saw Tinder know people’s nature very well. They effectively use different psychological techniques and behavioral principles to onboard and engage users. Well done!

BTW, all images and trademarks belong to their respective owners.