<div class="statcounter"><a title="site stats" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="//c.statcounter.com/390358/0//1/" alt="site stats"></a></div>

ELearning Developer
Multimedia and Graphic Designer

experience & education

 

Senior ELearning Multimedia Designer/Programmer - Leidos, Inc.

Sept 2022 - Mar 2024: Created interactive and engaging eLearning and eBooks as part of the Mobile Applications and Gaming for Intelligence Courseware ("MAGIC") team supporting the Department of Defense and related industries.

More3/15/2024
 

Sr. ELearning Multimedia Developer and Graphic Designer - Leidos, Inc.

1/08/21 - 09/02/22: Designed and developed ELearning, multimedia, and graphic solutions for a government contractor supporting the FAA.

More1/8/2021
 

Principal ELearning Specialist - BAE Systems, Inc.

1/07/19 - 01/07/21: Sector-level Sr. ELearning Multimedia and Graphic Design specialist for BAE's Electronic Systems sector.

More1/7/2019
 

Sr. ELearning Multimedia Developer and Graphic Designer / Consultant - Fidelity Investments

03/11/11 - 12/31/18: ​​​​Sr. ELearning Multimedia Developer and Graphic Designer / Consultant for Personal Investing Learning & Development group.

More3/7/2011
 

Freelance - 2004-2017

Freelance ELearning Multimedia Developer and Graphic Designer supporting corporate and higher education clients.

More12/31/2017
 

EDUCATION

Masters degree in Educational Technology (not completed); and Bachelors of Science, Psychology - Texas A&M University (Graduated)

More12/19/2008

elearning

  • Interactive Learning Objective Generator (2024)

    Storyline 360. I designed and programmed this interactive app to support a train the trainer course for new instructors. Assets designed and developed using Photoshop and Illustrator. Select the link at the bottom to view live demo.

    Learning Objective Generator and "SMART" Goals

  • Train the Trainer - eBook Module (2023-24)

    Module covers training overview and requirements. Built with Storyline 360 and visual (images, video, animations) assets built using AI image generator, Photoshop, Illustrator, After Effects, and Premiere. Select the link below to view live sample.

    Train the Trainer - eBook Module (2023)

  • Global Support Ops - eBook Training Module (2023)

    Built using Storyline 360, with assets built using Photoshop, Illustrator, Premiere, and After Effects. Misc examples of tab interface, flip card reveals, animations, video, et al. Select the link below to view live sample.

    Global Support Ops - eBook Training Module (2023)

  • KSR Fundamentals - eBook Training Module (2023)

    Storyline-built; assets built using Photoshop, Illustrator, Premiere, and After Effects. Select the link below to view live sample.

    Fundamentals eBook module

  • Interative Radar Display Training Demo (2022)

    Semi-interactive, simulation of control tower radar display control. Mimics the general experience for a tower controller and how they'd interact with the screen while monitoring flights. Built in Storyline (using multiple variables and triggers); with video animation captured using Storyline's screencasting function, audio edited in Adobe Audition, and additional visual assets built in Photoshop and Illustrator.

    CTRD Demo (2022)

  • Unmanned Air Vehicles - Storyline (2021-22)

    Storyline 360 built FAA course module. Animation created with Vyond, and all other visual assets designed and created with Photoshop and Illustrator.

    UAV - Module (2021-22)

  • Navigation Module (2021)

    Built using Storyline 360. Animation built in After Effects, audio edited using Adobe Audition, and other visual assets in Photoshop and Illustrator.

    NAV Module (2021)

  • Storyline Course with Branching

    Online example includes an AI help “chat bot” (Cluelabs). Open the link below, and look in the lower right of the window (Click the ? chat bubble). Select the link below to view live sample.

    Storyline Course with Branching

  • Misc Storyline Layouts (with and without Motion Gfx)

    Used After Effects to create motion graphics and placed clips into Storyline. This sample includes both motion layout and 100% Storyline layout themes. Select the link below to view live sample.

    View sample layouts

  • Storyline Title Slide (2022)

    Animation in After Effects; built in Storyline 360

    Tech Title Slide Layout/Animation

  • Airline-Themed Storyline Template (2021)

    Starter template designed in Storyline. Background and static visual assets created using Photoshop and Illustrator (animation was done within Storyline).

    Airline Themed Storyline Template

  • Storyline Micro-ELearning Interface

    “M.E.M.O.” = Micro ELearning Mastery Opportunity: Interface designed using Adobe Illustrator, Adobe Photoshop, Vyond, and built and published in Storyline. Concept created by Kathy V. as a means to socialize/increase knowledge ELearning design standards for non-designers tasked with ELearning development Select the link below to view live sample.

    M.E.M.O.

  • Storyline with Vyond Animated Content

    Cost of not hiring the right employees. Built in Vyond and published in Storyline. Select the link below to view live sample.

    “Hiring@OurCo”

  • Storyline Sample

    Standard course built using Storyline, visual assets/graphics in Photoshop and Illustrator. Select the link below to view live sample.

    Storyline Sample

  • Storyline with Animated (MP4) Content

    Storyline built demo of software application. Assets designed and developed using Photoshop, Illustrator, and Storyline's screencasting app. Select link below to view live demo.

    Lexia Demo

  • Storyline with Animation (Originally created in Flash)

    Storyline built demo of software application. Assets designed and developed using Photoshop, Illustrator, and Storyline's screencasting app. Select link below to view live demo.

    Lexia Demo 2

  • Storyline Template Designs

    Low-poly template design in multi-color options. Select link below to view live demo.

    Storyline template designs

  • Captivate Sample

    “How to Create a Custom Character in Vyond.” Animation built in Vyond. Compiled and published in Adobe Captivate.

    Captivate Sample

  • Gamification - Authorware Course

    My first ELearning project, 2001. I designed and developed a mandatory employee Information Security Policy Awareness course with interactive scenarios and games within a relatable, customized visual interface built using Authorwae and Adobe CC. (Note: Since modern browsers do not support Authorware web-published content, I had to create a screencast video on my laptop running an executable, or “.exe” packaged version of the course to demonstrate it in action.)

    https://360.articulate.com/review/content/1a7a15b7-b81f-4393-aeac-24269616c100/review

