Ride2work day: creating an E-learning Resource

Image for post
Image for post

Introduction

Reflection
Before commencing this project it is really important to consider what went well last time and what didn’t. In the last project a lack of attention to detail let down some aspects of the blog as well as our prototype. Taking additional time to just read over information and ‘beef’ it out could be greatly beneficial, also allowing time to test things multiple times. This testing needs to be done personally as well as by someone else to pick up any errors before going into the final user tests. Any errors that did occur in our last resource could basically be fixed ‘on site’ or the test, simply re-uploading links, or changing how they linked. It was a bit frustrating to open parts of the resource and there be really fixable mistakes. I think overall the visual of our design was really strong, but spending more time storyboarding the the project would have saved time. I spent a lot of running through the prototype and then realising there wasn’t a consistent back button, or maybe that page needs a help button. Doing a more detailed storyboard and flowchart could have assisted in making our design more consistent. I think by the end of the project I was quite exhausted and frustrated so gave up on spending the time to tie up ends.

Trello
Once again for this project I will be using Trello to track my progress throughout the project. This tool is helpful as it allows me to identify each step, the time I assume it will take and define what I expect to do. I can then also upload progress shots and keep all of my information in one place. My progress can be tracked here:

Budget
At the completion of the last project David and I mapped out our time expected and the actual time taken on each part of the project. This made it really easy to estimate times for my current project. I created a graph to show how long each stage of the project will take and how long each step within this project will take. This allows me to see that the majority of my time will be spent on the design and creation of the project.

Image for post
Image for post

In total I expect the project to take 54 hours. In monetary value this works out to be $1620 for the whole project.

Part 1: Research

The first matrix places the users interest in fitness verses the length of their morning commute. Users who had a short commute and a high interest in fitness are possible already on side with the Ride2Work Initiative as riding to work matches their values. Users with a short commute and a lower interest in fitness could be converted to having a higher interest in cycling if they learn about how it can benefit them overall. Users with a longer commute and a low interest in fitness are unlikely to be converted for the ride2work initiative as they have no motivation for getting involved and it would be time consuming or difficult for them to ride to work.

The second matrix matched access to a bike against the level of confidence the persona has while riding. Someone who has a bike, and is highly confident riding on the roads is likely already riding to work daily. We identified that people with a lower level of confidence could be converted to someone who would ride to work. Improving someones knowledge of road safety could lift there confidence resulting in the change to riding daily.

For the final matrix my group matched how tech savvy the user was against their willingness to learn. We identified that users that were less tach savvy, but really willing to learn could be assisted through pre-programs showing them how to use the Learning resource. It will be important to consider this so tech use doesn’t become a factor in why people are confident to ride. If someone is already tech savvy they will be likely to complete the resource without help.

Image for post
Image for post
Matrix 1, Matrix 2 and Matrix 3

From here we discussed making perosnas interesting. Ben raised the idea that these need to be more than just a stereotype, but then need to contain information that makes the individual special. As a group we came up with a persona, Ms low confidence who has a bike and answered a series of questions. The questions were broken up into 4 main sections which were: Fitness & cycling, Road Safety, Tech and Learning styles. These sections allowed us to assess reasons why our persona might have low confidence, history with riding, goals and motivations, current apps and devices used as well as views on drivers, pedestrians and riders.
My answers can be found below:

From here we created a 10 minute persona. The main idea of this was to focus on making it visually appealing through using various graphs, sliders etc rather than presenting the information in a dot point form. We then put them up on the wall and placed a dot point beside things that we liked. From this activity I was able to see what really caught my eye. Things such as a visual graph of ‘the day in the life of’ and pie charts were options I hadn’t previously considered. At the completion of this I wasn’t super happy with my persona.

Working in groups had lead Ms Low Confidence with a bike to become a crazy cat lady of sorts, with next to no social life and a deep passion for reading the newspaper. This style of persona really calls to the ‘standard’ business style, text heavy E-learning resource. It was only when I commenced the next class that I realised this really wouldn’t cut it as the basis of my resource. Design school is meant to allow you to be more creative than in the real world because there are no restrictions. It was at this stage of the project I realised I wanted to create something of interest and something different to how others might approach the project.

