Ride to Work eLearning Resource … Part 1


As a student brief, this project entails the research and creation of a prototype eLearning Resource for The Bicycle Network’s “Ride2Work Day”

The aim of this project is to create an e-learning activity for primary school students and a business level eLearning for ride to work day to educate and try to get people to ride to work. It will be for child cyclists who are learning basic road safety for the first time. They would be completing the eLearning activity with assistance from their parent or teacher.

Specifications that are needed to met include;

  1. Help the participant reach a level of autonomy with the skill and gain confidence with the primary students to ride on their own without parents.
  2. They can be used over and over again and replayed at any time.
  3. For the eLearning activity to be enjoyable for both student and adult.
  4. It will be available as a digital asset on their website.

The Client

The Bicycle Network runs an event called “Ride2Work”, which encourages Australians to start riding to work and promotes commuting by bike as a regular habit thus reducing carbon emissions and pollution in the environment. The event helps to promote better physical health, staying active and mental health — along with environmentally friendly travel methods, in order to make it a regular habit rather than inconvenience. Held annually in October, the day celebrates the benefits of riding to work and brings together the communities that support it. Throughout this event safety around roads and bike riding is ensured with several available resources to read. With 55,000 registrations — a staggering 61% of new riders who registered in 2014 reported that they’re still riding to work, weekly or more, when surveyed in March 2015, five months after National Ride2Work Day. [1]


“Create a digital asset for kids to help them learn and understand road and bike safety before the Ride2Work Day in order to ride with confidence.”


The Team:

  • Dayna: 
    Strengths — Creative & innovative towards imagery, Design
    Weakness — Staying focused.
  • Dean: 
    Strengths — Research & Content Development, Design
    Weakness — Time management.
  • Aimee:
    Strengths — Coding, Planning, Design.
    Weakness — Not staying within project scope.

Suggested Development Process:

For the project development stage during this brief, our selected and preferred development process involves beginning with storyboards of the design (done by hand) and refined with feedback — from concept ideas to a final solution. This will then be followed by a rapid prototyping stage where the functionality and content will be created and developed ready for testing later on.

Timeline & Work-load:

With the deadline of 5 weeks to have a functional prototype to test, the timeline we defined was generated from the Trello board created for this project.

Trello is an online resource which is used for organisation and planning of projects and tasks. We broke this project up into sections, each covered below, and then defined what was involved and estimated how long each section may take to complete.

For this timeline we roughly estimate how long we thought it would take for each section.

  1. Know your course goal + Define learning objective ~ 1 hr
  2. Persona’s: 1 adult and 1 child ~ 3 hrs
  3. Plan Assessment Strategy: how to check if learner is understanding / engaging / thinking. ~ 2 hrs
  4. Select Delivery Platform: Discuss and choose what to use for when it is delivered ~ 30 mins to an hour
  5. Gather & Audit Content: Content needed to generate and be gathered from The Bicycle Network website, etc. ~ 3 to 6 hrs
  6. Create Storyboards and Rapid Prototyping Process: Narrative in the process including content ~ 9 hrs
  7. User testing: Test the user on the eLearning exercise to measure their effectiveness ~ 1 to 2 hrs

Each team member is required to participate at an equal level. Out of the three of us — we decided that the Goal, Learning Objectives, Personas, Delivery Platform and Assessment Strategy would be completed with group discussions, brainstorming and research. Storyboards and concept generation was also done as a collaboration effort. The development part will be split into sections such as: graphics & imagery, content, and physical development. These tasks will be done individually so that they can all happen within the same time limit to reduce “wait-time” between sections, in order to meet the deadline.

  • Dayna will be responsible for graphics and imagery, thus defining a starting point for a potential style guide.
  • Aimee (aka myself) will be responsible for creating the functionality and prototype & ensuring that it works to a standard which the user experience can be tested along with the content delivery.
  • Dean will be in charge of gathering content & creating external information that may be used, such as in a quiz or embedded element.


