Kevin Santer portfolio

[spacer]

A concept project for online instructors.

Learn to use empathy and transparency in challenging student and parent situations.

Articulate Storyline 360, Figma, Inkscape, Mindmeister, Google Docs

[spacer]

The Problem

The client is APlus Online Academy, a hypothetical online for-profit school delivering course material for grades 6-12. ‍

The client noted the number of complaints from parents and students regarding transparency, empathy, and clarity in communication had increased. Stakeholders reported these concerns in the context of difficult conversations around many topics, including academic integrity, reporting student progress, and appropriate assignment feedback.

[spacer]

The Solution

I developed a scenario-based eLearning solution for many reasons:

The instructors live in many locations, and many work part-time. A self-paced eLearning situation is a good fit for those needs.
A scenario-based experience in a risk-free environment will increase the instructors’ familiarity with difficult conversations and provide practice applying them in realistic situations.
The entire staff of instructors will engage with the learning solution, which will promote consistent and appropriate applications of the techniques.
The solution will be available for training new instructors as they join the company and for refreshers when needed.

I considered and decided against alternatives, including live workshops, compiling and sharing customer service data, and creating job aids summarizing vital policy points. The scenario-based learning is focused directly on changing instructor behavior, while job aids and analyzing customer service data are not. Live workshops would be less efficient and cost-effective than the scenario-based approach.

[spacer]

My Process

As I have experience coaching online instructors, I served as a Subject Matter Expert (SME). I leveraged this experience to create an action map and focus items for the scenario. These formed the basis for a text-based storyboard. I then made a mood board, style guide, and visual mockups using Figma. I used these artifacts to develop an interactive prototype, implementing a portion of the scenario in Articulate Storyline. Finally, I implemented the entire project in Storyline.

At each stage, I asked for and used feedback from colleagues within the online teaching industry and the instructional design field.

[spacer]

Action Map

First, I defined a specific measurable and time-bound improvement and built an action map around it. I identified recurring problematic instructor interactions and prioritized them, along with recommended responses.