I chatted with Ben and we discussed ways I could created a fleshier persona. He linked me to a facebook post by the Today Show in regards to proposed cycling regulations.

Image for post
Image for post
The Today Show posts article about proposed new cycling regulations

The post blew up with supporters of both side of the arguments. Drivers and pedestrians saying there needs to be a way to identify trouble riders, while others said the laws were unfair, pedestrians should have to follow the same restrictions. Ben suggested that I find strong comments and then stalk the people who made them. Adequate research right?
Generally the comments where angry motorists yelling that they paid taxes to make the roads so cyclists should cease to exist. Another majority group were people who had recently returned from european holidays and were calling for less hate and understanding or other road users. Overall I got a good insight that it could be quite scary as a cyclist when a quantity of drivers are impatient towards cyclists.
As much as I stalked most profiles had decent privacy settings or the person was a complete redneck. This isn’t really the direction I want to take my persona so I have to look down another avenue.

I wanted to get more insight into what it was to be a cyclist. I called up my sister, Bethany Newton. In the past 6 months she has taken up riding as one of her primary modes of transport. I think this is greatly because she is dating a bike enthusiast. Reasons aside I would see her as quite a competent rider. She is also a regular driver and often talks about being aware of cyclists when opening doors and ways she remembers to do this. For me it is really important to find out what has lead her to start riding and why she keeps it up. I asked her 6 questions. They were as follows:

  1. What motivates you to ride your bike?
  2. On a scale of 1–10, how confident are you when riding on the roads in and around he city?
  3. What might deter you from riding or decrease your confidence?
  4. On a scale of 1–10, how would you rate your road rule knowledge?
  5. If you knew more specific bike riding rules would this increase your confidence?
  6. What is a strong bike riding memory for you?

Her answers were as follows:

  1. Riding for me is about affordability. It is also a get source of exercise and a nice way to get around and see the city. In particular it is good for short distances, and allows me to take more direct routes than what I could on public transport, such as going from Brunswick to Fitzroy. Overall I would say cheap, fun easy and time efficient.
  2. 6–7, It depends on how busy the road is.
  3. Busy and unsafe roads, particularly where there is a lack of driver awareness about bicycles or where there are a lot of pedestrians. Sydney road is particularly bad for this. I also avoid areas where other cyclists have died or had accidents or if the road quality is bad. If I have heard it is unsafe in the area or the traffic is heavy I will be deterred from riding.
  4. I basically apply my knowledge from driving to riding a bike, so around an 8–9
  5. Yeah actually. I could quite possibly feel more confidence when I’m on a road without bike lanes. Sometimes I don’t know if it is appropriate for me to ride on the footpath if it feels safer, or if I should cross the road with the walking traffic, where to be on the road when attempting certain turns etc.
  6. A strong memory for me is when I was learning to ride on the little blue bicycle with the mud guard. Dad would help me and hold onto my back as I’d say go faster, faster, faster. I remember when he let go and I realised that the training wheels would hold me up.

Beth’s insights were really valuable, but I feel I could create a clearer persona through getting answers from people who maybe weren’t as confident, or who lived further away etc. I created a Survey using Survey Monkey which had the same questions that I asked Beth.

I then asked all of my super nice friends to take the survey. These friends varied from confident riders to non riders as I tried to get a insight of a range of road users.

Image for post
Image for post
Over 50% of those tested take between 30 minutes to an hour to get to work

A large portion of my test subjects had a medium to long length commute each day to work and uni.

Image for post
Image for post
Those interviewed used a range of transport
Image for post
Image for post
The majority of those surveyed have access to a bike

My users used a range of different transport methods including public and private transport daily. Most users used multiple forms in their daily commute eg. Driving to the train station and then catching the train. Public transport was the most popular mode. I believe this is greatly because of the main demographic of those surveyed. 80% of participants fell into the university or part time work bracket and were under the age of 25. Public trasport, walking or riding are the cheapest modes of transport which supports this assumptions.

Almost 80% of those surveyed have access to a bike, making them in fall into the target area of my previously shown matrix.

The responses for why people rode their bike varied from nice weather, enjoyment, health and fitness to costs. Some people considered whether an area of road was safe or if it had bike lanes.