Learning Objectives

Creating S.M.A.R.T Goals

Specific : Stating the exact goal wanted to be achieved — if it’s a larger task, break it down into smaller parts.
Measurable : Clearly establish definitions that can be used to determine success.
Attainable : Using action verbs. Make sure the objects are challenging but still within the ability to achieve the outcome.
Relevant : Ensure it is related to the main goal and intended outcome.
Time-sensitive : State when the goal needs to be achieved by and if it is realistic. [2] [3]

For this project, 3 S.M.A.R.T learning objectives were defined in order to cover all the topics required within the time limit (before the event in October).

1. Able to recite 6 bike safety tips/facts in order to ride to school independently within the month prior to the Ride2Work day.

S: road/bike safety — independence 
M: enough knowledge — 6 facts
A: attainable within the month. 6 within 30 days.
R: bike safety knowledge
T: within the month prior

2. State road rules in order to respect other users of the road and understand road usage before the event. The students must complete 3–5 correct answers.

S: Road rules respect other users
M: 3–5 Correct answers
A: In about a month to give them time to redo some areas if need
R: Respect other users of the road
T: Before the event

3. Label parts of equipment of the bike in order to be able to use them correctly and responsibly before the event occurs.

S: Bike equipment knowledge
M: Label parts of bike equipment
A: In a month prior
R: Bike maintenance
T: Before the event

These learning objectives ensure that the child completing the activity has learn required information about bike safety and riding. The first and second objectives ensure that the child knows basic road and bike safety in order to stay safe around traffic and while riding — whereas the third objective focuses on ensuring the child knows enough about the bike itself in order to use it correctly.


Personas needed to be created in order to imagine the intended target audiences.
These personas clearly defined the following:

  • Goals for each, going over what they want to learn and accomplish through eLearning.
  • Frustrations the user has with a focus on technology and learning styles.
  • Personality Traits.
  • How the person uses technology in their lives.
  • What motivates them.
  • & What their interests are.

Firstly, a teacher persona was created. This persona will be carrying out the activity, potentially in a classroom environment.

The following persona is for the student. This persona is the most important at this stage in the project, as the first part is aimed towards them and is an eLearning activity for children.

Types of Learners

Select a Learning Style (PART or VAK)

V.A.K — Visual, Auditory, Kinaesthetic

AUDITORY/VERBAL : These learners prefer using words, both in speech and writing. Activities they will like include audio books, lectures, music, written words, presentations, reading text. Podcasts and SlideShare would be good resources for these types of learners.

KINAESTHETIC : They prefer using their own body, hands and sense of touch in order to understand information or a task. This means they prefer to actually “do” the activity themselves. They enjoy hands-on activities, tutorials, games, problem solving, & role-play. An example of this would be OliverJeffersWorld.

VISUAL : These learners prefer using pictures, images, and spatial understanding to learn content. Many people are visual learners & it is the most common. They like videos, pdfs, youtube, images, reading (hardcopy), infographics & art based activities. An example that would help these types of learners, would be the ‘13 Reasons Why Your Brain Craves Infographics’ infographic.


P.A.R.T — Pragmatist, Activist, Reflector, Theorist

PRAGMATIST : These people need to be able to see how to put the learning into practice in the real world. Abstract concepts and games are of limited use unless they can see a way to put the ideas into action in their lives. Experimenters, trying out new ideas, theories and techniques to see if they work. They prefer having time to think about how to apply learning in reality, case studies, problem solving, & discussions.

ACTIVIST : Activists are those people who learn by doing. Activists need to get their hands dirty, to dive in with both feet first. Have an open-minded approach to learning, involving themselves fully and without bias in new experiences. Brainstorming, problem solving, group discussion, puzzles, competitions, & role-play are activities they will enjoy.