multimedia / animation

  •  

    Vyond animation with Interactive Storyline ("KV's Office")

    Vyond animation with background graphics created using my iphone and Photoshop; and audio narration recorded on iphone; and then edited using Adobe Audition, along with background music. CLICK LINK BELOW TO VIEW INTERACTIVE STORYLINE - Watch the animation all the way through to get to interactive Storyline. Developed and published in Storyline.

    View Storyline interactive version here!
  •  

    Vyond Animation

    (Closed captioned version coming soon)

  •  

    Vyond Animation

  •  

    Vyond Animation

  •  

    Vyond Animation

  •  

    Flash / Adobe Animate - Animated Course Introduction

    Animation originally created using Flash. Converted to MP4 (using Adobe Animate). Imported into Lectora developed course.

  •  

    Performance-Based Interviewing - Course Intro

    Clip originally created using Adobe Flash, and incorporated into a Lectora-built course. Converted to MP4 using Adobe Animate (cc added in post).

graphic / user interface design

Multi-format examples throughout the years. Samples here include photo retouching, engineering diagrams, medical illustrations, engineering UI, to learning interfaces, logo design, and many more.

  • Engineering UI - Remote Turbine Control Monitoring System

    User Interface - User interface designed for a remote turbine control monitoring system. UI software: Wonderware InTouch.

  • Engineering UI - Remote Turbine Control Monitoring System

    User Interface - User interface designed for a remote turbine control monitoring system. UI software: Wonderware InTouch.

  • UI designed for online interactive job aid I created using Domiknow, Illustrator, Photoshop, and CSS styling for various design elements.

    View CMO job aid

  • Illustrator/Photoshop

    Used Illustrator and Photoshop to modify this infographic to create an engaging user interface in Domiknow to create an interactive job aid.

    http://kmversteeg.epizy.com/flow/find/index.html

  • User Interface

    Landing page/portal mockup - Photoshop.

  • User Interface

    Landing page/portal mockup - Photoshop.

  • Landing Page (web)

    Landing page/portal design. Photoshop and built using Lectora, published as web page. Modified published HTML output and added customized CSS styling.

  • Course Intro Page

    Web page built using D2L Brightspace (web-based course content management system); graphics designed using Illustrator and Photoshop. Modified HTML source code and applied CSS styling throughout to create consistent aesthetic to match overarching brand. I created several of the "badge" graphics which were awarded at the completion of each module in the series. (several examples included in this portfolio)

  • Course Module Intro

    Built using Brightspace; banners/graphics/badges designed in Photoshop and Illustrator. Modified HTML source code and applied CSS styling throughout to create consistent aesthetic to match overarching brand.

  • Course Module Intro

    Built using Brightspace; banners/graphics/badges designed in Photoshop and Illustrator. Modified HTML source code and applied CSS styling throughout to create consistent aesthetic to match overarching brand.

  • Course Module Intro

    Built using Brightspace; banners/graphics/badges designed in Photoshop and Illustrator. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic.

  • Course Intro

    Built using Brightspace; graphics/banner designed in Photoshop and Illustrator. Created a brand palette using hex colors. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling with chosen hex colors throughout to create consistent aesthetic.

  • Course Intro Page

    Built using Brightspace; graphics/banner designed in Photoshop and Illustrator. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic.

  • Fictitious logo

    Branding design/logo. See it in context at the link below.

    http://kmversteeg.epizy.com/flow/cmo/index.html

  • Course "Logo" Splash Screen

  • Internal Product Logo

    Logo designed for an internal audio service and podcast. Illustrator and Photoshop

  • Internal Product Logo

    Logo designed for an internal audio service and podcast. Illustrator and Photoshop

  • Customer Support - Volunteer

    Logo image I designed and contributed to support Market Basket customers in support of their workers who went on strike in 2014.

  • Cover Art

    Photoshop and MS Word - designed this cover art for a software setup manual.

  • Marketing/Proposal Cover Design

    Engineering firm - Designed all standard marketing printed materials, including this proposal book cover.

  • Illustrator and Photoshop

  • Illustrator and Photoshop

  • Illustrator and Photoshop

  • Illustrator and Photoshop

  • Illustrator and Photoshop

  • Illustrator and Photoshop

  • Illustrator and Photoshop

  • Illustrator and Photoshop

  • Illustrator and Photoshop

  • Medical Equipment Illustration

    Illustrator - designed this visual asset for a medical online course.

  • User Interface

    User interface designed for a remote turbine control monitoring system. UI software: Wonderware InTouch.

  • User interface

    User interface designed for a remote turbine control monitoring system. UI software: Wonderware InTouch.

  • Engineering Marketing Diagram

    Diagram imported from AutoCad and modified in Corel Draw (vector illustration tool, similar to Adobe Illustrator) and used in 4-color printed marketing materials.

  • Engineering Marketing Illustration

    Diagram created in Corel Draw (vector illustration tool, similar to Adobe Illustrator) and used in 4-color printed marketing materials.

  • Engineering Marketing Illustrations

    Diagram imported from AutoCad and modified in Corel Draw (vector illustration tool, similar to Adobe Illustrator) and used in 4-color printed marketing materials.

  • Engineering Marketing Illustrations

    Diagram imported from AutoCad and modified in Corel Draw (vector illustration tool, similar to Adobe Illustrator) and used in 4-color printed marketing materials.

  • Marketing Brochure

    Designed using Photoshop, Illustrator, InDesign, and published as PDF.

    View full brochure PDF

  • Full page magazine ad

    Advertisement in SHRM magazine for MindEdge (Online learning provider for Corporate and Higher Education - mindedge.com). Designed using Photoshop and Quark Express, output as PDF. Client wanted minimalist style. I chose this image to convey the message, and the client loved it.

    View full ad

  • High School Event Program

    Designed using Photoshop, Illustrator, and published using MS Word (The school wanted to have an editable file of this for future use, and they , used MS Word)

    http://kmversteeg.epizy.com/doc/rDay.pdf

  • Photo Retouch

    Used Photoshop to create image on right from image on the left.

  • Silly

    Spoof on a Monty Python classic. Photoshop

  • Me

    Fun with Photoshop :)

  • “Spunky”

    Based on black and white photo (taken by Matt Wall, ~1970. Family dog, Collie/German Shepherd/Beagle mixed breed.)

  • T-Shirt Design

    Commemorative T-Shirt design for a group of friends who traveled to see the Tour De France in 2002.

  • Birthday Banner

    Photoshop and Illustrator - for my favorite Father in Law :)

  • GoodReads Maya Angelou > Quotes > Quotable Quote

  • Butterflies Illustration

    One of my first digital drawings - I used CorelDraw and drew this from scratch. (This is a colorized copy of a photocopy as I no longer have the digital file)

  • Visual Asset

    Visual aid "neon" sign created using Photoshop - used as a visual asset for an online course.

  • Sumi-e

    My one and only attempt at Sumi-e painting.

    Sumi-e: All You Need to Know About Japanese Ink Painting

  • MT

    Coolest dog on the planet. Hand sketch from a photograph. (In case you're wondering, she's wearing doggie rain boots which were unfortunately, one size too big. She looked a bit like a Queen Anne chair wearing these. She stood still long enough in them for me to take the original photo, then promptly kicked off and sent all four boots flying, never to be seen again.).

  • Digital watercolor

    Used iPad ArtCanvas app to simulate watercolor painting

  • 2022 Watercolor

    First attempt at watercolor painting. :)

