Managing Your Time as a Remote Worker

* Winner of the eLearning Designer's Academy Design Challenge *

Date: October 2023

Audience: Remote workers

Responsibilities: Research, instructional design, visual and graphic design, writing, storyboarding, programming

Tools: Articulate Storyline 360, Microsoft PowerPoint, Adobe Illustrator, Adobe Photoshop, Miro, Google Docs, Freepik, Pixabay, (Highlight reel created using TechSmith SnagIt and Camtasia)

Synopsis: This concept project originated via Tim Slade and the eLearning Designer's Academy Design Challenge. The style guide, course learning objectives, and content resources were provided, and from there I created an interactive learning experience and scenario-based assessment intended to educate remote workers on improving their time management skills.

VIEW PROJECT

The Problem

Peak Leadership, an e-learning vendor that creates soft skills courses to support enterprise talent development programs, has had multiple customer requests to create time management training for virtual employees. Employers want to increase productivity and accountability by improving how employees use tools such as calendars, messaging apps, video meetings, online workspaces, etc. Most of all, leaders want remote/hybrid employees to achieve balance when they are “always connected” and have the ability to work anywhere at any time.

The Solution

An interactive, scenario-based e-learning course was the right solution: simple to disseminate to a remote workforce across multiple time zones and easily customizable to any company's branding.

As a training for employees who engage in a LOT of screentime, I wanted to avoid an "information dump" or a linear series of slides people could thoughtlessly click through. Instead, I envisioned a visually-interesting learning experience, including a variety of activities and practice opportunities and a user-controlled learning path. Putting users in charge of their own learning creates both interest and buy-in, which, ultimately, results in understanding, retention, and, most importantly, RESULTS.

A custom menu allows users to choose their own path

Variables keep track of which modules users have completed

My Process

With the learning objectives and style guide provided, I began by reading through the content and organizing the information into cohesive units, using the mind mapping tool, Miro. The sticky-note feature worked perfectly for grouping and regrouping concepts and, eventually, organizing them into a system that flowed.

Course framework, created using Miro

I took the framework from Miro and, using Google Docs, created a text-based storyboard. I mapped out the onscreen text, visuals, and basic programming notes to simplify the upcoming development process. This portion of the design process sets up an instructionally sound foundation for the course and paints a picture for clients who are eager to see the vision for the final project. It's also an opportunity to easily make changes before development.

VIEW STORYBOARD

Text-based storyboard for the Main Menu slide

I used PowerPoint to create visual mock-ups. I imported PowerPoint slides directly into Storyline, making the job of translating the mock-ups to final drafts more efficient. I wanted to stay true to the client's style guide, which felt modern, professional, and sleek and had fun adding in unexpected elements. As I mentioned, I didn't want this training to feel like a click-through presentation, so I took care to present information in a variety of ways. I focused on keeping a cohesive feel through the use of color, text, and navigation.

An informational screen effortlessly incorporates the client's branding

The Strategies homepage uses dashed lines and a pennant-shaped logo to evoke a "gameplan" feel

The Tools menu coordinates with the Strategies page and includes a custom drag-and-drop element* Note: This interaction is not accessible for all users - I have prioritized inclusivity and accessibility moving forward

Crisp, colorful graphics create a pleasant design aesthetic for learners

VIEW PROJECT

Custom Seek-and-Find Activity

The Test portion of this e-learning experience was where I really had fun incorporating different assessment tools. The first assessment activity requires users to identify seven different distractions within a home office. This was my first time programming a "seek-and-find" activity, and it was a wonderful challenge to bring my vision to life.

I used a vector image of a home office composed of multiple, layered elements. I imported the entire image to Storyline for the slide background. Then, in Adobe Illustrator, I isolated the seven items I wanted for my activity. I made copies of those items and placed them precisely above their image on the background.

From there, I assigned a glowing hover state to each copied item, encouraging users to select the item when their cursor passes over it. Selected items appear in a picture bank on the left (in color), and then turn to grayscale in the original illustration. All of these features were built using states, layers, and triggers.

I'm very pleased with the final product. It requires users to think critically, pay attention to detail, and truly engage with the e-learning experience. A memorable, gamified learning activity solidifies a concept within a user's long-term memory and is the reason I chose this assessment tool for this module.

Seek-and-find activity built using Storyline and Adobe Illustrator: items appear to "glow" when a cursor passes over them

A detailed explanation appears with every correct selection

Found items appear in the picture bank on the left and then become grayscale within the illustration

Scenario-Based Assessment

Not only is scenario-based learning more engaging (and fun!), it's more impactful. I chose to simulate a conversation between the learner and a fictional manager to assess for understanding of calendar-blocking and communication. This allows users to apply their knowledge in low-stakes situations before applying it in real life.

The mocked-up desktop monitor and chat box add to the experience and help learners immerse themselves in the scenario. I also used the desktop setting to assess users' knowledge of time-management and productivity tools by asking learners to double-click the icon of the correct application for each remote working scenario.

A mocked-up virtual chat makes decision-making engaging and memorable

Users recall knowledge of time-saving virtual tools to make appropriate decisions

VIEW PROJECT

Project Takeaways

This project was entered into the eLearning Designer's Academy Design Challenge for October 2023. It won first prize, and founder, Tim Slade, said of the project, "What I loved about Danielle's course was her consistent design, engaging interactions, and attention to detail." Consistency, learner engagement, and attention to detail are trademarks of the work I do, and it was an honor for this project to be recognized by an industry professional.

Another peer said of the project, "Wow! This is amazing work. I love the way you used the logo to add details like the smartphone and the wall hanging. Very clever." I love adding small yet impactful interactive elements to projects and engaging users in a variety of ways throughout a learning experience. Who ever said trainings had to be boring?

Accessibility Note

Since the creation of this project, my understanding of WCAG guidelines and accessibility standards has grown. The drag-and-drop activity is not accessible to all users and is not something I would include in future interactions.

Project Recap with Tim Slade

View the live walkthrough and commentary of the October 2023 EDA Design Challenge below; this project is featured at 14:35.

LET'S CONNECT!

Applied Roofing Safety

Scenario-Based E-Learning

Programming a Button

Software Simulation

Moscow Mule 101

Mobile E-Learning Sample

Managing Your Time as a Remote Worker

* Winner of the eLearning Designer's Academy Design Challenge *

The Problem

The Solution

My Process

Custom Seek-and-Find Activity

Scenario-Based Assessment

Project Takeaways

*Accessibility Note*

Project Recap with Tim Slade

Applied Roofing Safety

Programming a Button

Moscow Mule 101

Accessibility Note