Executive Summary

The Instructional Design Document (IDD) outlines the design and development of a self-paced online minicourse titled Designing a User-Friendly App Prototype. The course is intended for beginners who want to transform an app idea into a user-centered prototype using foundational UX principles and design tools.

The project follows a systematic instructional design process that includes learner analysis, learning outcomes development, instructional strategy selection, multimedia design, and formative evaluation. Together, the artifacts contained within this IDD demonstrate the planning, design, development, and evaluation decisions that informed the creation of the course.

Course Title: Designing a User-Friendly App Prototype

A UX beginner minicourse that guides learners from app idea → wireframe → interactive prototype

Helping beginners transform ideas into usable digital prototypes using UX design principles.

How to design a user-friendly app prototype

This self-paced UX minicourse introduces learners to user experience design by guiding them through the process of turning an app idea into a structured prototype. Learners progress through UX fundamentals, app concept development, wireframing, prototyping, and usability evaluation using interactive tools such as Genially and TalentLMS.

Knowledge/Learning Gap

Many beginners and aspiring designers have innovative app ideas but lack the following:

Understanding of UX principles
A structured design process
Experience using design tools
Ability to translate ideas into prototypes

This course addresses this gap by providing a step-by-step, hands-on UX learning experience that transforms ideas into functional prototypes.

Target Audience & Learner Profile

This course is designed for:

Beginner UX learners
College students
Aspiring entrepreneurs
Career changers exploring digital design

Learner Characteristics:

No prior UX experience required
Basic computer literacy
Interest in app development or design thinking

Needs:

Step-by-step guidance
Visual learning
Hands-on practice

Course type and Modality

Course Type: How-To Course

This minicourse is designed as a “How-To” course, guiding learners from the conceptual stage of an app idea to creating a fully functioning prototype. The course emphasizes hands-on learning, where learners acquire practical skills such as using design and prototyping tools, creating layouts, and building interactive app features.

A how-to course is the most suitable type for addressing the identified learning gap because learners need step-by-step guidance and applied practice to move from theory to actual implementation. By focusing on doing rather than just knowing, the course ensures learners can directly translate the instruction into tangible outcomes, which is essential for developing functional app prototypes.

Course Modality: Self-paced, asynchronous Online minicourse

This minicourse on designing a user-friendly app prototype will be delivered in an asynchronous online format. Learners can access tutorials, templates, and exercises at their own pace, allowing them to pause, review, and practice as needed; this flexibility accommodates learners with varying technical skills, schedules, and learning speeds, ensuring that everyone can progress comfortably.

Asynchronous delivery also enables the integration of accessibility features, such as video captions and screen reader support, and allows learners to revisit course materials anytime. Additionally, this modality makes the course accessible to a diverse, geographically dispersed audience without being constrained by live session schedules, making it an inclusive and learner-centered approach.

Delivery Platforms:

TalentLMS (course delivery)
Genially (interactive learning activities)
Canva / multimedia tools (supporting materials)

Learning Approach:

Hands-on learning
Project-based progression
Interactive exploration
Reflection-based learning

Course Learning Outcomes

The learning outcomes follow a scaffolded progression that moves learners from understanding foundational UX concepts to creating and evaluating a working prototype. Each outcome builds upon the previous one to support gradual skill development.

By the end of this course, learners will be able to:

CLO 1: Explain foundational UX principles including usability and user-centered design.

CLO 2: Transform an app idea into a structured app concept using an app concept template.

CLO 3: Create basic/low-fidelity wireframes representing user flow and layout.

CLO 4: Build an interactive prototype using a beginner-friendly design tool.

CLO 5: Apply design principles such as consistency, simplicity, and visual hierarchy to improve usability.

CLO 6: Evaluate and refine a prototype based on usability feedback.

Learning Activities

Course Map / Modules: The course is organized into six modules that align directly with the course learning outcomes. The sequence follows a logical design process beginning with UX fundamentals and ending with prototype evaluation and refinement.

Each module includes:

Interactive Genially lessons
UX reflection questions
Design worksheets/templates
Wireframe and prototype tasks
Self-check quizzes
Peer/feedback evaluation activities