REFLECTOR : These people learn by observing and thinking about what happened. They may avoid leaping in and prefer to watch from the sidelines. Prefer to stand back and view experiences from a number of different perspectives, collecting data and taking the time to work towards an appropriate conclusion. Paired discussions, self analysis questionnaires, personality questionnaires, time out, observing activities, feedback from others, coaching, & interviews are activities these types of learners will most comfortably understand information through.

THEORIST : These learners like to understand the theory behind the actions. They need models, concepts and facts in order to engage in the learning process. Prefer to analyse and synthesise, drawing new information into a systematic and logical ‘theory’. They enjoy models, statistics, stories, quotes, background information, and applying theories. [5]

Selected Learning Type: V.A.K —

Through research and understanding these learning types — it was decided that the persona of our child student will be a visual and kinaesthetic learner. These are fairly common learning types & are the majority, so many people will be able to learn and understand the information delivered in this way.

The intended eLearning activity will be largely based around interactivity for kinaesthetic learners as well as the use of visual prompts and text for those learners as well. Verbal & auditory learners will be catered for through the use of text, and the possibility to have the teachers or parents talk through and demonstrate the activities while they complete them.

Proposed Content

Content to incorporate/generate

The content for this project will need to cover the 3 learning objectives defined above. This will be taught through mostly text and graphics, which the student can discuss with a teacher or parent.

Production Requirements and Fidelity:
For the prototyping stage, there will be a requirement of low fidelity graphics — such as hand drawn sketches if needed (to give a base and general idea of what content and information will be displayed defined within the learning objectives). The prototype will have basic “wireframe” styling to identify areas and understand functionality as well as all content inputted & in the correct places in order to test and assess whether the user is taking in and understand the information defined within the learning objectives. The production of will also need to display basic interactivity & so that it is user-friendly and functions correctly, to a base standard of understand how the activity works, but not to the full-fledged finished extent.

