🦄 developer / designer
personality-grid2.png

Personality Compatibility App

A year ago I discovered how fun it is to compare your personality with friends and people you meet. However, there is no app for this currently in the App Store. This past summer while traveling, I designed an app to do just that: compare your personality.

The app is currently unbuilt, but is on my list of projects to eventually code as there are many interactions and animations I want to learn how to build.

3. first person complete.png
Brainstorming

Brainstorming

I began the design process by spending a lot of time thinking about how to enter 8  bits of information (4 traits per person). I wanted entering the data to be easy, fun, and look beautiful.

Brainstorming

Brainstorming

I considered multiple switch options, but ultimately passed because it left the screen cluttered.

Brainstorming

Brainstorming

Tried thinking out of the box with the UI, possibly using a wheel or unique collection of the options...ultimately to no avail.

Brainstorming

Brainstorming

This wireframe had the most influence on the final functionality. The options on screen are only what the user is currently choosing. After the user makes a selection, the buttons change.

Initial UI

Initial UI

The left shows what I thought the UI would end up being, but it turned out to be too cluttered. I also didn't like the style, so I started playing around with a more shadowy and colorful style.

UI Continuing to Develop

UI Continuing to Develop

These mocks are where you can see the UI really start to come together.

Style

Style

I pulled some from the style of Apple Music released in iOS 10.

Animations

Animations

As the user adds personality traits, the gray bar slides across to indicate which trait needs to be entered next. 

Comparing

Comparing

Once all personality traits have been entered, the gray bar moves to the bottom of the subview to form a down arrow.

To view the comparison, the user can either drag down or tap 'compare.'

The Comparison

The Comparison

The comparison shows the compatibility in friendship, work, and romantic relationships.