Design Prototyper
personality-grid2.png

Personality Compatibility App

UI Design

In undergrad, I discovered how fun it is to compare your personality with friends and people you meet. However, there wasn’t an app or website that made comparing easy to do.

The app is unbuilt, but it would be a fun project to eventually tackle. Especially since there are some 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

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 in Sketch

Initial UI in Sketch

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.

📍 San Francisco
© Jordan Roy White