Tinder App Exercise - Cayman Santoro Design

I wanted to expand my skill set so I took a UI class to understand Figma. The premise of this particular project was to add a feature to a popular app that can be discerned at a quick glance. Tinder is a ubiquitous dating app with a central problem: people hate writing about themselves. What if Tinder implemented a universal, in-app personality test? It could help people who are uncomfortable writing profiles and help users quickly find compatible connections.

Tinder App Exercise

Concept, Research, Iconography, UI

Company

Tinder*

* Note: I am not a designer at Tinder

Tools

Figma, Adobe Illustrator, Adobe Photoshop

Role

Professional Solo Development Project

I was tasked with two objectives for this project:
1.) Recreate the UI of a popular app inside of Figma/Illustrator (to help us understand Figma's use and layout)
2.) Add a new feature to the popular app that can be instantly seen and discerned by a user

When the project was assigned, I discovered a common complaint from single friends: people’s bios on Tinder tend to be very lackluster. Besides photos and a brief bio, what can you tell about someone's personality with a quick glance?

There are multitudes of personality tests out there... what if there was an in-app test that everyone could opt into? It would make it easy for people to share details about themselves and could be quickly identified when swiping.

The Challenge

The process

At the time, I was reading about archetypes in Marketing. Carl Jung developed the concept of archetypes, which are universally recognized ideas or behavior patterns. I saw an opportunity to use the idea of archetypes as the basis for how Tinder users can identify themselves and attract good matches.

After countless hours swiping and talking to current users of the app, I found that people’s profiles could be separated into five groups. Each evoked specific emotions and desires, and I created five archetypes to match.
‍
I drew from Jungian archetypes for inspiration in choosing the five archetypes’ icons and names. Jungian’s archetypes tend to fall under universally recognized symbols based on mythological or literary figures. I decided to use symbolism from tarot cards or horoscopes. The imagery is distinct, eye-catching, and especially trendy with single women in urban areas — one of Tinder’s key audiences.

The Archetypes

The styling behind these was an amalgamation of playing cards, tarot cards, and horoscope symbols. I stylized them to be recognizable at a glance, along with having a clean uniform look overall.

The Magician

The Magician archetype revolves around knowledge and truth. This particular archetype believes that by gathering reliable, factual information and sharing it with others, they can make the world a better place.

The Troubadour

Not one to withstand an awkward silence, the Troubadour archetype lives to lighten up too serious of situations. The Troubadour wants to live in the moment and invites you to do it as well.

The Lover

The Lover archetype wants to achieve intimacy through close relationships, and create a special feeling in others. Developing connections with people around them, the lover is passionate and unashamed in fostering relationships and expressing appreciation.

The Ruler

The Ruler archetype seeks to prevent chaos by taking control. Rulers are defined by their need for security and order, they strive to gain and retain power. The Ruler sees itself as the role model for others to follow and seeks to provide leadership.

The Huntress

The Huntress archetype is a personification of the independent spirit. They represents autonomy and ability to pursue a life of her own choosing. A primary concern will be autonomy and attaining their personal goals.

There are many personality tests available, including popular options like: Myers Briggs, The Four Colors, and MMPI. But Tinder does not have an in-app personality test. It requires a user to go to another site, take one of many tests, and then self-report their personality type (which might not match up with other people’s tests).
‍
I wanted it to create a seamless experience by letting users take a test within the app and then opt-in to show their results. By consolidating various self-report personality tests, and using Tinder’s style guides, I developed a quiz that was easy to navigate.

The Personality Test

For the archetypes to be helpful, they needed to be easy to see and understand while swiping. I added the icons to the top right corner of profiles, rather than hiding it within their bio.
‍
Users can quickly learn a bit more about someone’s personality by looking at the archetype icon. And, if they want to learn more, they can click on the icon in the corner or go to their user settings and add their personality test.

Is it easy to discern?

I'm really glad I took this UI course, it helped me understand the power of Figma and how I can use it to collaborate with others. Plus, there’s something oddly satisfying about recreating a popular app's user interface from scratch.
‍
It was also fun to take a subject matter (literary archetypes) and create a clean look that aligns with Tinder's stylings. It forced me to get out of my design comfort zone, which is always a welcome challenge.

I was also surprised to find that the project changed some of my preconceived notions about online dating. After swiping through over 500 matches for research, I found over a third fell under the Troubadour archetype. There are a lot of joyous, carefree, and fun people looking for matches online.

Takeaways