Nov 19, 2018

UX design + code


ended up deciding 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 which is a people to people / things to people/ people to teams chemistry score app.

This is the current state of the App, Test Flight version (beta) being used by selected users.

Below is the process in cronological order.

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. The idea of a friends match-making game-like App evolved into a self-discovery + personality classification ML based App:


Motion design (After Effects)

Motion design (Principle)

Onboarding (Xcode/Swift).  *Red fader is a marker.

Kinds ended up with a mixed architecture. Part MVVM and part RXSwift. The views are also Viper inspired, in the sense that they are distributed through a router instead of hardcoded inside ViewControllers. Firebase is the DB for this App.

Final Menu animation (Xcode/ Swift)

Kinds collection (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.