website layouts (brightspace/sharepoint/jive)

Financial - Resource Library - Brightspace site. Brightspace resource library layout template (early draft). I created all of the graphics (including banner - designed to be cohesive with group's brand ID), and the animated gif (lower right images is a rotating image). Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Home page for financial course (Brightspace) - Brightspace site. Starter page for a series of microlearning modules. Upon completion of each module, the learner is awarded a badge. There are 6 modules in the series and I designed 4 of the 7 overall badges: the overall FFPR program completion "trophy" badge; the "Money Mover" module badge, the "Service Ambassador" module badge; and the "Tools of the Trade" module badge. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Service Representative Microlearning Module - Work Tools (Brightspace) - Brightspace site. A microlearning module - used as part of a series, or it can be used as a stand alone lesson. I designed 4 of the 6 module gaming badges, including the overall course badge of completion (which can be seen on the FFPR page in this gallery). I designed the overall FFPR program completion "trophy" badge; the "Money Mover" module badge, the "Service Ambassador" module badge; and the "Tools of the Trade" module badge. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Service Representative - Microlearning Module - Processes - Brightspace site. Another example of a focused "microlearning" module for new service representatives. When they complete each topic successfully, they achieve a "badge" - see in middle of example. I designed the overall FFPR program completion "trophy" badge; the "Money Mover" module badge, the "Service Ambassador" module badge; and the "Tools of the Trade" module badge. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Service Representative - Microlearning Module - Service - Brightspace site.Another example of a focused "microlearning" module for new service representatives. When they complete each topic successfully, they achieve a "badge" - see in middle of example. I designed the overall FFPR program completion "trophy" badge; the "Money Mover" module badge, the "Service Ambassador" module badge; and the "Tools of the Trade" module badge. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Financial Planning Training & Resource Portal - Brightspace site that served as a training portal for wealth management group planning representatives. I created all of the graphics, including the branded banner (to achieve a cohesive look with the group's overall brand - I incorporated the leaf close up as the background to symbolize growth) animations, and pulled it together in Brightspace. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond
Internal Customer Service Training & Communication site - Designed and created all graphics, layout in Jive/SharePoint. Tools used: Jive, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, Dreamweaver, and Vyond.
Internal Employee Training Portal - Internal site created for training resources. Designed overall look and graphic elements. Jive/SharePoint. Tools used: Jive, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, Dreamweaver, and Vyond.
Mockup for a Support Site for an Executive Services group - Early prototype/mockup - Jive/SharePoint.

