CO+MUN
The first Anti-Corruption Citizen Observatory of Mexico.
Role
UX and Strategic Design Leader
Sectors
Technology, NGOs
Disciplines
Innovation, UX Design, UX Research, UI Design
Public Policy, Innovation, Design and Strategy
2018-2024
Context
The Anti-Corruption Observatory of Mexico of the CO+MÚN Project, which has been operating since 2018 to the present, is developed by the feminist anti-corruption organization Mexiro A.C.
The Anti-Corruption Observatory aims to monitor, evaluate and certify transparency, the Human Rights approach and the Gender Perspective in the 33 Anti-Corruption Systems of Mexico and its 165 institutions, which are intended to prevent, detect, control, investigate, detect and sanction administrative faults and acts of corruption.
To this end, a methodology was developed to obtain the information, analyze it and issue annual results in a granular manner; from the global results by System and Institutions to the documentary products obtained.
The results were published annually for 5 years. It is the most comprehensive study on the subject.
The methodology is summarized as follows:
1. Definition of institutions and systems that we observe
2. Theoretical-conceptual framework
3. System of criteria
4. Number of documentary products
5. Collection of information
6. Classification of information
7. Evaluation
8. Data cleaning
9. Data visualization
10. Certification (NFT)
[Image: Picture of the original ideation an planning, circa. 2018]
Challenges
Collaborate with members of civil society, public policy teams, international organizations and public servants to obtain qualitative and quantitative data, useful for our design process for later publication.
Design a web app to publish all the information in the most intuitive and feasible way possible.
Make the platform scalable, to be able to integrate new institutions, more information, as well as new sections each year.
Propose a digital solution for the transparency, human rights and gender certificates of each institution and system.
Users
Members of civil society, residing in the capitals of the States of Mexico, working on human rights, gender and anti-corruption issues.
Academic researchers from universities and local institutions in Mexico focused on justice, rule of law and anti-corruption.
Public servants from local institutions who work closely with anti-corruption systems.
Civil society organizations in Latin America, working on anti-corruption issues.
Design
Activities that I carried out in different instances, within the Design Thinking model.
These activities may not be strictly linked to each other, I show them as an example. Remember that the design process is not linear, it has a parallel and iterative character. Designers can immerse themselves in different phases depending on the situation.
Empathize
Understanding the constraints: interdisciplinary meetings to scope the design principles.
Together with the Mexiro team, I designed the key concepts to define the anti-corruption observatory, based on laws, theories and hypotheses. I also proposed a set of Design Principles, with a citizen-centered approach for the UX design of the project.
[Image 1: Citizen Transparency and Advocacy Matrix]
[Image 2: Criteria System]
[Image 3: Institutions to monitor and evaluate]
[Image 4: Co+Mun Design Principles]
Understanding the context of public servants with an Innovation Jam
In 2018, at the start of the project, I designed and facilitated an Innovation Jam with the Mexiro team and public officials from 2 states in Mexico (Hidalgo and Estado de México). The workshop aimed to gain key insights into their anti-corruption practices and contexts. We also offered them a workshop on technology and innovation and managed to sign a collaboration agreement.
[Image 1, 2 and 3: Activities I facilitated with the public servants]
Co creating with key stakeholders: Design Sprint with Citizen Participation Committees
A Design Sprint that I facilitated with Citizen Participation Committees from 2 States in Mexico (Puebla and the State of Mexico), to understand and design the basic elements of a citizen anti-corruption platform (2019).
[Image 1 and 2: Design Sprint session]
Understanding the main users
We conducted interviews and empathy maps with members of Civil Society. Together with Alejandra Enriquez, (UX Designer at Mexiro), we conducted interviews and empathy maps to understand the contexts, expectations and pain points of civil society members. We then created a set of affinity maps to identify the design requirements for the platform according to our findings.
[Image 1: Instances of the initial user research, 2019-2020]
[Image 2: Affinity mapping board, circa 2020]
Key findings
Public servants
They have difficulty accessing anti-corruption resources with reliable data on how other states in Mexico and other sectors work, perform or collaborate.
They want innovative tools to confront complex problems.
Citizen Participation Committees
Seek a platform for anti-corruption content to enhance their knowledge, organize advocacy projects, and access data for analysis and publication. They also want basic and specialized learning resources on anti-corruption.
Civil society members
They struggle to find clear information on the daily activities and transparency of anti-corruption institutions. They also seek reliable data on corruption and violence in their local area and are interested in the intersection of transparency, human rights, and gender perspective.
Public and Social Policy Platforms
Most of the references we analyzed present challenges in connecting with civil society. The data displayed are sometimes complex to read. Best practices have an intuitive way of displaying, navigating, presenting and downloading information in open data.
Define
Mapping user pain points: Personas and User Journeys
We map the scenario that must be passed to obtain anti-corruption data from governments. We do this exercise with each type of user.
[Image 1: Example of a journey map for a civil society researcher (2021]
Information architecture:
Mapping the information architecture Version 1.0 (2019) of the site map vs version 2.0 (2021).
[Image 2: Analogue prototype and First Version of the Information Architecture (2019)]
[Image 3: Information Architecture diagram (2021)]
Ideate
Understanding pain points and creating specific flows
We take the probable paths based on the research data, to create wireflows.
This is a sample for a user who enters the observatory, selects an Anti-Corruption System and browses the information by institution, to finally access the file repository to download the desired documents.
[Image: Wireflow design mapping the sections and set of tasks a user must go through in order to view the information of an Anti-Corruption System for the latest version of the platform. 2024]
Prototype & Test
Connecting the blocks: wireframing based on user flows
We performed low-fidelity iterations for each version of the platform, from beta to V1 and V2. The process helped us map the pages and components quickly so we could validate them with the research and development teams, and thus get their feedback to better define the scope of each version.
[Image: Wireframes we used for the V1 of the Platform. 2021]
Usability remote testings
Every year we conduct usability tests to improve the web application by measuring the effectiveness and efficiency of certain flows and tasks. We recruit users who are in our databases and who participate in civil society. We record the sessions and record observations of the sessions. We also organize and analyze the information with tools such as FigJam, Hotjar and Google Sheets.
[Image 1 - Usability Test board of sessions made in 2023, for the last version of the platform.]
[Image 2 - Usability Tests board of sessions made in 2021.]
Key Findings and Opportunities
Tests
We conducted 5 usability tests with real potential users to identify percentages of effectiveness and efficiency in 4 activities/journeys using a think-aloud technique.
Effectiveness
Most participants completed the missions with a high level of effectiveness. Average overall effectiveness of the 4 activities: 0.875 out of 1
Efficiency
Median overall effectiveness of the 4 activities: 245 seconds or 4 minutes. This could be improved with the UI, with shortcuts, calls to action, and links to the information that different user profiles are looking for.
Opportunities
Improve the interface of the observatory section with new, more intuitive components.
Consider designing a search engine for the observatory.
Final Designs
Developing a custom design system
Initially, we only had a limited library of components; as we iterated through the platform, we scaled component variants, discarded those we deemed untestable, and built new ones. It was very important to be aligned with the development team, conducting sprints and Quality Assurance review sessions.
After learnings and iterations, in 2022, we created a unified Figma file, with each component reviewed with the development team. These components were then developed and coded to be ready for iterations.
The entire site was programmed in Angular with an AWS host; for the charts included in the Observatory section, we used a library called D3.js and for the icons, we used Phosphor Library.
[Image 1 and 2: Overview of the components and variables of the Co+Mun Design System. 2023-2024]
New interface design for the V2 version of the platform
Once the components were consolidated, we carried out the corresponding iterations based on feedback from testing, as well as observations from heat maps.
The platform is optimized for the desktop version, since it was identified that most users (86%, 2022) access it through this means.
We created new UI components and designs for the latest release based on the research results, such as the search component and a completely new design for the Observatory page, which allows people to find the specific information of an institution of a system in a given year, in a more agile way.
Also, we collaborated with the Mexican Illustrator Maria Conejo to design an Illustration System.
[Image 1 and 2: Home page]
[Image 3 and 4: Observatory page]
[Image 5: Projects and Learning sections]
[Image 6 and 7: Details of an Anticorruption page]
[Image 9: Samples of the Illustration System]
Simplified content management system
Together with Kokonut Studio, we designed and developed a custom CMS so that it was much easier and more intuitive for the Mexiro research team (in charge of uploading the information to the platform) to do so.
[Image 1: CMS login page]
[Image 2: Edit page for an Anti-Corruption System]
[Image 3 and 4: Process of adding a new project in the 'Projects' section]
NFT Certifications
This experimental blockchain component allows us to certify the results obtained by each Institution annually. The idea behind it is to have an immutable component with a permanent record in a decentralized network, so that none of the Systems or Institutions could try to censor the information.
The design of the certificates is very visual, and the intention is that people could have the results in a single image. We used the design of the Transparency, Human Rights and Gender labels that we designed for the platform.
The first certificates (2019) were made with a tool called signature, which allowed us to make the first certificates with time stamps on the bitcoin network; The tool also allowed adding a URL with a document or image.
Later, in 2022, we issued the certificates using a tool to mint the NFTs on the Polygon Network.
[Image 1 and 2: Design of the NFT Certificates]
Impact
From the start of the project to 2024:
26 states went from not having any type of transparency to moving to the level of reactive transparency, that is, they have at least 60% of the documentary products available on their website but 70% or more were requested through information requests.
One of the important milestones is that the country went from not having any National or State System with a Gender Perspective and Human Rights approach to 10 Systems with a medium level, that is, in a range of 50% to 70% of the documentary products established in the Criteria System.
More than 17,800 documentary products from the anti-corruption systems were obtained, systematized and published, obtained from public portals and information requests.
Mexiro expanded its coalition and trained at least 10 local CSOs, thus strengthening the participation of civil society in Anti-Corruption Systems throughout the country.
18 National and State Anti-Corruption Policies that at least mention the Gender Perspective and the Human Rights approach as a cross-cutting theme.
comun.org.mx is the only website where you can find information on each of Mexico's Anti-Corruption Systems, including 5 of the institutions that comprise them, along with documents on their operation and legal obligations.
The site also scaled up, hosting an on-demand learning module with the School of Feminist Anti-Corruption Advocacy (EIFA). It currently has nearly 1,600 graduates from the last three years from 24 countries in Latin America and the Caribbean.
Credits
Project Director
Fernanda Galicia
Public Policy
Alexa Pérez, Fernanda Pacheco, Majo Bala, Gabriela López
Innovation & UX
Edgar Navarro (UX Lead), Alejandra Enriquez (Jr UX Designer)
Illustration
María Conejo
Development
Kokonut Studio
NFT Technology
Polygon, Crossmint