Assets required for the production will be imagery and content information sourced and generated from The Bicycle Network and Ride2Work websites; as well as other PDF’s containing relevant information. (https://www.vicroads.vic.gov.au/~/media/files/formsandpublications/safety-and-road-rules/bikeedafamilyguideshortversion.ashx?la=en downloads PDF)

For the final project these will need to be referenced and sourced, but for the prototype there is no need. There aren’t any licences relating to this content, although attribution is a moral standard. Most of the content will be rewritten and rephrased, in order to be original & the majority of the imagery will be created ourselves. If other imagery needs to be sourced — free stock photos will suffice.

Content Presentation via Learning Models

Instructional — How
This type of learning model focuses on the use of text and words to convey information with the support of graphics. Learning exercises that would be defined as instructional include: presentations, case studies, infographics, & checklists.

Simulation — Show
This learning model defines the “activity” as a viewable demonstration that is present to the learner. This includes practicals to complete, role playing, simulations of scenarios and potential happenings, and tutorial demonstrations.

Exploration & Problem-Solving
Similar to kinaesthetic learners, this learning model focuses on the “D.I.Y” aspect of understand information. This includes activities that involve interaction from the learner like word searches, interviews and projects.

Perhaps defined as a more “hands on” version of Exploration & Problem-solving combined with the Simulation and Instructional learning models. As the name suggests games that may involve quizzes, drag & drops, competitions and scenario play-throughs.

Chosen Learning Model

The learning model chosen is to make this eLearning resource instructional & game-based. The interactive activity will be defined as game-based due to the incorporation of quizzes and drag & drop games. It will also instructional as there potentially will be an interactive infographic included that is has short tips and facts listed within it.

Delivery Platform

Programs that were looked into to potentially create the prototype included

These programs help to speed up the process of rapid prototyping for many different devices. For this particular eLearning activity, we had the idea of keeping it as a mini-site type webpage that would be accessible on desktops and tablets for multiple uses in the classroom or home. There wouldn’t be any login system, so using the resource would just require internet connection.

DECIDED: Code the prototype — using Brackets, HTML, CSS & jQuery/JavaScript

Brackets is an open source software for writing any type of code & creating files for use in web browsers.

The use of this eLearning resource will be online based — such as a website, which will be able to be used on different devices such as iPads and Desktop computers, but it could also be used by the child at home in their own time or with parents and friends.

Choosing to code the prototype may not be the fastest option — but it would be able to incorporate much of the functionality that may not be possible with the use of a prototyping program. The programs mentioned above are excellent choices for making static & information prototypes that require minimal functionality such as following links. For this resource, it was felt that the prototype should include some, if not a much as possible, of the functionality — as the user is a kinaesthetic learner, and the functionality plays a large part in conveying the information defined in the learning objectives. Coding the prototype to include functionality also allows the user experience to be tested, along with the success of achieving the learning objectives. Basing the resource online also allows for the possibility that it could be used in conjunction with an interactive whiteboard.

For the quiz section of the prototype, we intend to make use of Qzzr & embedding the quiz generated with out content within the code. This application allows the use multiple choice answers as well as true/false questions, along with the use of visuals, so it caters towards our persona’s learning styles.

The quizzes generated through Qzzr allow the user to proceed even if they get the question wrong — after giving them feedback on the answer. Once it becomes a fully developed resource, we intend to change it so you can not continue to the next question until the user gets the answer right. This will ensure that they understand the question and answer, before proceeding.

Proposed Learning Activities

Learning activities that we have in mind for the resource include such things as interactive drag& drop games, multiple choice quizzes, and infographics.

The level of difficulty for these activities won’t be very high, but will be engaging and somewhat challenging enough to ensure that the user continues and is enticed to — in order to complete it successfully. Drag & Drop games are probably low on a scale of difficulty, whereas a quizzes difficulty will depend upon the questions — but due to the target audience of this resource, it will probably average around a medium level of difficulty. Infographics for the intended target audience will need to be brief and simple in order for the user to absorb the information.

This resource will be integrated into the National Ride2Work interface as either a mini-site that solely presents the resource by itself, or as a section on an existing webpage as an embedded type application. Due to the potential size and length of the project, it would possibly be more convenient to present this resource as a separate but connect learning element that runs alongside The Bicycle Network & Ride2Work interface’s.

Assessment Strategy

Bloom’s taxonomy

Bloom’s taxonomy refers to a classification of the different objectives that educators set for students (learning objectives). Starting from the bottom at ‘remember’, the activity should work it’s was up towards ‘creating’.

This first section focuses on recalling information & reusing it. This is mostly done though exercises such as a quiz with imagery, flash cards, true / false questions, repetition, rhymes & acronyms.

Following remembering, understanding follows with a focus on making sense of the material remembers in order to use it later correctly. Activities that focus on this include matching definitions to meanings, drag and drop’s, & mix and match games.

This section means to use the knowledge gained in a new way, in order to show the success rate of the previous level. This could include simulating bike rides, drag and drop games, or creating their own scene.

Analysis involves breaking the information down into part in order to see how they relate to each other. This might be done through spot the difference activities or “find the item” type games.

Evaluating tasks involve making judgements based on a set of guidelines. This is usually done in conjunction with analysis. Tasks could include a quiz with multiple choice, or a comparison between right and wrong answers.

Tasks such as puzzles or creating images involve using all the knowledge gathered to create something based on the information retained. Usually these tasks work best if there is an incentive or physical product to take away at the end.

Engaging Learning

In order to create a resource that is engaging and interesting, there needs to be aspects that maintain the learners attention in order for them to take in the information fully. 10 things that learners pay attention to, include elements such as:

1. Problem-solving 
2. Lists
3. Comparisons
4. Controversy
5. Visuals
6. Questions
7. Emotions
8. Stories
9. Contrast
10. Brevity


Idea Brainstorming

Both of the concepts generated after fleshing out the Assessment Strategy relate the learning preferences that our student persona “Oscar” will enjoy. as he is a kinaesthetic and visual learner — most of these activities relate around those areas, but other learning types will be catered for through the ability to have the teacher instruct the class & discuss the topics along with activity — which includes auditory learners as well, they can also be catered for through sounds which are associated with good and correct compared to sounds that are associated with incorrect and wrong answers.

Concept 1

From left to right — 1. Infographic, 2. Drag & Drop, 3. Spot the Difference, 4. Create Safe Scene, 5. Certificate

1. Interactive Infographic

To begin with the student will scroll through an interactive infographic which will cover all the information from the learning objectives. This will be a simple “road” image with a bike that moves down the page. As the child continues down the path — at certain intervals, facts and bike safety tips will pop up along the side. This allows the child to read at their own pace, but also allows the possibility for the teacher to go through the infographic as a group discussion exercise.
This activity allows the kids to remember information visually through instruction lists and tips.

2. Drag & Drop

This drag & drop game will allow the kids to match definitions and images to the correct corresponding text, label or image. This activity gives the teacher the opportunity to either have the kids work alone or within a group. One feature of the eLearning resource could be the possibility of being able to jump back and forth between the infographic and the quiz in order to check answers if they wish. If they drag the piece into the wrong place — it will highlight red & drop back into the selection. If correct, a description of feedback can be shown. Through the use of visuals and questions, this game-based activity allows the child to understand and apply the knowledge which they learnt from the infographic.

3. Spot the Difference

Following the quiz, the students will be able to analyse and evaluate the knowledge that they have learnt so far by completely a more traditional game of “spot the difference” between a safe scene and an unsafe scene. This will be two images placed side by side, and the child will be able to click on whatever area is different or missing, and either a circle will appear around the area like as if they drew it, or the missing or changed element will be applied to the “unsafe scene” and the child will have to make the scene safe based off the correct image next to it.
This activity gives the student visuals and stories to analyse what they have learnt through a game-based activity they requires problem-solving.

4. Create Safe Scene “Puzzle”

Following the spot the difference activity, the student will be taken to a page where they can drag and drop elements that were seen throughout the entire resource into a scenic imagery with a character they can dress up correctly — with a custom bike. This game-based activity combines stories, visuals and emotions and allows them to create something that uses all the knowledge they have learnt throughout the activities.

5. Certificate

To complete the activity the student will receive a “digital certificate” which has a statement along the lines of “Congratulations, you are now a safe rider!” This certificate will include the image they created previously, and they will be able to enter their name and post it to an area called “the Wall of Fame”. Which would showcase all students images in a gallery layout. The certificate will also be printable. This part of the resource relates to how our persona is motivated by incentives and rewards — so by taking something physical away from the activity, it allows them to feel confident, positive and proud of their accomplishments.

Concept 2

From left to right: 1. Hover Zoom Bike, 2. Drag & Drop Q&A, 3. Instructional Video, 4. Right & Wrong Scenario comparison.

1. Hover Zoom Bike

This will act as an introductory for kids to learn the different parts of a bike and how they work. The interface will be of a kid’s bike with the different parts outlined with a glow to show that they can be hovered over. Once the user hovers over a part, a dialogue box will slide out to reveal the name of the part, what it’s for and how it’s used.
This activity will give the user an insight of how a bike works so they’re ready to use it properly and safely. It works well with kids because it’s interactive and relies heavily on visuals.

2. Drag & Drop Q&A

After the child knows what all the parts do and how they work, they will be given a quiz to test their new found knowledge. Once they get a question right, they’re able to put the correct part onto the bike where it belongs, testing that they also know where the part goes.
An additional idea would be, once all of the parts are added, the user would be able to decorate their bike to their liking and save or print it if they wish. This will add a fun element in the mix so the kid doesn’t feel too overwhelmed with information and don’t think that the activity is JUST to learn, but also to enjoy themselves.
This activity will be engaging for kids because it includes both kinaesthetic and visual elements, both of which kids enjoy the most. At the end they’re also rewarded with being able to decorate their own bike, giving them a bigger incentive.

3. Instructional Video on Road Rules & Safety

To introduce the user to the next two activities, there will be an short, instructional video educating kids on road rules, road safety and public etiquette. This will be both auditory and visual, letting users take a break from kinaesthetic learning for a while and perhaps keeping the more auditory learners engaged.

4. Quiz

Once the child has learnt what they need to know about bike safety and road rules, they will then implement this information in this next task, where the user is given a true or false question. If the user selects the correct answer they will be praised and a short description of why they were right will appear below. If, however, they answer incorrectly, a short description of why their answer was wrong will appear.

5. Right vs Wrong Scenario Comparison

In this task, the kids will be implementing their new found knowledge about road safety and rules by being given two scenarios of two kids riding their bikes to school, in which they have to choose which they have to identify who is is doing the right thing. Once the user selects their answer, the correct answer will be highlighted in green and the incorrect answer will be highlighted in red and a brief explanation of what each child was doing wrong or right will be displayed underneath.

Concept Feedback

After presenting the concept ideas to the group, feedback received included;

  • Combine the two ideas, while remaining in scope — select parts from both concepts and merge.
  • Keep the sticker idea from the second idea — potentially decorate the certificate with them & then once completed actually have the user receive physical stickers.
  • Ensure that the activity shows a journey of building upon their learning rather than seeming like “random activities” that just follow each other.
  • Potentially add “build the bike” and quiz to the first concept.

Finalised Concept

Our final concept combines the two initial concepts and includes the idea to collect stickers throughout the game after successfully completing each activity.

From left image — top to bottom, to right image — top to bottom: Intro screen, Drag & Drop game, Collect Sticker screen (repeated throughout), Infographic, Quiz, Spot the Difference, Final Certificate.

The first stage introduces the user to the parts of the bike, covering the learning objective #3. The idea is to build a bike, as you piece it together, it tells the user about the part and safety/correct usage. After this activity is completed the user will gain a “sticker”.

Once the bike is complete, the idea is to have the user “ride” through an interactive infographic with tips about road and bike safety. This sceanrio type scene tells the user a story to explain road and bike safety tips. It allows the user to read and memorise the tips at their own pace, or within a group activity. The end of the infographic will also mean they gain another “sticker”.

Following the infographic, the user will be presented with a quiz about road safety and bike tips that were covered in the infographic. The original idea was to combine both the comparison and drag and drop methods of answering questions, but with the use of Qzzr — this only allows multiple choice answers. This quiz covers the learning objectives 2 & 3 combined together.

The end of the quiz will mean the user gains a 3rd sticker.

Following the quiz, a “spot the difference” game will be played in order to apply knowledge and analyse scene — following the assessment plan. This activity applies knowledge gathered in the infographic and the quiz to analyse and find the missing pieces. Successful completion means they gain the final sticker.

It was suggested that within the spot the difference game, there would be some type of “negative feedback”, so that if the user clicked in an incorrect spot, either it would flash or pulse red, or the arrow would just turn into an “X” for a few seconds.

Once all the stickers have been collected — the user will be taken to a page of a certificate, where they can apply the images of the stickers to the certificate, type their name and print it. There will be a prompt to print, that states that if you take it to your teacher — you can get physical stickers.

Once handed to teacher, it could potentially hung on wall to have more ‘accomplishment’ satisfaction, as our persona was defined as being motivated by incentives.

It is important to ensure that this concept and prototype needs to cover and teach all the learning objectives — which it does at the moment, as the first task covers the bike equipment and usage, whereas the infographic & quiz cover the safety rules, and bike safety.

Continued in Part 2
Show your support

Clapping shows how much you appreciated Aimee McLachlan’s story.