Logo Salazarpardo Design & Development

Cover Image for Chango

Chango

Civic engagement web app

Brand DesignProduct DesignUIUXFront-endBackend


My role
  • Information architecture
  • UX flows
  • Wireframes
  • Low to High Fidelity prototypes
  • Visual design
  • Development (Backend and Frontend)
  • DevOps
  • User research

Overview

Civic engagement progressive web app (PWA). Personal project, designed and developed as a proof of concept. Geographic Information System (GIS) with social features intended to make civic engagement fun.


Challenge

The idea of using a social-enhanced GIS as a civic engagement tool had been in my mind for a couple of years. In 2018 I finally had a few months to work on it. I challenged myself to design, code, deploy, and launch Chango in only a couple of months.


Solution

Chango Chango: (chahng-goh) MASCULINE NOUN 1. (primate) (Mexico) a. monkey

Branding

The brand was created initially with the goal of making it friendly, playful, almost toy-like. I created a color scheme inspired by Mexican architect Luis Barragan use of color.

Chango Branding Splash screen

UX / UI / Prototyping

I then sketched initial wireframes and started working on the UX and UI design. I created an initial prototype using Adobe XD.

Chango Prototype Prototype

Development

For the tech stack, I worked with Meteor as it allowed Front End and Back End to use the same language (JavaScript), and provided easy to use tools for handling DevOps (builds, deployments, etc). I used Google Maps to show a map with the location of posts in it.


Result

  • Launched in under three months, from branding to final deployment
  • Allowed me to learn about devops, databases, and other backend technology
  • Served as a white-label product for similar projects using social media and geolocation capabilities (developed LaPazQuerida's site as a white-label product)
  • This initial version of Chango allowed us to test with real users and better understand their motivations