Logo
Vigilente Project
Vigilente Mobile App

Mobile App

Vigilente Mobile App

Project Details

Summary

Vigilente Electoral 2018 is a tool for citizens to promote a transparent democratic electoral day, by reporting anonymously any incidents that may occur in the elections of 2018 in Mexico.

  • My Role — Product Designer Lead
  • Main Duties
    • Estimate product cost & time frame effort.
    • Lead and coordinate the tasks of other project designers.
    • Perform usability tests.
    • Art direction.

The Project Context

Under the assumption of an increase in the use of platforms such as Facebook Live, YouTube Live, Twitter and Periscope to report risky situations in Mexican society, there is an opportunity to create an application that motivates the reporting of electoral issues in the 2018 Mexican elections, using a hashtag that identifies the reports in a centralized manner.

The second challenge was the time frame limit to execute the project before the start date of the fair and with enough time for the marketing campaign and promotion of the app.

The Project’s Approach

UX Research

In the discovery phase of the project, we conducted interviews with users to better understand their behavior and opinion regarding participating in citizen participation initiatives. We learned what app apps they use, how often and the reasons that motivated them to use them.

We understood the importance of anonymity in reporting and the context of use. Mainly, the app must be used very quickly so as not to lose the moment of capturing an incident that they want to report.

Personas

We detected two main Personas and two different roles. In particular, the differences were in the experience of using their mobile device and in their interest in citizen participation and trust in the reporting process through an app.

Journey Maps & Task Flow

With the information collected, we began the development of a Journey Map to detect user needs and experience triggers, mental status, and touchpoints. After few times elaborating hypothesis and validating them with users we ran a Task Flow to support fixing the pain points detected in our Journey Map research.

We completed the process involving the Development team to finally set the User Flow and define our Users Stories.

User Flow UX Research Design
Information Architecture

Working along with the Backend team we set out Information Architecture.

Architecture information ux design

And we transfer the acquired knowledge and the definition of user histories to our wireframes and prepare the prototype that we would use to perform usability tests.

Mobile UX User Flow Task analysis

After pitching to the Stakeholders and Development Team, the learning of this stage left us key points in the development of the product:

  • Due to transparency reasons, the user can not access the image gallery of his device and can only attach images taken at the time of the report to his report.
  • Even when the report is anonymous, the app must validate the device via SMS.
  • Users may be limited to internet access or do not want to consume data, so the app must allow the capture of photos and save a temporary to make the report at a later time without losing the capture data.
  • The app must access the GPS of the device to automate the location of the nearest voting station and thus generate the heat maps. The data is extracted from the Exif information.
  • Electoral crimes are typified, thus some users do not know them all.  Icons design allow easier reconnaissance of these.
Design & Prototype

The design challenge was to use a range of colors that did not reflect any political party or grouping. After an analysis of the political parties of the 2018 campaign, we determined the color scheme that we would use, based mainly on purple and gray with a magenta accent tone.

Invision Prototype Mobile UX UI Design

With the definition of styles, based on the principles of iOS and Material Design guidelines, the design was created in Sketch and the prototype was built in Invision.

User Testing

Before launching the product, we did a round of guerrilla tests to reveal possible usability issues. We ask participants to use it in a similar context as the app would be meant for, mainly on the streets with one hand. Following the principle of the “The One Thumb, One Eyeball Test for Good Mobile Design” by the Interaction Design Foundation.

Simplicity lies in removing the unnecessary and adding the essential.

The exercise allowed us to refine design elements that were not entirely clear and improve the design of the icons used in the application.

UI Design

With a task-oriented design approach, we execute a very simplified UI highlighting the key interactive elements to execute the report, using clear UX micro-copy and icons to help on visual support. We based the interaction on the native behavior of iOS and Android to avoid cognitive friction and findability issues.

Mobile Mockups UI Design

The Website

The development of the website was clearly identified within the User Journey as a support to the whole reporting process. The website would show the heat maps and a history of reports.

The idea proposed after the analysis of our users was to develop a site similar to Instagram, with a timeline of photos arranged chronologically, each card could contain up to 3 of the photos used in the report and would be shown as a carousel.

website mockup design UX UI

What have we learned from this project?

The Good
  • We discovered a lot of interest from citizens for participation in the transparency of elections.
  • Understand in time the mental model of users with several existing applications, such as Instagram, which we take advantage of to replicate in the experience.
  • A good integration of multidisciplinary teams for the ideation of the solution to the initial problem.
The Bad
  • Certain technical limitations and business rules led us to make decisions that did not improve the user experience, in particular limiting the user to only 3 photos per report.
  • The language used, ReactNative limited us to certain behaviors and micro-interactions.
  • The sample of users tested could not be meaningful to find weak points of the application.
  • Sarco Architects
  • Colima Fair App