Aircraft Instruments
(Case Study In-development)Pilots gain mastery over a long period of training. By simulating different real-life flight scenarios, this module aims at accelerating the process of mastery.

A screenshot of the final product in prompt state.
The Ask
The ask was to recreate and modernize an old module that was written in C++.
The Execution
I kicked off the mission by categorized efforts into three areas: Learning the basics of the domain; recreating visual elements; and programming dynamics and animations of the gauges, to stimulate flight scenarios.

To gain familiarity with the physical attributes, and develop some intuition on how to recreate them, I studied numerous physical examples of flight instruments.
This exercise also helped me map the limits of creativity for creating these visuals since certain characteristics such as color, typography, scales, and forms are somewhat universally constrained.
I also reviewed some relevant literature on the subject to undestand the skills in examination, from which two publications, predicablly, provided the most insights:
This exercise also helped me map the limits of creativity for creating these visuals since certain characteristics such as color, typography, scales, and forms are somewhat universally constrained.

I also reviewed some relevant literature on the subject to undestand the skills in examination, from which two publications, predicablly, provided the most insights:
- Kellman, P. J., Stratecnuk, T., & Hampton, S. (1999, April). Training pilots' pattern recognition skills: Perceptual learning modules (PLMs) in instrument flight training. In Proceedings of the 2nd Annual Embry-Riddle Aeronautical University Flight Instructor Conference (pp. 85-92).
- Kellman, P. J., & Kaiser, M. K. (1994, October). Perceptual learning modules in flight training. In Proceedings of the Human Factors and Ergonomics Society Annual Meeting (Vol. 38, No. 18, pp. 1183-1187). Sage CA: Los Angeles, CA: Sage Publications.
Building Blocks of the Visuals

I used Adobe Illustrator to recreate the isolated elements of the interface from which some will be animated.
Using a fixed unified canvas for all elements, I was able to ease the process of assembling tham on top of each other in CSS.
Using keyframes and temporary classes, I was able to mimic the real-life behaviour of the gauges and by involving a real life pilot, I was able to validate the look and feel of them.
Using a fixed unified canvas for all elements, I was able to ease the process of assembling tham on top of each other in CSS.
Using keyframes and temporary classes, I was able to mimic the real-life behaviour of the gauges and by involving a real life pilot, I was able to validate the look and feel of them.


An example scenario of a level turn answered incorrectly; for such cases, the correct response gets highlighted.
The Outcome
A modern responsive version of the app was successfully made and used to demo our capabilities for similar stimulation projects.
Case Studies
Select Projects
Employment Involvement Log (Sep. 2013 - Aug. 2022)
2022
Emergency Action Items in Flying
Interface Design
Template Design
Web Development
Template Design
Web Development
2021
Novel Education Modules Addressing the Underrepresentation of Skin of Color in Dermatology Training (Research)
Interface Design
Web Development
Motion Design
Web Development
Motion Design
2020
Analytics (Internal Tool)
Interface Design
Web Development
Web Development
2020
Training Visual Pattern Recognition in Ophthalmology Using a Perceptual and Adaptive Learning Module (Research)
Prototyping
Interface Design
Web Development
Interface Design
Web Development
2020
Marketing Partnership Facilitation
Design Guidelines
External Assets Hand-Off
External Assets Hand-Off
2019
UCLA Human Perception Lab Website Redesign
Web Design
Web Development
Web Development
2019
Conference Material Preparation
Motion Design
2018-20
Perceptual and Adaptive Learning in [dermatologic and mammographic screening] Cancer Image Interpretation (Research)
Interface Design
Web Development
Web Development
2018
Help Center: Features and Components
Design
Development
Co-Writing
Editing
Development
Co-Writing
Editing
2017-21
Advancing Theory and Application in Perceptual and Adaptive Learning to Improve Community College Mathematics (Research)
Interface Design
Web Development
Web Development
2017
Technology and Value Proposition Explainer Video
Motion Design
Storyboarding
Script Co-writing
Editing
Storyboarding
Script Co-writing
Editing
2015-2022
Archival, Recreation, and Version Control of Scientific Figures (Internal)
Asset Management
Motion Design
Vector Graphics
Figure Optimization
DeGuidelines
Motion Design
Vector Graphics
Figure Optimization
DeGuidelines
2018
Lab Website SEO Improvements
Usability Audits
Web Development
Web Development
2017
Component Redesign: App Launcher
Interface Design
Web Development
Web Development
2016, 2021
Business Finance Courseware: Dynamic Content Presentation Design
Web Development
Visual Design
Visual Design
2016, 2021
Development of a Novice Driver Training Module to Accelerate Driver Perceptual Expertise (Research)
Interface Design
Web Development
Web Development
2016
Company Logo Redesign
Branding
2015
Teaching and Learning Video Showcase: Improving Science, Math, Engineering, and Computer Science Education
Motion Design
Independant Work Log (2002 - 2022)
2019
Undisclosed Client (Publishing)
Visual Identity
Technical Consulting
Website Design & Development
WordPress Theme Development
Technical Consulting
Website Design & Development
WordPress Theme Development
2018
M-Cubed Design (Architecture)
Brand Design
Website Design & Development
Website Design & Development
2018
Be Fit Biz
Strategy
Web Design
Visual Identity
Web Design
Visual Identity
2017
Undisclosed Client (EME) (Technology)
Technical Consulting & Prototyping
2017
Undisclosed Client (Publishing)
Website Design & Development
Technical Consulting
Visual Identity
CMS (WordPress Theme Development)
Technical Consulting
Visual Identity
CMS (WordPress Theme Development)
2016
Wristocracy (E-Commerce)
Strategy
Prototyping
Website Design & Development
Prototyping
Website Design & Development
2016
Tilofy: Trend Forecasting App (Technology)
Prototyping
Technical Consultation
Technical Consultation
2016
Mixx Yoga (Fitness & Wellness)
Website Redesign & Development
Visual Design
Strategy
CMS (WordPress Theme Development)
Visual Design
Strategy
CMS (WordPress Theme Development)
2013
SoCal Stormwater Solutions (Environment)
Strategy
Visual Identity
Website Design & Development
Visual Identity
Website Design & Development
2012
Undisclosed Client (Interior Design)
Editorial Design
2012
Undisclosed Client (Medicine)
Website Design & Development
2010
Printing Division at Global Textile (Textile)
Website Design & Development
2009
Undisclosed Client (Art & Music)
Website Design & Development
2008
Undisclosed Client (Art & Music)
Website Design & Development
2008
Dustoe (E-Commerce)
Branding
Website Design & Development
Technical Consulting
Website Design & Development
Technical Consulting
2008
Undisclosed Client (Art & Music)
Website Design & Development
2007
Undisclosed Client (Art & Music)
Website Design & Development
2006
Dissolved Entity (E-Commerce)
Website Design & Development
2005
Moaser Theatre Company (Art & Music)
Website Design & Development
2003
Disolved Entity (Academia)
Website Design & Development
2002
Disolved Entity (Art & Music)
Website Design & Development
2002
Undisclosed Client (Oil & Energy)
Website Design & Development
* The information is not available either due to a confidentiality agreement or because the client has been dissolved or is inaccessible.