Active Listening Basics: Remote Meetings an interactive e-learning module I designed and developed as follow-up to an Active Listening Basics instructor-led workshop I had previously delivered at AXA as part of the company’s “Development Days” series of employee training and workshops.
Development: Articulate Storyline 360
Visual Design: Adobe Photoshop, Adobe Illustrator, Chat GPT
Prototyping: Figma
The client company is a medium-sized financial services company (approximately 1500 employees), with workers located in multiple cities. Most meetings are conducted via videoconferencing. Managers had been reporting that productivity in these meetings was lagging. Analytics showed that in an average Teams meeting, fewer than 40% of participants were actively contributing. Lower than expected levels of engagement and participation in meeting of over ten participants was identified as a main factor that inhibits effective collaboration.
My team arrived at the solution of adding to the existing Active Listening course as a result of a Design Thinking workshop where the participants engaged in a “working backwards” exercise starting from a problem statement to identify steps that could produce the desired outcome.
The company needs to improve videoconference collaboration skills among its employees.
How? By increasing the level of engagement among virtual meeting participants.
How? By using active listening skills to help participants feel heard, valued, and more likely to contribute.
How? By being aware of opportunities where applying active listening can help in various situations:
As an IDEO-certified facilitator, I use the Design Thinking approach in both planned workshops and informal ideation sessions to explore and quickly identify potential solutions to gaps in learner understanding and the overall user experience.
Before preparing detailed storyboards or mockups, I like to start with a rough outline of the content in order to get a high-level idea of how the course will flow. In this project, I consulted with various SMEs (in this case, project managers and scrum masters who lead virtual meetings) to brainstorm typical scenarios that arise in virtual meetings and tend to be problematic in terms of engagement.
Once the rough outline was in place, I then broke it down into the individual slides that would either present information or interactions. Even on projects like this one where I’m the one who will ultimately be building the course in Articulate or another development tool, I still like to follow the practice of specifying details of navigation and interaction because doing so in the storyboard helps me to identify potential gaps in the script or interaction flow before committing too much work that might need redoing.
I opted for a “warm” color scheme, using oranges, reds, and yellows to create a friendly-feeling environment for this soft-skill training, in contrast with the typical cool and machine-like feeling often used for more technical subject matter. I then set up a simple, header-plus-three-column grid to consistently present content blocks. For the illustrations, ChatGPT proved to be a perfect choice to quickly generate and iterate through rough concepts, which I then refined by hand when needed in Photoshop.
Figma has emerged as the industry-standard wireframing tool, and I’ve used it extensively in my UX design work to quickly explore ideas and iterate on layout, structure, and flow. It works great for instructional design too, so I built out the basic templates and dropped in the content from the storyboards. From there, it was easy to create an interactive prototype to use to gather feedback and make whatever changes necessary. In this case, testers noted a few usability issues that I fixed.
Sample storyboard
Figma prototype
