Compact of Mayors

Experience design for a international research organization

This project illustrates my ability to engage people in new concepts through visual, animation, and interaction design.


The Compact of Mayors is a global initiative to reduce cities' greenhouse gas emissions. Intended for mayors and city officials around the world, I designed a seven module online course on how to become compliant with the Compact of Mayors. In order to visually reflect the course's epic goal of empowering city leaders to make a difference in the climate trajectory of their city, my team designed each module to take place in a specific part of a virtual city. As the learner progresses through the course, the city becomes visibly improved; each module's location becoming more vibrant while trees, flowers, and wildlife begin to appear. The visibly improving virtual city, displayed at the beginning and end of each module, provides a subtle reminder to learners that their efforts to complete each module reflect a much larger local effort to improve real cities on a global scale.


A gif showing how the course map, illustrated by John Kim, becomes increasingly vibrant as the learner progresses through the course.


Within each module, I designed the interface to highlight the main sections of each module so that the learner is always aware of where they are in the module and how the current topic relates to previous and future topics. To accompany voice overs of material, I designed and developed compelling visuals, animations, and quizzes that serve as a way to chunk course content, thereby helping learners quickly retain key information.


A screencast demo of the some interactions within module 4.


Providing nonlinear learning paths, such as completing a stack of books in whatever order one chooses in the above screencast, allows learners to structure their own learning experience. In module 1 the course invites the learner to click parts of a city scene to learn more about the role of cities in combatting climate change. Every time the learner completes a section, the learner is invited to pick the next section that piques their interest.

In addition to emphasizing the epic nature of the learning goals and empowering learners to customize their learning paths, the course aims to capture learner attention by providing ample opportunities for learners to apply material through practice exercises with real-time feedback. To learn more about my approach to designing this course, click here.


A screencast demo of the some interactions within module 1.