Introduction to Website Design
Multimedia course for self-paced eLearning
.
Introduction to Website Design
A multimedia course introducing introducing small business owners to the tools required for building a simple e-commerce website.
1. Overview
A digital services company wanted to creat a simple course in website design to be taken by small business owners who were finding it hard to make sales during the Covid pandemic lockdown. Many of the audience being targeted had social media presence but were lacking competitive advantage as they were not considered credible by serious buyers because they did not have websites.
2. Process
I carried out the project by adopting the ADDIE framework and DESIGN THINKING approach which is similar to the agile SAM methodology involving prototyping and iterations.
ANALYSIS: This involved establishing the WHO (audience) and WHY(Learning outcomes in relation to Business goal) of the project with the stakeholders.
DESIGN: Working with the Subject Matter Expert, SME at this stage, we determined the WHAT of the project by creating a content plan based on the learning outcomes. I also established the HOW, that is, an engaging learning experience.
DEVELOPMENT: The development of learning prototype, iterations and final content.
IMPLEMENTATION: Finalizing, publiishing and delivering the learning .
EVALUATION: Assesments, feedbacks, data tracking and reporting.
At the end of the analysis and design stages, the stakeholders are handed the Scoping document which answers the questions, WHO? WHY? WHAT? AND HOW?
ANALYSIS
WHO-Persona Analysis
WHY- Business goal analysis and learning outcomes
DESIGN
WHAT- Content Mapping(Micro and Macro)
HOW- Learning Experience: I adopted the following design principles
Micro Content Planning- This involved the detailed breakdown of topics. The content consists of instructions and videos for no-code template-based designs because learners have no coding skills. Module 1 was designed to be a self-managed multimedia content using Gnially and it is the introduction to the entire course. .
Figures below show the breakdown of topics for Module 1.
SCREEN PLAN
I created on Microsft powerpoint a one-page visual screen plan showing the planned flow of the e-learning resource based on Gagne's nine events of instructional design principles.
STORYBOARDING
The pictures below showcase a combination of scripts and visual story boards for some of the screens created for the interactive module including the content and quizzes.
The storyboard designs were based on the learning outcomes and content mapping done with the SME. These were presented to the SME and stakeholders and iterations were done based oon feedback given by them.
VISUAL MOCK UPS
Once I got sign-off for the storyboards, I created visual mock-ups using MS powerpoint because it had the featires I needed to achieve what my client wanted. This allowed me to create several iterations of the visual design of the project based on the screen plan layout. The colors used were based on the client's brand colors however, I ensured to apply design principles to combine the colors.
INTERACTIVE PROTOTYPE
I created an interactive prototype with the visual mock ups on Genially to test the functionality of the project and give the client a chance to give feedback on it before it was fully developed. This included buttons and a pop up menu for easy navigation between sections.
Results and Takeaways
Through this project, I deepened my understanding and use of Genially as an interactive visual design and authoring tool. though the elearning templates and suggests a timeline in form of a page to showcase a table of content for the course content, I was a ble o use the intearctivity features to create a pop-up menu to be on the pages to avoid having to always navigate to a timeline page to access others slides.
xAPI: I would like to implement xAPI for better data tracking on user interaction probably for a future revision or a new project. This would help discover areas where learners found uninteresting or difficult so that I can further improve their experience with the use of data.
EXPERIENCE THE PROTOTYPE
As a result of non-disclosure agreement, I am not able to show the complete project while some texts and names are not real. However, the prototype gives a good sense of the project.