Sample Alignment

Course Learning Outcome (CLO) 3:

Create a basic wireframe with at least three connected screens that represent the layout and user flow of their app.

Module Title: Week 3 – Foundations of Layout Design

Module Learning Objectives (MLOs):

By the end of this module, learners will be able to:

1. Identify at least three key app screens and determine their sequence within a user flow. (Aligned with CLO 3)

2. Explain the concept of user flow and how users navigate between screens. (Aligned with CLO 3)

3. Create a basic wireframe layout for at least three connected screens using a template or design tool. (Aligned with CLO 3)

4. Demonstrate user flow by linking screens to show navigation between them. (Aligned with CLO 3)

Content & Activities:

Content:

Wireframing Templates - Supports learners by providing structure for creating layouts (aligns with MLO3)
Video Tutorial: Introduction to Wireframing - Supports learners by explaining key concepts like user flow (aligns with MLO2)
Video Tutorial: Using Design Tools (e.g., Figma) - Supports learners by demonstrating how to build and connect screens (aligns with MLO3 and MLO4)

Activities:

Interactive Wireframing Quiz – Learners answer questions about layout design and user flow concepts. (Aligns with MLO 1 & 2)
Video Demo and Practice Assignment (Create your wireframe) – Learners follow a guided tutorial to create a wireframe with at least three connected screens. (Aligns with MLO 3 & 4)
Discussion Forum – Learners share their wireframes and briefly explain their screen flow and design choices. (Aligns with MLO 1, 2 & 4.)

Assessment Strategies:

User Flow Identification Quiz (Objectives 1 and 2) - Learners will go through a short quiz to identify correct screen sequences and basic navigation flows.
Wireframe Draft Submission (Objective 3) - Learners will submit an initial draft of their wireframe (3 screens minimum). Feedback will be provided by the instructor (me) and/or a peer.
Linked Screen Navigation Task (Objective 4) - Learners will demonstrate their user flow by connecting screens within their wireframe (e.g., showing button navigation).

SMEs & Resources

Sylvia Mogeni (Instructional Designer & Content Developer): As the primary designer of this minicourse, I will serve as a subject matter expert in structuring the learning experience, developing content, and aligning instructional materials with course learning outcomes. I bring knowledge of instructional design principles, learner-centered approaches, and course development strategies to ensure the minicourse is engaging and effective.

Peer Reviewer / Colleague (Instructional or Learning Design Background): A peer with experience in instructional design or education can provide feedback on course structure, clarity of instructions, and alignment between learning objectives, activities, and assessments; this perspective will help improve the overall quality and usability of the course.

UX/UI Design Practitioner (Optional Consultant): A professional with experience in user experience (UX) and user interface (UI) design may be consulted to ensure that the design principles, wireframing practices, and prototyping techniques taught in the course reflect current industry standards. Their input would help validate the accuracy and relevance of the content, particularly for beginners learning real-world skills.

Beginner Learner (Pilot Tester): A representative from the target audience (e.g., a beginner with no prior UX experience) will be involved during pilot testing. Their feedback will be valuable in identifying areas of confusion, ensuring accessibility, and confirming that the course meets the needs of novice learners.

Instructional Design Model/ Approach

Model Used:

ADDIE Model and Iterative Design Approach

Analysis: Identified gap in beginner UX skills
Design: Structured modular UX learning journey
Development: Created interactive Genially + LMS content
Implementation: Delivered via TalentLMS
Evaluation: Planned via quizzes, surveys, and prototype review

Learning Theory

The learning theories that effectively drive the design of the learning activities within my minicourse are a combination of constructivism, experiential learning, and project-based learning (PBL).

Constructivist learning theory suggests that learners build knowledge through active engagement and meaningful experiences, which aligns with my minicourse, as learners actively construct their understanding by transforming their app ideas into wireframes and prototypes rather than passively receiving information. Activities such as wireframing and prototyping allow learners to apply concepts in a meaningful context.

