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 anonymously reporting any incidents in 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 app’s marketing campaign and promotion.

The Project’s Approach

UX Research

In the project’s discovery phase, 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 why they motivated them to use them.

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

Personas

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

Journey Maps & Task Flow

We began developing a Journey Map to detect user needs and experience triggers, mental status, and touchpoints with the information collected. After few times elaborating hypotheses 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 by defining the User Flow and the 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 capture photos and save a temporary to make the report later without losing the capture data.
  • The app must access the device’s GPS to automate the nearest voting station’s location and 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 allows 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 analyzing 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, we created the design in Sketch, and then we built the prototype 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 application’s icons’ design.

UI Design

We execute a very simplified UI highlighting the key interactive elements to execute the report with a task-oriented design approach, using clear UX micro-copy and icons to help with 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

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

The idea proposed after our users’ analysis 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.
  • 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, 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