MENÚ
Usaid logo

Transparently showing the support given by the US government’s foreign aid agency in Peru

  • UI design
  • Front-end development
  • Electron

USAID is the U.S. Government’s primary foreign aid agency that helps end extreme global poverty and develop resilient democratic societies around the world. As with any government agency, they needed a way to transparently communicate the work they do to the people. We helped by developing a touchscreen application to present the information they needed to model to the public.

Usaid app

Designing a showcase for relief work

Because had already worked with the U.S. Embassy here in Peru previously, we already had a grasp on what would fit in best with their branding. We created high-fidelity mockups with iconography, typography, images and other brand identity elements in mind. The views envisioned included an administration panel for managing the data presented, and the front end, designed with a touchscreen layout in mind.

Usaid public mockup
Usaid admin mockup

Building a front-end experience from the ground up

Throughout the development process, we used HAML and SASS for our Ruby on Rails API. For the frontend app, we used Electron to create a cross-platform application, using HTML, CSS and ES6 JavaScript to power an easily understandable coding environment for our developers. jQuery was used to give life to key elements of the app by providing some attention grabbing animation.

Creating with touch in mind

Usaid touchscreen

To display the content, our touchscreen desktop application was used on a ViewSonic Totem in the U.S. Embassy in Peru. When categories are selected, a list appears with the subcategories belonging to each category. These contain individual cases in which images and videos are shown with a short description, providing information on each aid project accomplished by USAID.

Look at our case studies