Home
Experience & Education
ELearning
Multimedia / Animation
Graphic / User Interface Design
Website Layouts
Professional Associations
Past Clients
Documentation
Resume

Home
Experience & Education
ELearning
Multimedia / Animation
Graphic / User Interface Design
Website Layouts
Professional Associations
Past Clients
Documentation
Resume

website layouts

Brightspace (Web course layout designs)
Jive (platform for internal website training portal and communication site designs)

Home page for financial course - 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 - 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 - 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 - 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.

Internal Customer Service Training & Communication site - Designed and created all graphics, layout in Jive.

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.

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

Home page for financial course - 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 - 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 - 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 - 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.

Internal Customer Service Training & Communication site - Designed and created all graphics, layout in Jive.

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.

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

Kathy Versteeg

Copyright © 2023 All rights reserved

Home