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.
I considered multiple switch options, but ultimately passed because it left the screen cluttered.
Tried thinking out of the box with the UI, possibly using a wheel or unique collection of the options...ultimately to no avail.
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.
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
These mocks are where you can see the UI really start to come together.
I pulled some from the style of Apple Music released in iOS 10.
As the user adds personality traits, the gray bar slides across to indicate which trait needs to be entered next.
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 shows the compatibility in friendship, work, and romantic relationships.