Work    Gigs

current work-in-progress –– documentation coming

Urban Tech – Dignity for All

Adobe After Effects, Illustrator, Photoshop, Sketch, p5.js, Zeplin, Keynote

Urban Tech, specifically their Dignity for All (DFA) Program/Curriculum

UX/UI Design and Graphic Design:

Transform the DFA curriculum into a digital learning experience for K–12 on a desktop/tablet format. In addition, improve the company’s overall visual design.

Illustration and animated story provided by Ranger Studios. I am responsible for all visual design and visual animation.

Context & Overview

Bullying Prevention & Conflict Resolution

Dignity for All (DFA) is a curriculum rooted in recent findings in neurobiology – a curriculum developed in response to the Dignity for All Students Act (DASA) enacted in New York State in 2010. The curriculum focuses on giving students and teachers the tools they need to build skills in reflection, empathy, and teamwork in order to create a safe and supportive learning environment for the entire school community.

Redesigned curriculum covers


Feels like I’m back on 3D Pinball as a kid

The current learning platform they’ve introduced around 19 years ago, that’s still being used (rarely) today

Windows 3D pinball

The interface and platform as a whole is struggling to keep up in terms of content and design. As the content is wrapping up, they needed a newer, fresher, more kid-relatable design. We decided to start small and focused on the interactive activities that are supposed to engage with kids.

“Perpetrating Rhymes” Mockups

All about the musical instincts

Here’s how it works:

  1. Kids split into 2 teams
  2. Each team takes turn to guess the name of a recent or iconic song based on the first 2 seconds
  3. Winning team gets 10 points
  4. Message breakdown and analyses

This game has historically proven to gets kids’ attention in a classroom setting. To turn it into a learning experience, the songs are specifically chosen for students to analyze at the end of each round. The songs’ messages are all related to social issues, violence, and conflict resolution.

Below are hi-fi mockups that are sent to developers, and a demo link.

Game Intro

Team A attempts a guess

Team A at the third attempt

Info Panel

End Game

“Fact or Fiction” Mockups

A fine line between being mean and bullying

Here’s how it works (both in single user and class scenarios):

  1. Six scenarios, user selects on a scenario to explore
  2. A small video excerpt begins playing with a statement
  3. Students decide if the statement is a fact or fiction
  4. Explanation are offered to some wrong answer
  5. Correct answers prompts a multiple choice question, further challenging the user
  6. Proceed to discussion section (that will take place as a class)

Below are hi-fi mockups that are sent to developers, and a demo link.

Game Flow: A Sample Scenario

Visual Designs

Facelift and consistency

Materials include publication, printed marketing materials, document reports, banners etc.  Scrapping old designs and establishing a design/brand language and consistency throughout.

Event Keynote

© 2019 Jonathan H. Kho
LinkedIn  //  Email  //  Résumé