IMG_2883_iphone5c_yellow_angle1.png

MyDiplomat Learning App [UX/UI + WEB DESIGN]

[visual direction + project lead]

MyDiplomat Learning App

Medium: Adobe Illustrator, Adobe Photoshop, user research, Game design // Role: visual direction + Project lead

The brief: Create a learning tool that would allow students and educators to simulate UN debate and international diplomacy in the classroom.

MyDiplomat promotional hero image. [Sarah Hopkins — Adobe Photoshop + Adobe Illustrator]

MyDiplomat promotional hero image. [Sarah Hopkins — Adobe Photoshop + Adobe Illustrator]

The brief: Create a learning tool that would allow students and educators to simulate UN debate and international diplomacy in the classroom.

 

Objective and Background:  

We received a small to create a “Model UN app game”. However, after talking to teachers and students, we realized that making the Model UN experience into an individualized smartphone game would fail to capture the important human interaction and debate elements that help students build important skills. We decided  to create a learning tool that would allow students and educators to simulate UN debate and international diplomacy in the classroom. We needed to create the app with smart design so the user would experience an interactive smartphone game without logic-based gaming features that would distract users from organic debate.

Process and Outcome:  

We decided that the app would serve as a supporting tool to guide users through an in-person group “game.” Players break into small groups and debate hypothetical challenges through the lens of a different country’s diplomat. One player would serve as the “facilitator” to guide the game (typically the teacher) and all players would have a chance to engage both  on their phones, and in person.

We constructed a creative brief with two stated purposes: 1) The tool needed to provide educators with the ability to incorporate international diplomacy lessons into a group exercise, and 2) students and educators needed to be able to use the same version of the tool simultaneously for slightly different purposes. The solution was “MyDiplomat”, a progressive web app that brings Model UN to students in the classroom and allows educators to lead a fun, interactive experience. 

We worked with designers and developers to realize the game as a step-by-step journey for the user. When they first log in, they are prompted to swipe through various “simulations” based on real and hypothetical global issues. “Swiping” is very familiar to Millennial and Gen-Z users, prompting them to engage in a familiar behavior upon their first interaction on the home screen. Throughout the simulation journey, various user behaviors such as swiping, continuing and engaging with accordion drop-downs create the feel of a true iPhone game, even though the tool is built on relatively simple information architecture.

Simulation selection view: “International Zombie Pandemic”. [Stock image used in mock up]

Simulation selection view: “International Zombie Pandemic”

Email Marketing Design. [Sarah Hopkins — Adobe Dreamweaver]

Email Marketing Design. [Sarah Hopkins — Adobe Dreamweaver]

Simulation selection view: “Global Climate Emergency”. [Stock image used in mock up]

Simulation selection view: “Global Climate Emergency”

In this project, I worked with Model UN experts to construct a series of game simulations that reflected the Model UN experience. I then worked with designers and developers to communicate, goals, and ideas through UX/UI design phase, development phase and testing phase. Together we created the user journey that served as the base framework for how we approached building the tool and writing the content. I also designed and created all supporting brand elements, including marketing emails and promotional assets.

Within the first two months of its launch, MyDiplomat gained more than 3,000 new users with no paid advertising. We’ve received positive feedback from educators, and the tool was even featured in the New York Times

I am continuing to analyze user data and feedback to inform future advancement and additional features for MyDiplomat. I am pleased with the way simple design choices and small user features could transform what might feel like a boring class project into an exciting interactive experience.

Email Marketing Design. [Sarah Hopkins — Adobe Dreamweaver]

Email Marketing Design. [Sarah Hopkins — Adobe Dreamweaver]