Interactive Design : eLearning Activity Stage 2

For the second stage of this brief I will be creating a eLearning activity for employees working in a company that will partake in the National Ride2Work Day. The participants need to complete the activity to a certain standard to gain the certificate required to participate in the event. The eLearning activity needs to repeatable and enjoyable for the user.

The following blog will document from start to finish the entire step by step process of obtaining the goals and objectives for this project.

The Goal

The goal for this project is to create an eLearning resource that promotes safety, a regular riding habit and normalize riding in Australia for employees in a company.

The Objectives

The objectives for this project would be:

Have users learn about three key benefits of riding a bike to work by the completion of the eLearning activity.

Teach users about five major safety issues and their preventative measures by the completion of the activity.

Test the users knowledge of the road rules and regulations for riding a bike, to gain a satisfactory pass that will give the user the completion certificate.

The Specs

The specifications for this project include the following:

A planned budget.

The eLearning activity will appear on the Bicycle Network site.

The styling for the activity needs to follow the National Ride2Work site style guide.

The eLearning activity needs to be fully built and functional for the final product (Coding of the product is not a requirement).

Images must be 100kb or below.

The eLearning activity needs to appeal and be appropriate for the intended target audience.

Completely digital (Accessible via the web).

The user must be able to complete the activity with no interference or help.

eLearning activity needs to be repeatable (User is able to repeat activity till they are satisfied).

The activity must contain assessment capabilities.

The activity must give a certificate to the user on completion if they have gained the pass mark.

Final build is due in week 11, testing will commence in the last two week with everything being due in week 13.

Stage 1 Analysis

From the first stage, the main issue found was that users became bored with the repetitiveness of the activity. So using these responses I will work on creating the next activity to use less repetition and have a few different activities so the user will not get bored.


To work out what sort of areas the target audience might fall in x/y diagrams were created to show an aspect on a scale against another aspect.

Stars represent where certain target audience, the light blue indicates the target audience areas and the darker blue is the preferable area for the target audience to fall in.

The persona I created outlined one of the types of people this eLearning activity will target.

Interactive Testing Research

The learning type I am focusing on is kinesthetic learners. Meaning the activity being created needs to be quite interactivity to hold their attention. So good activities for this would be:

  • Drop and Drag Games
  • Clickable Activities
  • Multiple Choice Quiz
  • Quest Games

Learning Style

Visual: Visual learner, learn best with learning styles in which ideas, concepts, data, and other information are associated with images and techniques. Visualization in a good way for a visual learner to remember something.

For example: They are attracted to colour and spoken language, like stories, that have imagery.

Auditory: Auditory learner, learn best through hearing and listening. They often learn by reading out loud because they have to hear it or speak it in order to remember.

For example: Understanding and remembering things they have heard. They store information by the way it sounds and have an easier time understanding spoken instructions rather than written ones.

Kinesthetic: Kinesthetic learners, learn best by touching and doing. They tend to learn better when some type of physical activity is involved.

For example: They often communicate by touching and they appreciate physical express formed of encouragement such as a pat on the back. They need to be active and take frequent breaks, they often speak with their hands and with gestures. They often find sitting still difficult.

Interface Sketches

Interface will be simple and follow the Bicycle Network style guide. This will allow the activity to match with the website and be shown in a clear way so user able to easily complete the activity with little help.


This storyboard outlines the flow of how the activity will run. The user will have to complete two types of activities, a drop and drag activity and multiple choice questions quiz. These were activities I felt would work for a kinesthetic learner as well as being able to judge the users knowledge. Also to give the user more of a base knowledge, a interactive infograph will be added so user can find out more facts about road rules and etiquette.


Feedback I got was to make sure when user completes test that if they do not get everything right that they are able to see what they got wrong and what is correct so user learns what they are doing wrong.

Content that needs to be incorporated/generate

Images for this activity need to be created or sourced. All content information for the infographic needs to be gathered and written to display appropriate information. All questions for the quiz need to be written.


For the eLearning activity the platform I have decided to go with is coding using MAMP & Brackets. This allows me to use CSS animations/hover effects to create interactive aspects for things such as the infographic. As well as use JS and jQuery to create the quiz portion of the activity.

Learning Activity & Learning Model

The learning type models I will be using are gamification in the form of a quiz using multiple choice and drop n’ drag question. I will also be using instructional type learning with infograph that will give the user some base knowledge on bike safety, road rules and etiquette.

Assessment strategy

