Project 1 represents the strategic design, development, and deployment of my professional instructional-design portfolio website, developed to serve both as an academic capstone and a dynamic professional showcase. This initiative unified instructional systems design theory with applied digital design practice, demonstrating leadership in accessible, technology-enhanced learning environments. Built on Squarespace 7.1, the website demonstrates applied proficiency in UX/UI design, multimedia integration, accessibility compliance, and instructional communication. It also serves as the foundation of my professional brand, positioning me for leadership roles in instructional design, learning experience design, and educational technology.

1.     The development process followed an iterative approach informed by the ADDIE and SAM frameworks, emphasizing rapid prototyping, peer review, and formative evaluation.

2.     Conducted a platform analysis comparing Squarespace, Wix, WordPress, and Google Sites.

3.     Created wireframes and layout mockups based on accessibility and user flow.
Implemented responsive structure and color palette consistency across all devices.

4.     Conducted WCAG 2.1 AA and Section 508 accessibility checks and contrast ratio testing.

5.     Integrated multimedia assets, downloadable documents, and professional branding elements.

6.     Conducted structured user feedback surveys and applied data-driven refinements.

The portfolio website serves two primary audiences:

·      Academic Reviewers – Faculty and committee members within Western Illinois University’s Instructional Design & Technology (IDT) program reviewing my graduate portfolio.

·      Professional Stakeholders – Potential employers, training managers, and learning-experience design recruiters seeking evidence of applied skill in instructional design, accessibility, and technology integration.

The purpose of this project was to create a professional-grade instructional-design portfolio that demonstrates theoretical understanding, practical design skills, and the ability to apply instructional models in real-world contexts. The site functions as both a graduate assessment tool and a professional marketing asset aligned with industry expectations.

The initial draft was published on September 25, 2025; refinements will continue through the portfolio defense on December 5, 2025.

•       Fully functional Squarespace 7.1 website: www.simoncwebb.com

•       Downloadable Style and Design Guide (PDF)

•       Before-and-After Multimedia Gallery Video demonstrating visual evolution

•       Project Annotation Document for committee submission

•       Accessibility Compliance Report and Peer Feedback Summary

Based on technical evaluation and structured feedback from peer surveys, several refinements were implemented:

•       Optimized image ratios and focal points to eliminate cropping and maintain visual consistency.

•       Refined color contrast and font scaling for readability and WCAG 2.1 AA compliance.

•       Reorganized navigation architecture to minimize depth and improve mobile responsiveness.

•       Enhanced section transitions and microcopy for a polished, professional tone.

•       Implemented accordion-style project pages for improved accessibility and information flow.

•       This project demonstrates the integration of multiple domains within instructional technology, including:

•       Instructional Systems Design (ISD) – Application of ADDIE, SAM, and Gagné’s Nine Events.
• Multimedia Learning – Incorporation of Mayer’s Multimedia Principles for effective cognitive engagement.

•       UX/UI and Front-End Design – Implementation of responsive layouts, consistent branding, and mobile optimization.

•       Accessibility and UDL – Application of Universal Design for Learning and WCAG 2.1 AA standards to ensure equitable access.

•       Learning Analytics and Evaluation – Using peer surveys and behavioral data to guide iterative improvement.

Primary learners and reviewers for this project include faculty experts in instructional design, professional peers in education and training, and potential hiring stakeholders evaluating portfolio-based competencies. These audiences require clarity, accessibility, and authentic evidence of design thinking aligned with contemporary instructional design standards.

Faculty reviewers represent a formative evaluation audience, focusing on theoretical accuracy, application of design frameworks (ADDIE, SAM, and UDL), and adherence to academic quality standards. Professional peers—comprising K–12 educators, technology specialists, and corporate trainers—seek practical examples of transferable instructional design and multimedia integration. Hiring stakeholders, including instructional design managers and e-learning developers, prioritize visual coherence, responsive design, and usability as indicators of professional readiness.

Secondary audiences include K–12 and corporate training professionals who may reference this portfolio as a model for effective instructional communication and digital design practice. For these learners, the portfolio functions as both a professional artifact and an instructional resource, demonstrating how accessibility, UX principles, and multimedia strategy can converge to support equitable learning outcomes.

The project was developed within a blended digital environment combining cloud-based design, authoring, and testing tools. Squarespace 7.1 served as the primary development platform due to its accessibility features, integrated hosting, and compatibility with custom HTML/CSS for advanced styling and layout control. Adobe Creative Cloud applications (including Photoshop and Illustrator) supported asset creation and image optimization to ensure visual consistency and fast load performance.

Google Chrome DevTools was used for responsive testing, accessibility validation, and cross-browser debugging, allowing for data-driven refinements during the formative evaluation phase. Surveys and usability feedback were collected through Google Forms, providing qualitative insights from educators, administrators, and industry professionals.

Testing was conducted on multiple operating systems and devices—including MacOS, Windows, iOS, and Android—to ensure cross-platform compatibility, responsive scaling, and WCAG 2.1 AA compliance. This multi-environment development and testing process ensured that the final portfolio performed consistently across contexts and audiences while maintaining accessibility, reliability, and professional design quality.

The design process followed the ADDIE (Analysis, Design, Development, Implementation, Evaluation) framework while incorporating the agile, rapid iteration cycles of SAM to enable continuous feedback and improvement. Initial analysis identified the need for an intuitive, learner-centered layout that aligned with Universal Design for Learning (UDL) principles, emphasizing clarity, accessibility, and efficiency of navigation.

Wireframes and high-fidelity mockups were developed before content integration to ensure visual consistency and logical information flow. These mockups guided the layout of project artifacts, reflection pages, and multimedia elements. Google Chrome DevTools was used to analyze image box dimensions, inspect layout structure, and validate responsive scaling. Early usability testing revealed excessive navigation depth that increased cognitive load and reduced mobile accessibility. This issue was resolved by flattening the site hierarchy, grouping related content within accordion-style sections, and standardizing page templates.

Each iteration focused on data-informed refinement—adjusting text spacing, optimizing image compression, and verifying consistent alignment across breakpoints. These refinements improved user flow, reduced page load times, and strengthened visual balance. The final outcomes included a fully responsive, WCAG 2.1 AA–compliant website with improved readability, efficient navigation, and measurable enhancements in user experience. The process reflected professional design thinking—bridging instructional systems theory with modern UX methodologies to create a scalable, accessible, and visually cohesive digital learning environment.

The printable project submission includes:

•       This Project 1 Annotation Report (Word and PDF formats)

•       Screenshots of each project section

•       Accessibility compliance checklist

•       Style and Design Guide PDF

•       Annotated before-and-after gallery stills

The completed portfolio website is accessible at https://www.simoncwebb.com, which hosts all required project artifacts, multimedia elements, and reflective documentation for faculty review. A downloadable copy of this Project 1 Annotation is available to ensure full access for evaluation.