LDTC 615: UX and UI Design in Course Development
About the Course:
UX and UI Design in Course Development
A hands-on introduction to the principles of user experience (UX) and user interface (UI) design as applied to online learning. The objective is to design intuitive and visually appealing interfaces, using industry recognized tools that enhance overall learner experience in digital learning environments. Topics include user-centered and inclusive design, information architecture, wireframing and prototyping, visual design principles, responsive and mobile design, accessibility, usability testing, and design tools and software.
Kirkpatrick Level 1 (Unit 2)
Kirk Patrick Level 1 Survey
This Level 1 survey gathers learner feedback on the Setting Up WordPress and Elementor to Create a Landing Page minicourse. The results help assess how well the course prepared new team members at RJSmith Creative to begin real project work.
Kirkpatrick Level 1 Survey: Learner Reactions
Minicourse: Setting Up WordPress and Elementor to Create a Landing Page
Thank you for completing the Setting Up WordPress and Elementor to Create a Landing Page minicourse!
This short survey includes 10 questions and should take about 3–5 minutes to complete. Your feedback helps us improve the learning experience and make future versions of the course even better, and also lets us know how effectively this course prepared you to begin real-world projects using WordPress and Elementor.
Your responses are completely anonymous, and the feedback you share will only be used internally to help refine this minicourse for future team members. Nothing you submit will be shared or published outside of RJSmith Creative.
We appreciate you taking the time to share your thoughts and experiences!
Kirkpatrick Level 2 (Unit 3)
Kirkpatrick Level 2: Knowledge and Skill Assessment
Module/Lesson: Introduction to WordPress & Elementor
Assessment Type: Automated quiz with immediate feedback
Aligned Course Learning Outcomes (CLOs)
Set up and configure a WordPress website on SiteGround hosting, including managing basic settings and essential plugins.
Install and use the Elementor page builder to design a responsive, functional landing page following client specifications.
Aligned Module Learning Objectives
Identify key components of the WordPress dashboard.
Install and activate a theme and the Elementor plugin.
Differentiate between WordPress posts, pages, and templates.
Use Elementor’s interface to add and arrange widgets in a layout.
Save and preview design changes within WordPress.
Learning Materials and Activities
Learners watch a short video introducing the WordPress dashboard, then complete a guided practice activity building a simple homepage section in Elementor.
Assessment Instructions
This assessment contains 10 questions.
You will receive immediate feedback after each question.
You may retake the quiz as many times as needed; your highest score will be recorded.
The quiz is worth 20 points total, and a passing score is 70%.
The quiz can be completed on desktop or mobile devices.
Follow on-screen prompts for matching and drag-and-drop questions.
Discussion & Assignment Prompts (Unit 4)
Unit 4: Discussion & Assignment Prompts
Module/Lesson: Introduction to WordPress & Elementor
Aligned Course Learning Outcomes (CLOs)
Install and configure a WordPress website on SiteGround hosting, including managing basic settings and essential plugins.
Install and use the Elementor page builder to design a responsive, functional landing page following client specifications.
Aligned Module Learning Objectives
Identify key components of the WordPress dashboard.
Install and activate a theme and the Elementor plugin.
Differentiate between WordPress posts, pages, and templates.
Use Elementor’s interface to add and arrange widgets in a layout.
Save and preview design changes within WordPress.
Learning Materials and Activities
Learners will watch a brief video tutorial introducing WordPress and Elementor, complete a guided practice to build their first hero section in Elementor, and take a short quiz to reinforce dashboard navigation and design concepts.
Discussion Prompt 1: Getting Comfortable with WordPress
Aligned Learning Objective: Identify the key components of the WordPress dashboard.
Prompt Text:
Before we dive into using Elementor, take a few minutes to explore your WordPress dashboard. In your post, describe one area or feature you were already familiar with and one that you had never used before. What surprised you about the layout or organization of the dashboard?
Participation Requirements:
Initial post: at least 150 words, sharing your reflections.
Reply to at least one teammate with helpful tips, insights, or short questions that deepen discussion.
Discussion Prompt 2: Your First Impressions of Elementor
Aligned Learning Objective: Use Elementor’s interface to add and arrange widgets in a page layout.
Prompt Text:
After watching the tutorial and building your first hero section, reflect on your first impressions of using Elementor. Which widget did you find most useful, and which one do you want to experiment with more? What was easier or harder than you expected about the drag-and-drop process?
Participation Requirements:
Initial post: at least 150 words, including one screenshot of your Elementor workspace or design-in-progress.
Reply to at least one teammate with constructive comments or design suggestions.
Assignment Prompt: Build Your First Hero Section
Aligned Learning Objectives:
Use Elementor’s interface to add and arrange widgets in a page layout.
Save and preview design changes within the WordPress environment.
Description:
For this assignment, you’ll apply what you’ve learned by building a simple hero section in Elementor. Your design should include a background image or color, a heading, a short subheading, and a button.
Instructions:
Watch the tutorial and follow the guided practice.
Create your hero section in Elementor using the structure discussed in the lesson.
Publish or preview your design.
Submit a link to your live or preview page.
Submission Guidelines:
Submit the link to your page via the course assignment submission area.
Include a short 2 to 3 sentence reflection describing one thing you learned while completing this activity.
Submission format: URL only (no attachments required).
Assessment Criteria:
Completeness of design elements (heading, subheading, button, background).
Clear and readable layout.
Evidence of understanding Elementor’s tools and layout options.
**Note: Although this exercise includes two discussion prompts, I do not plan to use discussion boards in the final version of my minicourse. As noted in my IDD, the Setting Up WordPress and Elementor to Create a Landing Page course is designed to be completely asynchronous. Learners will join at different times as part of their onboarding process, so peer-to-peer interaction will be limited. However, writing these discussion prompts was still a valuable exercise because it helped me think through reflection-based questions that could be included in other ways, such as short written reflections, end-of-module check-ins, or optional feedback prompts. These activities would still encourage learners to pause, reflect, and connect what they are learning to real client projects, even without a live discussion component.
Discussion & Assignment Prompt Rubrics (Unit 5)
Unit 5: Discussion & Assignment Prompt Rubrics
Rubric for Discussion Prompt 2: Your First Impressions of Elementor
Prompt Text:
After watching the tutorial and building your first hero section, reflect on your first impressions of using Elementor. Which widget did you find most useful, and which one do you want to experiment with more? What was easier or harder than you expected about the drag-and-drop process?
Participation Requirements:
Initial post: at least 150 words, including one screenshot of your Elementor workspace or design-in-progress.
Reply to at least one teammate with constructive comments or design suggestions.
Discussion Post is Worth 100 Points Total
| Criteria | Weight | Exceeds Expectations | Meets Expectations | Approaches Expectations | Below Expectations |
|---|---|---|---|---|---|
| Knowledge & Accuracy | 30 pts | 30 pts – Demonstrates deep understanding of Elementor features; clearly connects reflections to tutorial content and hero section activity. | 24 pts – Accurate explanation of Elementor experience with clear reflections based on the activity. | 18 pts – Shows limited understanding; reflections are vague or overly general. | 12 pts – Misunderstands key features or provides minimal/irrelevant content. |
| Critical Thinking & Insight | 30 pts | 30 pts – Provides thoughtful analysis of challenges, learning moments, and future goals; includes specific examples. | 24 pts – Adequately describes challenges and insights with some detail. | 18 pts – Mentions challenges or insights but lacks depth and specificity. | 12 pts – Little to no reflection or critical thought demonstrated. |
| Engagement With Peers | 20 pts | 20 pts – Responds to 2+ peers with insightful, supportive comments that deepen discussion. | 16 pts – Responds to 2 peers with relevant comments. | 12 pts – Responds to only 1 peer or responses are brief/surface-level. | 8 pts – No peer responses or responses are irrelevant. |
| Writing Mechanics & Clarity | 10 pts | 10 pts – Writing is clear, well-organized, and error-free. | 8 pts – Writing is mostly clear with minor errors. | 6 pts – Writing lacks clarity or contains several errors. | 3 pts – Writing is unclear, incomplete, or difficult to follow. |
| Timeliness & Requirements | 10 pts | 10 pts – Post and responses submitted by deadline and include required screenshot. | 8 pts – Post and responses submitted by deadline OR screenshot missing. | 6 pts – One or more late submissions; missing required elements. | 3 pts – Does not meet submission requirements. |
Rubric for Assignment Build Your First Hero Section
Assignment Overview:
Create a simple hero section in Elementor that includes:
A background (image or color)
A heading
A short subheading
A button
Submit a link to your live/preview page + a 2–3 sentence reflection describing something you learned.
| Criteria | Weight | Exceeds Expectations | Meets Expectations | Approaches Expectations | Below Expectations |
|---|---|---|---|---|---|
| Completion of Required Elements | 30 pts | 30 pts – All required elements are present (background, heading, subheading, button), well-configured, and visually cohesive. | 24 pts – All required elements are included with basic accuracy. | 18 pts – One required element missing OR elements added incorrectly. | 12 pts – Multiple required elements missing or incorrectly implemented. |
| Use of Elementor Tools | 30 pts | 30 pts – Demonstrates strong understanding of Elementor: proper widget use, clear structure, and purposeful design choices. | 24 pts – Shows functional use of Elementor with generally correct widget placement. | 18 pts – Limited understanding of Elementor tools; layout is disorganized. | 12 pts – Little to no understanding of Elementor; incorrect or incomplete use of widgets. |
| Design Quality & Layout | 20 pts | 20 pts – Layout is visually appealing, consistent, and readable; spacing, alignment, and hierarchy are thoughtfully used. | 16 pts – Layout is clear and readable with some attention to visual structure. | 12 pts – Layout has readability or spacing issues; lacks visual hierarchy. | 8 pts – Layout is unclear, cluttered, or difficult to interpret. |
| Reflection Quality | 15 pts | 15 pts – Reflection provides meaningful insight into the learning process with a specific example. | 12 pts – Reflection is complete and offers a general summary of learning. | 8 pts – Reflection is incomplete or lacks detail. | 5 pts – No reflection submitted or reflection off-topic. |
| Submission Quality (Link & Functionality) | 10 pts | 10 pts – Link works correctly and displays the intended page without issues. | 8 pts – Link works but may require clarification. | 6 pts – Link provided but does not load properly. | 0 pts – No link submitted. |
Opening Presentation Screencast (Unit 6)
Opening Presentation Screencast - Module 1
This opening presentation introduces learners to the core tools used throughout the minicourse: WordPress and Elementor. In this short overview, I explain how the two platforms work together, outline the learning objectives for the module, and guide learners through what to expect as they move through the lesson content, video, and reflection activity. The goal of this screencast is to establish a strong conceptual foundation before learners begin hands-on configuration and design work in later modules.
A full transcript is provided below the screencast to support accessibility and learner preference.
Video Transcript
Welcome to Module One, Introduction to WordPress and Elementor.
In this module, you will gain a clear understanding of two core tools we use at RJSmith Creative to build client websites. Before we ever dive into settings, templates, or full page design, it is important that you understand what these tools are and how they work together behind the scenes.
We are starting here because this foundation will make everything that comes later, such as configuring WordPress or using Elementor to design layouts, feel far more intuitive.
By the end of this module, you will be able to explain what WordPress is and the role it plays in running a website. You will also be able to describe how Elementor works as a visual, drag-and-drop design tool inside of WordPress and how the two tools work together.
These concepts are essential because every project you work on at RJSmith Creative will use both WordPress and Elementor side by side.
Once you log into the classroom, you will click into Module One and open the lesson titled WordPress and Elementor Basics. The first section explains what WordPress is and what Elementor is. I recommend taking a few minutes to read through this page so you understand what each tool does and the difference between them.
After reviewing the written overview, you will watch a video that is about ten minutes long by Rino de Boer, a well-known Elementor educator. In this video, he breaks down how Elementor works inside of WordPress, what the interface looks like, and how WordPress, your theme, and Elementor interact.
As you watch, pay close attention to the structure of the Elementor editor. You will be using these same building blocks later in Module Two when you begin your first hands-on practice activity.
You may notice that the video shows a slightly older version of the Elementor interface. Some colors or visual details may look different, but the core functionality and structure remain the same. The way Elementor works inside WordPress and the relationship between the two tools has not changed.
After finishing the video, you will complete a short reflection activity. Click the Start Quiz button and respond to the prompt asking you to describe, in your own words, what WordPress does and how Elementor works with it.
Your response does not need to be long. It simply needs to clearly show that you understand the difference between the two tools and how they relate to each other. This reflection helps reinforce the foundation before we move forward.
By grounding yourself in the “why” and the “how” behind WordPress and Elementor, you will be better prepared for everything else we do later in this course, in future courses, and in client project work.
When you are ready, start with the first section in Module One, complete the reflection, and I will see you in Module Two.
Minicourse Syllabus (Unit 7)
Minicourse Syllabus
Setting Up WordPress & Elementor To Create a Landing Page
Instructor Contact
Instructor: Robin J. Smith
Email: robin@rjsmithcreative.com
Office Hours: Asynchronous; optional 1:1 Zoom sessions available by appointment
Location: Remote – US Mountain Time (UTC−7 with Daylight Saving adjustments as applicable)
Course Description
This minicourse provides new RJSmith Creative interns and entry-level web designers with a structured, hands-on introduction to setting up WordPress on SiteGround, preparing a development environment, configuring Elementor, and building a simple landing page.
The course emphasizes step-by-step procedural learning and is designed to fill the practical skill gaps common among new team members who understand HTML/CSS but lack experience with WordPress-based workflows. By the end of this course, learners will be able to set up WordPress correctly, configure Elementor for agency-ready design, and create a basic landing page including a hero section, bio section, and contact section.
This course is delivered asynchronously and prepares learners to contribute meaningfully and confidently to client projects in their first weeks at RJSmith Creative.
Course Prerequisites
Learners should enter the course with:
Technical Knowledge
Basic HTML and CSS understanding
Familiarity with semantic HTML structure
Ability to troubleshoot simple browser rendering issues
Design Foundations
Basic understanding of layout, spacing, visual hierarchy, and typography
Computer & Workflow Skills
Intermediate computer skills
Ability to follow multi-step instructions
Motivation to learn new tools and workflows
Not Required
Learners do not need:
Their own hosting or domain
Prior WordPress or Elementor experience
Paid software
RJSmith Creative provides all required access to SiteGround, staging environments, plugins, and course tools.
Technology Requirements
Laptop or desktop computer
Reliable internet connection
Google Chrome (recommended)
Ability to view video tutorials and open PDF guides
Access to course-provided WordPress environments and plugins
Course Learning Outcomes (CLOs)
By the end of this minicourse, learners will be able to:
Set up WordPress on SiteGround using the agency’s workflow, including installation, environment preparation, and security basics.
Configure WordPress and Elementor according to RJSmith Creative standards, including installing plugins, themes, and applying foundational settings.
Design a simple landing page using Elementor, applying core design principles and producing a functional hero section, bio section, and contact section.
Training Outline
This schedule assumes a self-paced structure. Learners may complete activities sooner or later as needed.
| Module | Topic | Estimated Time |
|---|---|---|
| Module 1 | Installing WordPress on SiteGround Hosting | 1–2 hours |
| Module 2 | Setting Up WordPress & Elementor | 2–3 hours |
| Module 3 | Design Your First Landing Page | 3–4 hours |
Module Overview & Alignment Map
| Module | Module Learning Objectives | Aligned CLOs | Learning Activities & Assessments |
|---|---|---|---|
| Module 1: Installing WordPress on SiteGround | – Explain the purpose of hosting and environments. – Install WordPress on a SiteGround subdomain. – Demonstrate initial login and platform navigation. | CLO 1 | Video tutorial; step-by-step installation guide; practice task uploading a screenshot of successful installation. |
| Module 2: Setting Up WordPress & Elementor | – Install required plugins and themes. – Configure WordPress settings (permalinks, timezone, reading settings). – Adjust Elementor global settings and default styles. | CLO 1, CLO 2 | Multi-video guided setup; settings checklist; short auto-graded quiz. |
| Module 3: Design Your First Landing Page in Elementor | – Build a simple landing page containing a hero section, bio section, and contact section. – Select and use basic Elementor widgets. – Publish a working landing page and submit the link. | CLO 2, CLO 3 | Design walkthrough video; practice building each section; assignment to submit landing page URL. |
Grading Policy
This minicourse is part of RJSmith Creative’s onboarding and training process and therefore uses a feedback-based system rather than traditional grading.
Assessment Structure
Module quizzes use automated scoring (non-graded) to reinforce key concepts.
Landing Page Assignment may include an optional points-based rubric (e.g., 100 points) for structured feedback on technical accuracy and design quality.
Completion Requirement
Learners must complete all modules and submit the final landing page to be marked as successfully completing the course.
Late Policy
Since the course is asynchronous and part of onboarding, learners are encouraged to complete modules promptly. However, deadlines are flexible. If additional time is needed, learners should communicate with the instructor to arrange a revised timeline.
Professional Conduct & Integrity Policy
All learners are expected to complete their own work and follow the steps as outlined in the training modules. This minicourse is designed to evaluate your readiness for client projects and your ability to follow agency workflows, so it’s important that your submissions reflect your own understanding and skills.
Collaboration is welcome when asking questions or seeking clarification, but copying another learner’s design, using prebuilt templates not provided in the course, or misrepresenting work as your own is not permitted. If you run into challenges, please reach out for support — the goal is learning, not perfection.
Professional Conduct & Integrity Policy
This minicourse is designed with accessibility in mind. Videos include captions, images include alt text, and course materials follow general accessibility best practices to support a wide range of learners.
If you require additional accommodations or alternative formats, please contact the instructor. I am committed to ensuring that all learners can fully participate in the course and will make reasonable adjustments as needed to support your learning.
Minicourse Evaluation (Unit 8)
Minicourse Evaluation
I evaluated my minicourse using the OSCQR Course Design Review rubric. Overall, the course performed well across most standards, especially in areas related to course organization, clarity, instructor presence, and use of multimedia. The evaluation confirmed that the course is easy to navigate, clearly structured, and appropriate for an asynchronous onboarding experience.
The course includes a clear welcome, course overview, and module-level introductions that help learners understand what to expect and how content is organized. Learners are guided through each module using introductory text, screencast videos, and clearly labeled activities. Instructor presence is established through narrated videos and written guidance, which helps learners feel supported even without real-time interaction.
Some OSCQR standards related to learner-to-learner interaction and community building were identified as areas for minor improvement. This was largely intentional, as the course is designed for rolling enrollment and independent completion rather than cohort-based participation. However, the evaluation highlighted opportunities for future enhancement, such as adding optional discussion prompts, shared examples, or resource-sharing spaces that allow learners to benefit from peer insights without requiring synchronous participation.
If I were to revise the course, I would add a few low-pressure engagement options that maintain flexibility while increasing connection. For example, an optional reflection where learners share prior experience with WordPress or Elementor, or a space to share helpful resources or tips, could strengthen engagement without changing the core structure of the course.
Using the OSCQR rubric helped me evaluate the course more objectively and identify areas for continuous improvement. This review will guide future iterations of the minicourse and support the development of additional training modules, ensuring the course remains clear, practical, and effective for new team members.