Reasons why someone might be deterred from riding included aggressive or unaware road users, heavy traffic and roads that were identified as dangerous for riders. Weather and confidence also played a factor in peoples reasons not to ride.

Asking those surveyed about their strongest bike memory gave me an insight into why they felt strong emotions towards riding or not riding. Most of the positive memories involved going on adventures or learning how to ride without training wheels. Negative memories involved falling off or having a crash on their bike.

Finally the majority of those surveyed said that understanding the rules and their rights on the road would increase their confidence when riding. This is a good motivation to continue with the resource.

Final Persona
My final persona was Danielle, Ms discouraged that ownsa bike. I focussed on giving her personality and story. The stories are those from friends to give her a real feel.

Image for post
Image for post

I broke my persona into the three sections personal, riding and fitness and technology. This allows me to approach my learning resource from three different angles. Danielle is motivated so having a resource that is rewarding for her will be important. I also need to make sure that I highlight information that she associates with her motivations. Her learning styles are visual and interpersonal. Making sure that my resource has imagery and text as well as sharing with others features will be important.

Learning Objectives and Outcomes
In our sprints session we also talked about learning objectives and goals as well as what the specs of the brief were. It is important to note the specs as this will effect what we need to do. While my group had come up with some good ideas I needed to take time to refine these more and really engrain what each objective required and how this lead to meeting the overall goal.

Image for post
Image for post
Goals, specs and objectives group brainstorm

My course goal is to
“Create an E-Learning Resource that encourages safe riding through teaching users the road rules, road etiquette, and the benefits of riding to their health and the environment”

The learning objectives that will help meet this goal are:
Goal 1- Users understand and can demonstrate 3 ways they can show etiquette to others on the road at the completion of the resource

Goal 2- Users know 5 important road rules at the completion of the resource

Goal 3- Users can name 3 personal benefits and 3 environmental benefits of riding to work at the completion of the resource

Part 2: Concepts

Image for post
Image for post
The mass of sticky notes I imagined I wrote out (this is not correct)

I brainstormed a few ideas but as usual the best ideas come when you are catching public transport, going to sleep or plucking your eye brows. I seemed to have no clear ideas on the Thursday before I was due to present. My notes were very unformulated and a little over the shop.

Image for post
Image for post
Scribbly brainstorm of ideas for E-learning resource

At approximately 11:59 these notes started to make more sense and feel more filled out. I had a look online at other successful online learning resources and stumbled across this great site which took you through the history of a city. I am currently hitting myself over not saving the link to share on here, but it paired beautiful illustrations with a clickable pictogram feel. I wanted to replicated a similar idea.

Concept Presentations
To say the least I went into this with two partially fleshed out ideas and next to no visuals. I really focused on talking about my persona and research, highlighting the importance of an interactive and visual learning resource. Somehow I sold the idea to not only the class but also Ben! (high fives all round!)

In summary my idea is to break down my learning objectives into 5 stages or steps. Step 1 shows the user who is on the road. This has the aim of creating awareness and empathy for other users. Maybe the person using the resource hadn’t previously considered a pedestrians role on the road. Step 2 encases the rules specific to riding. This will reiterate the idea that a cyclist is another vehicle on the road and give more specific cyclists information with the aim to increase confidence through increased knowledge. Step 3 will look at etiquette on the road. This will be very rider specific but also have the aim of empowering other road users to know what politeness should be shown to them. Focusing on relationships will appeal to my persona. Step 4 and step 5 will together encompass objective three, firstly looking at the environmental benefits and then personal benefits. Each step will have a clickable image that will show detailed information for the benefits. At completion of reading the information the user will have to complete a quiz with 100%.

Storyboarding
Learning from my previous project I wanted to have a fairly convincing storyboard and flow chart. I need to visualise how each screen looks as well as how they work together as a whole.

Image for post
Image for post
Story board showing the links between screens

I annotated each screen and its usability. I focussed on having consistent parts to each image such as the bottom navigation bar, hide/exit arrows and clear screens showing success or lack of.

