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.

Audience: Small Business Owners.
Responsibility: Instructional Design, eLearning Development, Visual Design, Learning Platform management, Data tracking and reporting
Tools: MS Powerpoint, Mural, Genially, Zoom video conferencing Platform, LearnDash Learning Management System LMS, Google Forms, Learning objectives easy generator

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.

The learning goals and expected outcomes were realised after careful analysis of the learners need and the business goal. My client wanted to solve a problem by training the audience in website design skill and generate revenue at the same time. We decided to engage the prospective learners to determine if they were interested in the course and how to help them get the best out of it.

I conducted a need analysis which resulted in the decision to adopt a blended workshop-based learning design. The learning method would involve multimedia self-paced learning, virtual classroom practical sessions and social learning

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?


WHO-Persona Analysis

WHY- Business goal analysis and learning outcomes

  • Creating effective objectives by applying the ABCD structure, SMART outcomes and Bloom's taxonomy.

    WHAT- Content Mapping(Micro and Macro)

    HOW- Learning Experience: I adopted the following design principles

  • Visual design principles for digital learning namely: CRAP( Contrast, Repetition, Allignment and Proximity)
  • Multimedia principles i.e., Signalling, personalisation, Segmentation and cognitive overload
  • Instructional Design principle (Gagne's steps).: Hook, Objective, Navigation, Content presentation, Summary, next step

  • 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.


    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.


    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.


    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.


    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.


    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.