E-LEARNING DEVELOPMENT
REDESIGN ∙ VISUAL DESIGN ∙ WEBCLIENT | Elections Canada |
ROLES | Lead designer, Lead developer |
BRIEF | Create engaging and effective e-learning modules, with a focus on user-centered design approach to ensure learners have a positive and impactful educational experience. |
END USER | Thousands of election administrators across Canada that have vary in age and technical skills |
TOOLS | Adobe Captivate, Adobe Illustrator, Adobe Photoshop, HTML, JavaScript, ActionScript 3 |
DISCOVERY
Following the 42nd Canadian general election, questionnaires were distributed to election administrators across Canada to gather their feedback on the training they received. The training team carefully analyzed the feedback and identified critical user needs and feedback across all training components. For the e-learning training modules, users suggested that the modules could be streamlined and tailored to their current tasks, and delivered throughout the electoral period instead of all at once.
Additionally, a user target analysis revealed that our target audience comprises primarily retired individuals from all over Canada, with varying levels of technical expertise and a background in management and logistics. While most users know how to manage and lead an office of election workers, the training is intended to provide detailed guidance on the complex process of running an election and all the logistics required to ensure a positive voting experience for the entire Canadian voting population. An evaluation of the previous e-learning module theme also identified several features that could be improved to enhance the user experience. Our team intends to address these design concerns to optimize usability and accessibility for learners.
Identified features for improvements:
- Updating the theme and move away from gradients
- Expanding the reading area and following an optimal line length
- Navigation option to help users jump around the module
- Progress tracking option to tell users how far they are into the module
- Reorganize the structure of the module by mixing in knowledge check questions
- Introduce the use of animations
- Take a more creative approach to the images that we use
EXPLORATION
Design, Delivery, and Depiction
Previously, the training for election administrators only included the information they needed during the election. It was delivered all at once, 6 months before the event, where they had to work through and understand 21 different training modules as they juggled their other responsibilities. For the 43rd general election, the online training was expanded to include the pre-event tasks that administrators had to undertake as they started to set up their offices and hire their staff. The new curriculum started 2 years prior to an election with the training split into 6 pre-event themes, and 2 event themes. Including the pre-event tasks in the online training also meant lightening the event training load. The content was then derived from the themes with the focus on what the administrator had to know at that time.
Flat design was explored to replace the previous gradient style and theme. Several flat design examples were studied and inspiration was taken from them. In addition to the flat colours and shapes, subtle shadows and highlights were added to give the design a slight depth.
Navigation and progress
Navigation options that were explored were the built in table of contents option in Captivate, the timeline option in Captivate, and pre-built Captivate widgets. The timeline was able to show the user their overall position in the module, but clicking on the timeline allowed the user to jump to any slide in the module. The TOC was able to track section completion and allowed the user to jump to sections in the module that the developer set. In addition, it was able to hide and stay out of the users way. The theme of the TOC could also be changed and the colours could be customized. The TOC was a promising option in terms of navigation for the module but was limited to preset themes and basic customizability. The pre-built widgets were great tools for small tasks like useful help buttons, but none were conceived to be used as a navigation or progress tool. However since the widgets are SWF files, you could open it in Adobe Flash and change some of the underlying code to create your own widget. It was technically possible to add other features to a widget like progress tracking and navigation. To test this, a pre-built widget was adapted to jump to a slide number on mouse click and show the number of slides previously visited with the use of native variables in Captivate. Given enough time, a developer could create a custom widget that tracks the user's progress in each section and allow the user to navigate throughout the module.
Structure and questions
Exploring and understanding adult learning principles was the first step to designing the structure and questions of the module. Adults will only learn what they feel they need to learn and they must want to learn it. The election administrators must understand the content in order to fulfill their responsibilities and properly run an election in their area. However some may feel they already understand the content and proceed to blow through the training. Therefore, knowledge check questions were introduced throughout the module in order to test the administrators. Should they answer the questions correctly, they could progress faster and move on with the training. If they did not answer the question correctly, the following slides would provide a more in depth explanation. Testing the administrators on the content first, encourages them to think critically instead of regurgitating the information at the module end quiz.
PRODUCTION
Template and styling
With flat design chosen as the design language, a new template for the modules was created. The theme was resized to a 16:9 aspect ratio which provides enough area to follow a proper line length and ample space for graphics. The template includes the styling of all the assets native to captivate which include fonts, shapes, and buttons. In addition, the template would control the layout of the content on each slide as well as the basic structure for the training modules.
Widget development
The development of a widget was given the greenlight with a set goal to create something that would track user progression, allow user navigation, be robust enough to work for any kind of training module, and be easy to use upon discovery. Development started with testing out what was possible with widgets. The process was largely trial and error since there was little to no documentation for how widgets worked and were created. There is a small community of creators that have made their own custom widgets but were more in the market of selling them than teaching how to create them. Digging into the software files showed that the widgets were all SWF files which meant it could be opened in Adobe Flash. The widgets were mainly created in ActionScript for Adobe Captivate 7. It then took extensive testing in order to finally create a working prototype that could jump the user to another slide in the module. The prototype was expanded by including new functions, variables, and native captivate variables to track the progress of the user. It took 2 months to create and fully test out the navigation and progression widget and deploy it throughout all the online training modules.
In the following year, it was decided that pushing the training modules out in HTML5 would be more optimal for users. This meant transitioning the Flash Widget to HTML5. There was no documentation on HTML5 widgets in Captivate. However, Captivate did come pre-installed with HTML5 widgets. It took another month of reengineering pre-installed HTML5 widgets and testing to recreate the navigation and progress widget in HTML5.
REFLECTION
Throughout the redesign of the training modules we strived to improve the user’s experience by listening to feedback and introducing new features. We were able to spread out the learning curriculum over 2 years and focus the training on what the administrators needed at that time. We introduced a new widget which is able to track the user’s progress and navigate throughout the module. The new theme features a larger area for content and graphics, and the new style allows for more creativity from the developers. Overall the redesign of the training modules was successful and will be featured in all the training modules launched for the 43rd general election.