The next challenge as a student from Ironhack is about analising the interface of a widely known app through some of their flows.
I’ve chosen tinder, since it’s the most important dating app worldwide, and the work on its interface has alwasya amazed me, since it’s thought to be simple, straight-forward and easy to understand.
The flow I’ve chosen to analyse corresponds to one of the main tasks on Tinder: find a person the user would like to engage and communicate with them. I decided to check this flow, as it is extremely easy to use and it looks like it’s a process that has been in constant test and it’s been optimized to be desirable, usable and functional.
The UI elements used on this flow are very limited, as the app tries to be as minimalistic as possible, limiting most interactions to just a button or a text field. So, the list of components is:
- Buttons (for main actions such as like, unlike)
- Text field (used in the chat and also for quick messaging on the match modal)
- Dropdown menu (only used to perform actions over a profile: share, block or report profiles)
To get to the point where a user can engage with other, there has to be a match, which is both users liking each other. So, to unlock the option of chatting with someone, our user has to:
- Find a user they like by using the features available (search and discover sections)
- (optional) Read the other user profile, and find if they are compatible.
- Hit the like button or swipe right on the profile.
- Message the user using the text field no the match modal or using the messages section.
After identifying all the elements and the user flow, I created a prototype with Figma, and wireframed it. You can check it here.
