Contra - A Social Opinion Platform

My role: UI Design + Prototyping

My work contracting with clients

My responsibilities for Contra were to design the interface and create prototypes to test all design decisions. In addition to UI and prototypes, I had to produce artwork assets for production. The goal of Contra was to create an environment for people to debate their passions, be it politics or science.

Detail View

Handling detail views for Contra introduced a set of challenges: One of those challenges was how to segregate between who is for a particular topic or against. From the beginning, we embraced a set of colors: green and blue. The UI adheres these colors across the entire app to communicate the stances of people, be it in the main view, search or even detail. When designing the detail view, we tested tinting slightly the table cell to communicate the stance of people but that presented a few problems. One of the issues of this approach is that it fails to communicate who is against or for a topic. It’s confusing, and based on internal research, it doesn’t communicate a definitive stance. It was also difficult to handle user post by highlighting them. Another issue was consistency, across the UI, we color code the border of buttons when it comes to stances. It was important to be consistent across the entire experience and we decided based on internal testing to create a border around user profiles and tint them based on their position. This made the entire experience consistent and it was clear to users.

Creating a Post

Creating a post was a hugely important detail in the project and one that created a lot of challenges. It was very important to let people create post in a fast and efficient manner. Because of the nature of how Contra works and the information it has to collect before creating a post, it was critical to make it easy for people to make posts. When creating a post, Contra collects a title, for or against decision and a category. We handle a lot of this interaction in a single view, with the exception of selecting a category. To select a category we use Apple’s standard UITableView because of the ease-of-use and familiarity to users. After writing a title, selecting a category and writing the stances users can upload a post. There is the option to upload post with photos. However, after thoughtful consideration, we believe it was best for users to make this optional. Not every post requires a photo, there might not be a photo for every post, depending on the contents of the post.

Searching

Search is a big part of Contra. It lets people find other people in the app but more importantly: it enables people to discover topics they might be interested in discussing with others. We wanted to make it clear to users what they could search for which is why we pre-populate our search bar with suggestion. We also didn’t want to mix search results with people and topics. Doing so created a cluttered view and it was difficult to find what the user was searching for. We wanted to segregate searching and it was best to implement a familiar interface. We implemented a UISegmentedController as a way to separate between topics and users. This solution fixed the problem that was clutter if we were to treat every search query equally.

Profile and Settings

In profile we wanted to show other users what a particular user is interested in. We communicate this information in a few different ways. We communicate what they’ve recently voted in by showing the topics in the profile view. Showing what they’ve voted on doesn’t communicate with certainty what the user is interested in, they could’ve voted on things they saw in the Hot feed or topics they searched for. What communicated with certainty what they’re interested in is the topics they follow. In addition to including who they follow and who follows them, we also wanted to enable people to see what they’ve voted on and the topics they follow.