The Project
A sample module designed as a part of B.Sc. in Photography course curriculum. It had to be interactive and engaging along with a way to analyze the learner’s understanding. Had to be self paced and easy to understand.
Target Audience
- 1st Year Students
- Around 18-20 years old
Responsibilities
- Instructional Design
- eLearning Development
- Graphic Design
- Curriculum Design
- Subject Matter Expert
Tools Used
- Articulate Storyline 3
- Adobe Photoshop
- Adobe Illustrator
- WireframeSketcher
The Background
Lets get few important things clear, before we start. In this project I am designing a Module for a particular course. But, what is a Module? Let me explain… Here we have a 3 Years long degree course. Every year consists of 4-5 Modules and every Module consists of 3-4 Chapters & a Module Project. At the end of every Module the student needs to submit their Module Project work, on which they are graded. Students have to submit all yearly Module Projects to clear that particular year, and finally achieve their Degree at the end of 3rd Year. While designing the curriculum, we planned it in such a manner that with every Module the student gains enough knowledge to work on that particular Module Project. So here it comes… we decided to plan the work flow of a Module. And made sure it works for all the Modules we have in all the Years. And this is what I have designed, in this Project.
The Flowchart
The first thing I worked was this flowchart. It helped me,
-
- To make my teammates understand the flow of a particular Module.
- To understand how I should use “Scene” and “Slides” while working in Articulate Storyline 3. It gave me a confident start.
The User Experience Design
Designing of the user experience was one of the most important part of this project. Few factors I had considered while designing where,
-
- Should be flexible to be used through all the Modules.
- Should give every information about the Module and its Chapters.
- Should have a grading mechanism, by assessing the students knowledge.
- Should be interactive and engaging.
The image above shows the wireframing for the user experience design. Now let’s go through the details of different pages which are part that design.
01. Home Page
This is the home page or the opening page for every Module. It introduces the user to the Module. It displays,
-
- The learning Objectives for that Module.
- Different Chapters which are part of that Module.
- Awards acquired in a particular Chapter.
- Information regarding how to acquire Awards.
02. Table Of Contents Page
Once you click on any of the Chapter Name mentioned in the Home Page, you will be directed to this page. This page displays,
-
- Table Of Contents (TOC) for that particular Chapter.
- A home button, which when clicked will take you back to the Home Page.
- Tabs with all the ( Lessons + Quiz ) related to that Chapter.
When a user lands on this page for the first time, they can access only “Lesson 1” tab.
03. 1st page of a Lesson
Once you click on “Lesson 1” tab, you will be directed to this page. This page displays,
-
- Active Lesson highlighted.
- Learning content related to that Lesson.
- A home button, which when clicked will take you back to the Home Page.
- A TOC button, which when clicked will take you back to the TOC Page.
User can use the “Next” and “Prev” button to navigate through the Lesson content.
04. Last page of a Lesson
Once a user navigates through the Lesson content and reaches the last page of that particular Lesson the next “Lesson” tab gets activated. For example, Once Lesson 1 is completed “Lesson 2” tab gets activated, and when Lesson 2 is completed “Lesson 3” tab gets activated, and so on…
Once the last lesson is completed, “Quiz” tab is activated.
05. Last page of Last Lesson
Once a user navigates through all the Lesson’s content and reaches the last page of the last Lesson, the “Quiz” tab is activated.
06. Quiz Page
Once the user clicks the “Quiz” tab they are greeted with this page. Once you enter the Quiz, you have no access to any of the Lessons and the Home Page. This page displays,
-
- The quiz question no.
- The quiz question itself.
- The submit button.
- The Navigation buttons (inactive initially)
The navigation buttons get activated when the Quiz is completed. The user can uses them to navigate when they revisits the Quiz.
Let me explain my concept for the Quiz.
-
- The quiz will have questions related to the Chapter.
- If the user gives a correct answer, they can proceed to the next question.
- If the user gives an incorrect answer, they are presented with correct answer explanation and given two options,
-
- “Proceed”, if you have understood the correct answer. — Once clicked, you are greeted with the next question.
- “Confused”, if you are confused. — Once clicked, they are given a small Task to perform. Once they perform the Task, they are again given two options,
-
- “Proceed”, if you have understood the correct answer. — Once clicked, you are greeted with the next question.
- “Still Confused” if you are still confused. — Once clicked you are asked to talk to the faculty and get your doubts cleared. And once the doubt is clear you can proceed with the next question.
-
-
Let’s see individual feedback pages to get the above explanation much clear.
07. Feedback for “Correct” Answer
If user gives correct answer, they are congratulated and asked to proceed to next question.
08. Feedback for “Incorrect” Answer
If user gives incorrect answer, they are explained about the correct answer and are asked either “to proceed to next question” or “to perform the task”.
09. Feedback for Incorrect Answer and “Task” is clicked
If the user clicks the “Task” button they are presented with this page. It assigns them a small task to be performed then and there and get back. After the task is performed they again have two options, either “to proceed to next question” (if they their doubt is cleared) or “still confused” (if they still have a doubt).
10. Feedback for Incorrect Answer and “Still Confused” is clicked
After performing the task, if the user clicks the “Still Confused” button they are presented with this page. They are asked to get their doubt is cleared from the faculty. And once the doubt is cleared they can proceed with the Quiz.
What could be improved upon or added?
As this was my first Project in Articulate Storyline, I have tried my best to make the user experience very clear and easy. But, I feel there are a few improvements that could be incorporated,
-
- Providing interactivity in TOC contents. I mean, that once user clicks on the content, they are taken to that page directly.
- Add animations in few places to guide user to click at a certain tab or button for proceeding in the way I want them to.
I have learnt a lot about Articulate Storyline by working on this Project. It has helped me become familiar with scenes, slides, layers… which will surely help me in my further Storyline Projects.