Interaction design case: Como é Campina?

Designing user interface for a crowd sourcing project

Como é Campina? is a crowd sourcing project that captures your impression of what areas of the city are safer or more enjoyable and was part of David Candeia ’s research. Projects like this are based on recruiting volunteers to execute a large number, but simple, tasks and usually are embed on a larger platform with another projects, in this case

Given that the volunteers will execute a large number of the same task, the user interface should be worried about the daily devoted time and activity ratio of those volunteers. So, it must be motivating and easy to learn. Another requirement is that the task presenter uses a single web page.

The users will be presented to four pictures and have to answer, two types of questions: about safety and how nice a place is. To do so, they have to pick the most and the less safe or nice picture. It’s important to the study that the volunteer don’t misunderstand the type of question, so we associate those questions with icons and colors.

All elements is on the screen, in any devices

For this project succeeds it was necessary a marketing campaign and engagement in social networks. We have to consider users coming from various sources and devices. So, we adjust the screen elements to fit all elements on a single screen, regardless of device, and within reach of the thumb.

To create a stamp marker effect in the micro interaction of choosing a picture, we add some CSS transitions that changes the icons size and opacity properties. Furthermore, the change of question happens too fast to be noticed, so we also add a fade effect in the transition of one question to another to simulate a page refresh and make this change more clear.

Full interaction with the task

Technologies used: Bootstrap, AngularJS