Design behind Tinder

Tinder is an app for dating to rule them all.

Most users: Millennials, 19–24 years old, single(>50%), male (60%), female (40%), 70% visiting other dating sites. Live in the city. People come to Tinder to get validation as well as other things like: pizza, hook-ups, discovering travel buddies, networking, stalking former classmates or discovering matches for single friends.

Some major goals of Tinder design include:

  1. eliminating the fear of rejection
  2. eliciting trust by adding credibility to the potential match
  3. providing minimal, but sufficient information about the potential match and make it easy to on-board new users

Tinder is not just a dating app, it’s a social discovery platform or it’s trying to get there.

While Snapchat makes it counter intuitive and deliberately complicated to navigate through the app, Tinder is there to make it a no-brainer experience. And it’s quite interesting, given they have similar majority of the user base characteristics.

Let’s dive right into the weeds of design and see what’s great about it:

1. In general the app is pretty intuitive with low cognitive load. But we can see that it got more complicated over time. Look at the main screen below:

In 2016 version we can see: restore swipe, Tinder Boost and super like buttons — these are monetization related, hence, placed into the most popular area. And switch to “Tinder Social”(swiping with groups) is placed on the top middle. Cards screen look sa bit crowded with 5 buttons (under the cards) of 5 different colors, maybe it was made deliberately for Millennials that would click on it out of curiosity (more likely to purchase the subscription). Also, it’s not quite clear what the button would do when you tap on its’ icon.

On the other hand, we have like/dislike buttons duplicating left/right swipe functionality. Most likely Tinder keeps it that way because in some of the countries people are not used to swiping (in that experiment when duplicating buttons were removed from the bottom, people in Indonesia couldn’t understand what was possible to do on the screen).

2. Card swiping is a very smooth experience

Take a look at the transitions — developers and designers have really taken the time to polish that experience. If you compare it to any other app that’s trying to copy card swiping move, Tinder will be far ahead.

Also, Tinder uses lots of iOS native elements and icons, colors and transitions.

3. Tinder really thinks about user struggles and helps users as much as possible

a) to make sure you have the best shot at being swiped right, they’ve introduced “Smart Photos” to show your most likable photo

b) they give you ice-breaker ideas and ability to send GIFs, although GIFs load is a bit slow(see below)

Messaging screen

c) On-boarding process is a no-brainer and creating a profile is very quick and easy. In most of the apps user will be asked to answer tons of different questons to ensure a better match. But on Tinder: location, common FB interests, school, career and common friends suffice to elicit trust. After all, in the real life people don’t walk around with their food or sex preferences stamped on the forehead.

d) tinder makes sure user doesn’t feel rejected by: having double opt-in logic (if there is no mutual like, user can’t message); user won’t get a notification when he was rejected or when his match is chatting to someone else, but not to him. In general, if user has multiple matches, it’s pretty hard to notice when you get unmatched. Also, unmatching process is not on the surface.

Here are some things that can improve design at Tinder:

“Successful match” screen

1. When “successful match” screen appears (see on your left), user has an option to send a message or keep looking for another match.

I suggest to explore the hypothesis about user wanting to check out more pictures of that new match before messaging. Using a heatmap on the “successful match” screen should reveal that need. You may see users tapping on the new match photo to see more, but now nothing happens.

2. With additional swiping navigation on top of the card swiping, UX gets a bit funky. Here is a couple of use case scenarios:

a) go to settings → return to the “cards” screen by swiping left → now if you try to go back to settings by swiping right , you’d “like” potential match instead

b) click on the card → get to the photos screen → swipe left multiple times to check out the photos → if you click on any photo while swiping left it will return you back to the “cards” screen, where swiping left will have the user “disliking” the potential much

This seems quite interesting, given that most of the users asked Tinder to implement “restore swipe” functionality, which now is a part of “Tinder Plus” (paid subscription package). I’d assume that UX is planned here in a way that user would likely to end up in the situation where he’d like to restore swipe.

3. Message menu on the top right is hard to reach on iPhone 6+ and it’s waaaaay outside of the thumb zone. Seems a bit off, given that we want users to message more often

Match details screen

4. From the match account details menu, when you scroll down to Shopify and Instagram details, reaching top left corner is hard(see on the left). At the same time the thumb zone is blank

5. Match management can be better thought through. Let’s take a look at the “Match screen” (below).

Match screen

We have a search bar, but honestly it’s not likely that the userremembers many names of people he didn’t meet. I’d check how often people use search functionality. Also with 189 matches user may want to know: who is on-line, who just added a new picture or has been active in any other way, people’s distance change -who out of 189 matches is the nearest to the user

6. In a group photo there is no way of saying who is the potential match, maybe face recognition or tagging like on FB can be helpful. However, let’s not jump to any solutions in this article.

I hope my two cents helped to some of you to develop your opinion on the design of Tinder app on iOS.

Please, let me know what are your observations on that matter:)