Experiential learning theory (Kolb) further supports this approach by emphasizing learning through doing, reflection, and iteration. In my minicourse, learners engage in a cycle of creating a wireframe, receiving feedback (through peer review or usability checklists), and refining their designs; this mirrors the experiential learning cycle of action, reflection, and improvement.

Additionally, the course is grounded in Project-Based Learning (PBL), as learners work on a continuous, real-world project, developing a user-centered app prototype. The approach promotes deeper engagement, problem-solving, and the application of knowledge across multiple stages of the course.

Together, these theories support a learner-centered, active, and iterative learning experience, which is essential for helping beginners build both confidence and practical skills in the app design.

In the previous course (LDTC 600), when I was first introduced to learning theories, I initially connected my minicourse idea to constructivism, as it emphasizes active, hands-on learning, and to connectivism, due to the course’s reliance on digital tools and technology. As I have progressed, my understanding has expanded to include experiential learning theory and project-based learning (PBL), both of which I had briefly encountered before. These theories now more strongly inform my design, as they align closely with the practical, iterative, and learner-centered nature of my minicourse.

Digital Media Checklist

This checklist by S.Mogeni is an adaptation of "Checklist for Evaluating Open Educational Resources (OER)."It is designed to assess the quality of a digital resource, determine whether it meets Open Educational Resource (OER) standards, and evaluate its suitability for integration into the minicourse Designing a User-Friendly Prototype

Digital Document

Module 1 Audio

00:00 / 02:04

Module 1 Audio

00:00 / 02:04

Course Branding & Visual Design

This page showcases digital media assets developed to support learning experiences, instructional design projects, and user-centered course development. The collection demonstrates the use of visual communication, multimedia design, and educational technology to enhance learner engagement and support course objectives.

Through instructional videos, animated content, branding materials, and visual learning resources, these projects reflect my approach to creating accessible, engaging, and learner-focused digital experiences.

Logo Design

A custom logo created to establish a professional visual identity for instructional design and learning projects.

Online course enrollment flyer featuring three app wireframe examples and contact information for registration and inquiries.

Course Flyer

This promotional flyer was designed to introduce learners to the minicourse, communicate learning benefits, and provide a visually engaging overview of the course experience. The flyer incorporates principles of visual hierarchy, readability, and audience-centered communication.

MULTIMEDIA LEARNING RESOURCES

Module 3 Instructional Video: Creating Three Connected Wireframes

This instructional video demonstrates the process of creating three connected wireframes for a mobile application prototype. Learners are guided through the development of screen layouts and user flows while applying foundational UX design principles.

Learning Design Considerations:
• Step-by-step demonstration
• Screen-recorded instruction
• Practical application of UX concepts
• Support for self-paced learning

Minicourse Animated Video

Course Introduction Animation

This animated welcome video introduces learners to the minicourse and establishes expectations for the learning journey. Animation and visual storytelling are used to create an engaging first impression while providing key course information in an accessible format.

Learning Design Considerations:
• Learner engagement through animation
• Visual storytelling
• Accessibility through captions
• Clear communication of course purpose

TOOLS & TECHNOLOGIES

• Canva
• Powtoon
• Loom
• Canvas LMS
• Microsoft PowerPoint
• UX Design Tools
• Multimedia Production Tools

These tools were used to design, develop, and deliver the digital media assets featured throughout this portfolio.

Storyboard

The storyboard was developed to visualize the learner experience before course development. Creating the storyboard allowed content sequencing, interaction planning, and alignment verification prior to building the course in the LMS.

Interactive Module

Assessment Strategy

Formative Assessments:

Quizzes (UX concepts)
Reflection prompts
Practice activities

Summative Assessments:

App concept design brief (CLO2)
Wireframe submission (CLO3)
Interactive prototype (CLO4)
Usability evaluation + revised prototype (CLO6)

Evaluation Plan

Course effectiveness will be evaluated using:

Kirkpatrick Level 1 (Reaction)

Learner satisfaction survey via Microsoft Forms

Performance Measures:

Quiz scores (CLO1)
Quality of design outputs (CLO2–CLO4)
Prototype usability improvements (CLO6)

Continuous Improvement:

Learner feedback review
Iterative course updates based on results