Job Aids and Guides

Job aids and informational guides don’t have to be dull to be effective. I design these materials with a clean, modern, and professional visual style that draws users in and makes information easy to absorb at a glance.

My approach layers content intentionally—surfacing the most critical information first, followed by supporting details—so learners can quickly complete tasks while still having access to deeper context when they need it.

This user guide provided learners with introductory details about a software application they would use to complete their tasks. Originally, it was created as an HTML page enabling interaction through rollovers and clicks. The PDF version allowed use
This guide instructed users on how to order services for their end-users. Much of the content served as a reference for the codes needed to order these services, resulting in a significant portion of the information appearing in tables. To prevent th
This guide was designed to provide learners with information about the lifecycle of accounts they were responsible for managing. It was initially created as an HTML page with interactive elements, but later, due to environmental constraints, it was c
This guide was primarily informational, but it felt dry. I prioritized creating a visually appealing document that structured the information for easy consumption by learners. Since much of the content consisted of definitions, clickable interactions
This example focuses on the guide's design. The source content in this guide provided a series of codes that needed to be chosen to order specific services. Depending on the context, different codes might have to be selected. I developed a more visua

Added Interactivity

Most of the source documents consisted of extensive tables or long lists. To make the content more engaging, I incorporated interactive features. In CBTs, this included rollovers and drag-and-drop actions. For HTML and PDF documents, click-to-view interactions were implemented to maintain learner interest and organize the content more effectively.

The image gallery below provides a few examples of the interaction employed.

Clickable boxes were implemented to prevent multiple pages of reference details. In this example, users can click any blue box to view more information about that specific group.

Clickable boxes were implemented to prevent multiple pages of reference details. In this example, users can click any blue box to view more information about that specific group.

Once the blue button is clicked, a table appears below with the learner's information. In the HTML version of this document, an accordion-type animation was used to reveal the information more closely to the group.

Once the blue button is clicked, a table appears below with the learner's information. In the HTML version of this document, an accordion-type animation was used to reveal the information more closely to the group.

This is another example of how clickable boxes were used to provide additional information while keeping the document size limited. Here, the learner could click the title of an account type in the sidebar to learn more about it. This example also s

This is another example of how clickable boxes were used to provide additional information while keeping the document size limited. Here, the learner could click the title of an account type in the sidebar to learn more about it. This example also shows how on longer documents a table of contents (top left corner) is available for learners to jump to other sections of the document.

In the source material, this content was presented in a table. The decision to make this an interaction was both to engage the learner and to limit the amount of space this content would occupy.

In the source material, this content was presented in a table. The decision to make this an interaction was both to engage the learner and to limit the amount of space this content would occupy.

This example demonstrates another way to use clickable areas to show content. In both the HTML and PDF versions of this job aid, a pop-up was used so users could click on different parts of the form to learn more about each section. The pop-up was po

This example demonstrates another way to use clickable areas to show content. In both the HTML and PDF versions of this job aid, a pop-up was used so users could click on different parts of the form to learn more about each section. The pop-up was positioned near the relevant area to strengthen the link between the image and the information.

In some instances, the amount of content in the text box caused other content to be covered. To resolve this issue, buttons were added within the callout windows to allow users to hide the content, making any content that was hidden behind the callou

In some instances, the amount of content in the text box caused other content to be covered. To resolve this issue, buttons were added within the callout windows to allow users to hide the content, making any content that was hidden behind the callout visible again.

Previous

Presentations
Next

Additional Projects