I picked three high-priority problems to build the eLearning experience. Each focuses on what the instructor should (and shouldn't) do to create a positive customer experience:

When a student judgment error is suspected, ask the student for an explanation.
Invite guardians to any discussions regarding student judgment error concerns.
Write a plan with any remedies the student may take.

The heart of the intended experience is anticipating an instructor's "incorrect" choices and guiding them to better ones.

[spacer]

Storyboard

The three focus items from the action map are the basis for my text-based storyboard. The learner faces a challenging student plagiarism situation and three questions. Each question proposes three response actions: a correct one and two that are less effective. A positive or negative consequence will occur based on the learner's choice. For negative results, the learner loops back to repeat the question; otherwise, they continue to the next one. In the initial stage-setting scenes, the learner meets a mentor character. The learner can seek advice from this character at any decision point.

The storyboard development was a critical opportunity to design authentic and rigorous consequences and to focus on "show rather than tell," relying on the learner's immersion in the story to provide information rather than explicitly stating it. This approach increases both engagement and memorability. As with the other development phases, I relied upon several feedback and revision cycles, using my colleagues' generous input.

[spacer]

Style Guide and Mockups

I developed a style guide and visual mockups using Figma. I made the style guide to ensure consistency in common elements such as color scheme, fonts, spacing, and buttons.

Using Figma allowed me to iterate quickly through variations on the mockups, beginning with a wireframe. I could define and modify common elements, reuse them quickly, and play with a rough prototype of the whole scenario. This flexibility was handy as I received feedback from reviewers and worked to incorporate improvements into the design.

This image shows how the video conference and texting layouts evolved from simple wireframes to their final state.

[spacer]

Interactive Prototype

Next, I built an interactive prototype in Articulate Storyline. It included fully developed slides for a portion of the scenario, from the title through the consequences of the first question. I could test the project on a smaller scale with this prototype and solicit colleague feedback. I could iterate more quickly, saving time on creating and editing before moving on to the full project.

[spacer]

[spacer]

Full Development

I developed the final product after incorporating the feedback for the interactive prototype. I was able to leverage “copy and paste” extensively, which speeded up the rest of the development.

I enlisted the help of colleagues again in my final testing, including the project’s performance on varied platforms such as phones, tablets, and different browsers. The project includes animation and transition effects, leading to fun moments like a ringing phone.

[spacer]

Takeaways

Creating this project gave me several takeaways:

The action mapping process was an essential element for focusing the project. It helped me prioritize the client's needs and choose which instructor behaviors to guide.
Developing the storyboard deepened my understanding of the "show vs. tell" approach and how to design realistic consequences for a learner in a safe environment.
I gained experience prototyping with Figma, honing my visual design skills, and learning how to iterate efficiently through versions. I also had the chance to use Inkscape to manipulate vector images, letting me fine-tune the visual experience.
I leveraged many features in Articulate Storyline that enhanced the simulation's interactivity, making it a more immersive experience for the learner.

[spacer]

Tools for math students and their instructors.

Gauge a learner’s readiness for a quiz and aid their preparation.
Save analytic data in a Learning Record Store (LRS) using xAPI.

Articulate Storyline 360, Figma, xAPI, LRS, Brightspace, JavaScript, HTML, CSS

[spacer]

The Problem

Instructors working for an online high school math instruction provider recognized learners were performing poorly on a particular assessment. These clients suspected the disappointing performance was due to a few causes but didn’t have a way to test their hypotheses directly.

[spacer]

The Solution

The solution has two pieces:

The first is a short quiz tied to the relevant state standards with links to supplemental resources. The quiz is low-stakes, as the results aren’t part of a learner’s grade, and they are encouraged to use the tool repeatedly until they are comfortable with the material. The application stores the quiz results and resource utilization data in a Learning Record Store (LRS).
The client instructors can download the quiz result and resource utilization data as an Excel file for subsequent analysis. Individual learner data and aggregated results are available.

[spacer]

Analysis

I interviewed the clients to gather their thoughts about possible causes. The two highest-ranked concerns were:

the need for more preparation by the learners coupled with inadequate self-assessment skills
an underutilization of supplementary resources.

We opted for a short self-assessment quiz for the learners, coupled with links to additional resources. I leveraged my knowledge of relevant state standards to develop questions aligned with the course’s objectives and to build a list of supplemental resources for each question.

[spacer]

Design

I iterated through screen mockups, incorporating client feedback and refining the look and usability.

As learners can take the quiz multiple times, building variety into the questions was important. I designed JavaScript code to generate a unique version of each question for each attempt.

For the analyst portion of the solution, the clients and I decided a general-purpose approach would be most effective in terms of time and cost. Rather than building a custom web app or Storyline scenario, we planned an Excel download of the raw data from the LRS.

[spacer]

Development

I developed the learner portion of the project in Articulate Storyline. I iterated through several versions using client feedback. We also enlisted the help of two students, gathering their input about usability and overall quality.

For the analysis side of the project, I developed two components:

A client-side web app with which an instructor can download the quiz result and resource utilization data from the LRS and make copies of example analysis tools
A server-side tool to retrieve the LRS data, format it as an Excel file, and serve it to a user for downloading

[spacer]

Implementation

We first launched the learner tool in one section of a course. It was available as a link from the course inside a Learning Management System (LMS) and via a link emailed to learners in the course.

After two weeks of use and some minor debugging, we added the learner tool to all current course sections and emailed a link to all enrolled learners. We notified the course instructors and provided them with an explanatory video and a link to the client app.

[spacer]

Evaluation

We conducted surveys of learners and instructors. The reception was overwhelmingly positive: learners felt the tool was helpful, and instructors found the data analysis informative.

There is substantial interest in expanding this approach to other units within the course and possibly to additional classes.

[spacer]