Financial - Resource Library - Brightspace site. Brightspace resource library layout template (early draft). I created all of the graphics (including banner - designed to be cohesive with group's brand ID), and the animated gif (lower right images is a rotating image). Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Home page for financial course (Brightspace) - Brightspace site. Starter page for a series of microlearning modules. Upon completion of each module, the learner is awarded a badge. There are 6 modules in the series and I designed 4 of the 7 overall badges: the overall FFPR program completion "trophy" badge; the "Money Mover" module badge, the "Service Ambassador" module badge; and the "Tools of the Trade" module badge. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Service Representative Microlearning Module - Work Tools (Brightspace) - Brightspace site. A microlearning module - used as part of a series, or it can be used as a stand alone lesson. I designed 4 of the 6 module gaming badges, including the overall course badge of completion (which can be seen on the FFPR page in this gallery). I designed the overall FFPR program completion "trophy" badge; the "Money Mover" module badge, the "Service Ambassador" module badge; and the "Tools of the Trade" module badge. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Service Representative - Microlearning Module - Processes - Brightspace site. Another example of a focused "microlearning" module for new service representatives. When they complete each topic successfully, they achieve a "badge" - see in middle of example. I designed the overall FFPR program completion "trophy" badge; the "Money Mover" module badge, the "Service Ambassador" module badge; and the "Tools of the Trade" module badge. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Service Representative - Microlearning Module - Service - Brightspace site.Another example of a focused "microlearning" module for new service representatives. When they complete each topic successfully, they achieve a "badge" - see in middle of example. I designed the overall FFPR program completion "trophy" badge; the "Money Mover" module badge, the "Service Ambassador" module badge; and the "Tools of the Trade" module badge. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond.
Financial Planning Training & Resource Portal - Brightspace site that served as a training portal for wealth management group planning representatives. I created all of the graphics, including the branded banner (to achieve a cohesive look with the group's overall brand - I incorporated the leaf close up as the background to symbolize growth) animations, and pulled it together in Brightspace. Modified HTML source code (to extend design complexity beyond “WYSIWYG” tool capabilities) to edit and apply CSS styling throughout to create consistent aesthetic. Tools used: Brightspace, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, and Vyond

Internal Customer Service Training & Communication site - Designed and created all graphics, layout in Jive/SharePoint. Tools used: Jive, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, Dreamweaver, and Vyond.
Internal Employee Training Portal - Internal site created for training resources. Designed overall look and graphic elements. Jive/SharePoint. Tools used: Jive, CSS, Javascript, Adobe Photoshop, Adobe Illustrator, Dreamweaver, and Vyond.
Mockup for a Support Site for an Executive Services group - Early prototype/mockup - Jive/SharePoint.

misc

Built and programmed in Storyline (using JavaScript etc). Internal ELearning review and communication site. View live link below.

Sample Review Site (Storyline - 2024)
 
Sample Review Site (Storyline - 2024)

professional associations

Association for Talent Development

The Learning Guild

Formerly The "E-Learning Guild."

IWA

International Webmasters Association

sorry!

I no longer have that original page on my site, but here is that chart image:

However...Click here for more complete bead size charts and related info. Hope this helps!

documentation

"CMO" Quick Reference Guide - Support resource for an online job aid I created using Dominknow Flow. This document provides a quick overview of the collateralized mortgage obligation (CMO) for customer service reps to print for quick reference. I wrote and designed this document using MS Word, and created all the graphics (Illustrator and Photoshop), output as PDF.
Company brochure - Document created using InDesign, graphics created in Illustrator and Photoshop.
Magazine advertisement for MindEdge Learning - Magazine ad created using Quark Xpress and Photoshop. Ad appeared in SHRM Magazine, ~2005-06
NDA (High School) "Ring Day" - Program, 2014 - Butterfly-themed event for Junior Class of local high school. Designed graphics using Illustrator and Photoshop, and compiled final draft using MS Word (School wanted to have an editable file they could re-use, so I used Word v. InDesign)

"CMO" Quick Reference Guide - Support resource for an online job aid I created using Dominknow Flow. This document provides a quick overview of the collateralized mortgage obligation (CMO) for customer service reps to print for quick reference. I wrote and designed this document using MS Word, and created all the graphics (Illustrator and Photoshop), output as PDF.
Company brochure - Document created using InDesign, graphics created in Illustrator and Photoshop.
Magazine advertisement for MindEdge Learning - Magazine ad created using Quark Xpress and Photoshop. Ad appeared in SHRM Magazine, ~2005-06
NDA (High School) "Ring Day" - Program, 2014 - Butterfly-themed event for Junior Class of local high school. Designed graphics using Illustrator and Photoshop, and compiled final draft using MS Word (School wanted to have an editable file they could re-use, so I used Word v. InDesign)

resume

Kathy Versteeg - Resume

Contact me