Nov 19, 2018
 @ 
design

Friends' match making UI development

I

decided to create an ecosystem instead of only one App. The ecosystem will feed on the digital personality data and will run applications on top of it starting with friends-match and team-match recommenders.

For the friends match-making solution, I ran dozens of different prototypes around two different core journey paths: Onboarding (choosing avatars), Making friends (room navigation and match).

User flow prototyping: Create room (geo-location sensitive).

The concept I moved forward with was beta-called "wing-friend", a very connected companion that introduces people. This prototype also helped me validate the idea of behavioral avatarsinstead of photos (which was well received by users).

Above you can see the room creation and room navigation flows. Notice also the presence of "Jung", how I beta-named the "common friend".  The Ai is the one making the introductions. This came from a strong piece of evidence in the research pointing to the fact that people prefer to be introduced to each other by a common friend. The idea here was to test having a interface functioning as a common friend. Another validation was the idea of using avatars. The avatars were related to personality characteristics and drivers of decision.

Onboarding. Based on Jungian theory (real Jung, not MBTI), the idea was to start by assigning a main avatar and then allow users to select further "kinds" that match their behaviors and preferences.
"The prototypes here, along with others, were used to validate two critical journey paths: Onboarding (main Kind selection) and Room navigation (match). Interviews after user sessions revolved around how people felt about the "wing-friend". The idea of users talking to a common friend first, which would then ask if the introduction could procceed, was received with warmth by users, many liked the concept of a proxy, a friend in the middle, one that could filter for rejection removing the awkwardness of the situation. Did the person rejected the introduction? Was it just busy? This "zero-reject" proxy brought in a lot of enthusiasm for the concept, mainly comming from introverted users".

Below the initial interface for the first solution, a making friends App  beta-named "The Kind".

The Kind, final version UI

This concept evolved into KINDS.

Login

Motion design (After Effects)

Motion design (Principle)

Onboarding (Xcode/Swift).

Reorganizing kinds (Xcode/ Swift)

Old prototypes (first version - deprecated) 

Below some of the coded prototyupes for the first UI version (outdated).

Moving to the setup of the user kind decks. Users can add other behaviors/ styles to their deck. Things that represent them.

The game board for the first version. I'm using Metal to boost performance.