UX/UI DESIGN / STRATEGY

Valence

Once derided as the domain of dateless losers, dating apps have managed to shake the stigma and enter into the mainstream. Since 2010 more people have met their partner using a dating app than through friends or work combined. Now, with the emergence of COVID-19 the online dating world has exploded even further. In March 2020, Tinder recorded its highest number of swipes in a single day: 3 billion. From March to May 2020, OkCupid saw a 700% increase in dates. And over on Bumble, video calls increased by 70%. As the industry booms, I decided now would be as good a time to see what all the fuss is about, conduct an analysis, and create a prototype of my own dating app.

YEAR
2021
TOOLS USED
XD, Illustrator, Photoshop, After Effects, Animate

Analysis

When Tinder was released in 2012 it revolutionised the online dating scene. Right swipe has become the prevailing signifier of our generation–shorthand for like, lust, and (possibly, hopefully, finally) love. You keep swiping, getting more and more cards. There's a level of unpredictability about who will appear next. Every time a user swipes, he doesn't know what to expect. It keeps people engaged and motivates them on action to look for a reward. This is great for user engagement and retention. However, as you are swiping you soon realise that your decisions are being driven primarily by superficial motivations. You might find the person in the profile physically attractive but how much do you really have in common with them? If there was away to highlight compatibility amongst users during this process I think it would greatly improve the swiping experience and help users to make better informed decisions.

Left and right vs. Up and down

Much like dating apps, TikTok’s popularity exploded during the pandemic. According to TechCrunch, the app surpassed two billion downloads in April 2020, one of the early months of quarantine. What can be learned from the UX design of TikTok? TikTok never makes you leave its first screen, the For You Page, a never-ending sequence of videos that flip from one to the next at the flick of a finger. Everything is served in one spot, designed to bring videos to you instead of making you find them. This vertical scroll is intuitive and addictive. At the time of writing, Snapchat and YouTube are both experimenting with a new, vertical swipe UX for their content, similar to TikTok’s swipe-up functionality.

Left and right swiping has become synonymous with dating apps. Can reverting to up and down scrolling challenge the status quo, and also help align the app with successful newcomers such as TikTok?

Sitemap

Wireframes

Identity

Prototype

Profiles

Unlike most dating apps which require a left or right swipe to advance through profiles, Valence uses vertical scroll navigation similar to TikTok’s highly addictive content feed.

There's no "aim" needed, just flick your finger and the profile will snap to your screen every time.

Swipe up to navigate through profiles in the feed.

Swipe down to view previously viewed profiles.

Compatibility Scores

Compatibility scores show how well you match with other users. Compatibility is determined using 5 criteria – physical, emotional, sex & intimacy, values, and life priorities.

Compatibility scores are calculated using answers from a questionnaire users take upon sign-up. Valence uses artificial intelligence to learn more about your preferences based upon the users you have liked previously. Valence prioritises showing more compatible users over less compatible ones, ordering them first in your feed.

Swiping left on the compatibility scores reveals more details about the user such as height, occupation, and education.

Profile page

Swiping left takes you to the user’s profile page. The profile page is where users can showcase themselves to potential matches.

Profile pages are split into two sections - 'About' and 'Posts'.

In the 'About section' users can post photos and videos, share their favourite films, tv shows, books, and other personal insights.

In the 'Posts section' users can share their social activity. Social activity includes status updates, location check-ins, polls, links, stories, photos and videos.

Users can reveal as much or as little about themselves as they please. Profile pages can be customised by adding a profile picture and a cover photo.

Send a like

Users can send a like to potential matches by tapping the heart icon.

When you send a like the recipient instantly receives a notification that you have liked them.

Along with the like, you have the option of also adding a conversation starter or witty comment to get the user's attention.

If you really want to stand out from the crowd though, you can send a star like. Star likes are prioritised over regular likes, so your profile will be pinned first when the recipient reviews their likes. Free star likes are limited but additional ones can be purchased.

Reviewing likes

The likes screen is where you can review the users who have sent you likes.

Likes are presented as 'profile cards' which can be swiped through like a carousel. Tap on a profile card to review the user's full profile.

Valence verdict uses your compatibility score to give you additional guidance on matching.

To match with the user simply tap the heart. To reject them, tap the x.

Content feed

The content feed is where you can see an aggregation of all the content shared by your matches.

Stories are located at the top of the screen and can be navigated through by swiping horizontally. Content shown in the Posts section include status updates, location check-ins, polls, links, stories, photos and videos.

You can add a post of your own by tapping on the + icon in the bottom right corner.

Messages

Messages are where the conversations with your matches live.

See which of your matches are currently online and pin preferred matches to the top of your inbox.

The 'your turn' prompts lets you know when you have a conversation that needs replying to.

Send photos, videos, gifs, voice messages, and even play games with your matches.

Review your match's details at any time directly from the conversation screen by tapping on their name.

Promotional Video

...

Projects