Work    Gigs



current work-in-progress –– documentation coming


Urban Tech – Dignity for All



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

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

Objective
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







Problem


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












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