Gateway Academy

Consultative Group to Assist the Poor, World Bank Group

Gateway Academy’s marketing site

Gateway Academy was an e-learning platform designed to help banks in Sub-Saharan East Africa implement better financial support for their poorest customers.

Developed under partnership with several other companies, we built a complex, robust digital product over several years using modern processes: rapid prototyping, agile development, styleguide-driven design, etc. Despite the NGO context and large number of stakeholders, our process and culture resembled a small startup.

In my art-direction role, I led a small team responsible for UX/UI design, front-end development, and branding. We began our alpha prototyping in early 2017, with content models and wireframe prototypes. A bit later we created a component library and styleguide to help the development team build coded prototypes. As we evolved the branding and visual design, we evolved the styleguide and UI library in parallel.

  • A video asset in a Gateway Academy course
  • A progress view in a course on Gateway Academy

A styleguide-driven design process

Over several years of continuous development, my design team built a comprehensive styleguide to document the brand, tone and voice, workflow, and our ever-evolving library of UI components.

Gateway Academy’s brand and UI styleguide