Throughout the eLearning activity the users answers will be recorded as correct or incorrect, when the user finishes the test they will see their score and if they get above a certain score they will be able to get their certificate of completion.

If they do not get the passing mark they will have to retake the test till they gain a satisfactory score. All wrong answers will be displayed under their test score showing their input and what the correct answer is.

Project Management

List the members of your team including their strengths (expertise) and weaknesses they bring

Michelle Millers

Strengths: Organization, coding, concept designs, expanding on concepts.

Weaknesses: Presenting, writing.

Chosen Development Process

The development process that I followed started with working out the timeline and budget based on the first part of the project and how that one ran in terms of time and also factoring in what could be used from the first project e.g content information, graphics etc. Then I started brainstorming ideas on what the activity could be using information gathered from the previous user tests and incorporating the feedback. Then to show the flow of the activity I storyboarded how each thing would progress to the next. Once how the activity would work was established, I moved onto the development of the activity using coding. The final step was to do user testing on the activity.

Time & Budget Estimates

Using a Trello board to layout the required tasks within this project, I was able break down each task further into smaller tasks that I was then able to put a time estimate to.

Trello Board — Stage 2
Trello Board — Stage 2

My overall time estimate for this project is 44 hrs. Using the time estimate, my estimate for the budget is $1,320.

Design & Development Issues

A few issues that arose during the development of the activity. The first one was creating the popup boxes for the information in the infograph. A svg image was used for the infograph map image, certain areas need to be clickable to activate the popup box. So I put invisible circles on the areas that needed to be clickable and tried putting the clickable area on the circles. This did not work as the invisible circles were not registering, to fix this problem I changed them from invisible to a white opacity which made the circles visible as well as fixing the popup issue. The benefit also of the circles being visible was that the user would know exactly where they could click on the infograph to trigger the popups.

Another issue I encountered was with the quiz and trying to get it to count the amount of wrong and right answers, so that at the end of the quiz the user would be able to see what their score was and what they got wrong. To fix this issue I found a JavaScript code that was able to count the multiple choice question answers to give a final score at the end.


Identify design and interactive specifications for the development team

The eLearning activity that is being designed is required to be embedded in the Bicycle Network website. As the activity will be created using code, the activity can be placed with in the main section of the website.

Evaluation (User Test Report)

Discuss how the design integrity was maintained between the plan and the final product

The final product followed quite closely to the plans. There was no real deviation from the plans. The only change from the plans were a small page order shuffle which only effected the two pages that swapped.

Give a walk through of how the user test scenario will play out

The idea is to let the user complete the task with no intervention to see how well the user is able to complete this activity and how well it works.

Reflect on how the scenario played out for the user/facilitator/prototype

Users quickly understood how the activity worked, there were no really issues with user not understanding what they were required to do. Both user testers passed the test the first time around. A commonality between the users was that they both didn’t really read the information given in the infograph therefor for some questions they had to guess the answer. Users comment on how they liked the look of the infograph and how it worked but found it hard to work out what they actually needed to remember from the information. Also some clickable areas were overlooked e.g the night riding circle.

Identify areas where critical changes will need to be made to improve:

The infograph was the main issue as user didn’t really take in the information as well as the fact that some clickable areas on the map were missed.

To improve this highlighting key information with in the content will help users retain more knowledge. A way to improve the clickable areas could be making the areas glow or flash so that they are clearly visible to the user.

Factor these changes into your time management

The original estimated time was 44 hours and the time it actually took was about 44 hours which is the same as the estimated time.

The Product Walk Through

Discuss your final prototyped solution. Include screenshots and annotations to demonstrate its key features, benefits and design choices.

The final solution was a coded activity that used JavaScript and jQuery to create the functionality of the infographic and quiz.


The infograph was made to be interactive so it was more engaging for the viewer. As seen above on the right, when a user clicks a circle on the infograph a popup box appears with a zoomed version of the circle and the information. All images correspond with information they are displaying, making it easy for the user to understand.

question format

The quiz which the user must complete to gain the certificate has two question formats. There is the drop and drag type questions as seen in the left image above, which the user is able to drag the words to the appropriate boxes on the bike. This type of question is very interactive for the user and is appropriate for kinesthetic learners. The second type is a multiple choice format. This is a format most users would be familiar with making it easy for them to know what to do.


Overall the eLearning activity came out well, it followed the plan very closely so there were few mishaps. I was able to take away certain things from the previous project to further improve this project. The main thing was creating a more interactive and less repetitive activity. The activity as a whole came out well.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.