Content Strategy
I am going to break my content down into the 5 steps outlined above. Depending on the amount of information I find will change how I break it down further. It is important to have facts or information that is both helpful and interesting. A large amount of facts and figures can be boring to read. I want to break my information up further using images. Giving visuals to the facts may help some users to retain the information.

Delivery Platform
We were presented with a range of platforms to create our learning resource on. They ranged from interactive layouts such as Genio. I took a fancy to ‘Sway,’ which is basically a fancy responsive version of powerpoint. The introduction to it looked pretty incredible. I presented a range of easy layout, interactive pop ups etc. These really suited my interactive image idea. The actual software wasn’t nearly this exciting. It had limited control over every element that it had previously sold to me. I would certainly recommend it for someone that had no design idea. With very little argument ben convinced me to code the resource. He pitched that he would create a template for the hotspots and I could style/adapt it from there.

Assessment strategy
The user will be assessed in stages. Each screen will relate to a different learning objective and then the user will be tested on the information they are showed. This will mean the user will only have to focus on a set amount of information at a time.

For each stage there will be a pool of questions that the quizer can pull from. I created up to 3 questions for each piece of information shown in the resource which could be randomly selected for the quiz. Doing this means that it is possible to do the quiz on multiple occasions without it becoming tedious or repetitive. It also means that users need to read the information in order to get each answer correct.

Image for post
Image for post
Questions for each step arranged

Due to the coding nature of my website I won’t have the questions pulling from the question bank. I am limited by A) time and B) my ability to code which will prevent me from doing this.

Part 3- Creation

Image for post
Image for post
E-learning resource

Coding the Game

Image for post
Image for post
Editing the game content in firefox browser

Unfortunately I couldn’t easily embed a quiz into the website. Ben said it would involve breaking the frame work of coding apps such as quizzer which could lead to more issues than it created.

Image for post
Image for post
Generating XML script for each questionaire

Instead I used a game app in which you insert the questions into a browser editor and then download the XML information. This was seriously buggy. It didn’t like to update more than 4 questions in a session and would crash, leaving you to start again. I think it was a good process though as I often broke the game fiddling with the code and then had to figure out how to fix it again. For me it was interesting to look at a framework that was heavily driven by Jquery rather than HTML and CSS.

Image for post
Image for post
Example of how the information stacks in the aside

Errors
Although the resource was is basically complete there are a few small errors that I wasn’t able to fix before testing. An example of this is that when you click on one hotspot and then another without closing the aside the information stacks upon itself. you can’t scroll through the aside so this often cuts off large amounts of information.

There were also a few style errors. I was unable to remove the hyperlink line from the take the quiz tab. I set the text-decoration to none but it didn’t remove the full styling. It is also important to note that I must run the resource in firefox rather than chrome. Chrome disagrees with the game component of my resource, stoping the jQuery from running correctly.

Image for post
Image for post
Hyperlink underline present

Part 4: Testing and evaluation

While it is great to just run the test, I want to get more of an insight into the testers as well as how they find the resource. For this I created a pre and post questionnaire. The pre-questionnaire has the aim of identifying if the person is suitable for the resource.

Image for post
Image for post
Questions used to learn more about the tester and if they are suitable for the resource

My post questions focused more around how the user found the UI, what they personally liked or disliked etc.

Image for post
Image for post
Post survey
Image for post
Image for post

It was important for these tests that the user could complete the resources by themselves. Users who were deemed as suitable from the pre-test were selected to undertake my testing. The test area was set up with a single user in a room and the computer as this replicates them having to complete the resource on their own. I then re-entered the room to ask them questions to see how they found the resource.

Test results
Overall my test was quite successful with both users completing the testing. Errors that they did encounter I had identified previously. It took users a small period of time to figure out the user face and the fact they had to click on the blue parts of the images.

My tests can be watched below.

Evaluation
In future I would pair up with someone who had coding abilities when undertaking a project like this. I feel like I was unable to complete a lot of the work without heavy guidance and purpose-made templates. I would also want to spend the time making the visuals. While the majority of my photographs were good and free for commercial use I feel creating my own would help increase the united feel between pages. Overall I am really happy with the result and feel like I learnt a lot by doing this project.

Ride safe!

Written by

Jessie Newton is a problem solver, thinker and explorer. She currently works on User Experience and graphic design projects.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store