1 - HCI Foundations and Course Project Setup — Topics & Learning Outcomes

Module Topics

Introduction to Human-Computer Interaction

• What Is HCI? — Human-Computer Interaction is the study of how people interact with computers and how to design those interactions to be effective, efficient, and satisfying.
• Core HCI Principles — Several foundational principles guide HCI practice, including usability, accessibility, feedback, and consistency.
• The User-Centered Design Process — User-Centered Design (UCD) is an iterative design framework that places the user's needs, goals, and limitations at the forefront of each design decision.
• HCI and the Software Development Lifecycle — HCI considerations appear at every stage of software development, from planning and design through testing and maintenance.
• Why HCI Matters for This Course — This course applies HCI principles directly through a team project that spans design, prototyping, and development using industry tools.

Version Control with GitHub

• What Is Version Control? — Version control is a system that records changes to files over time, allowing teams to track history, collaborate without conflict, and revert to earlier states when needed.
• GitHub as a Collaboration Platform — GitHub is the world's most widely adopted developer platform, providing cloud-hosted Git repositories alongside tools for project planning, code review, and team communication.
• Creating and Configuring a Repository — Each team will create a shared GitHub repository that serves as the single source of truth for all project code and documentation.
• Branching and Pull Requests — Branching allows team members to develop features or fixes in isolation before merging changes into the main codebase through a pull request review process.
• GitHub for Project Management — Beyond code, GitHub provides Issues and Projects boards that help teams track tasks, assign responsibilities, and monitor progress throughout the course.

Design Collaboration with Figma

• What Is Figma? — Figma is a browser-based, multiplayer design tool used by professional designers and engineers to create graphics, wireframes, interactive prototypes, and design systems.
• Setting Up the Education Team Workspace — Students must create a Figma account with their school email, verify their student status, and join or create a team workspace to unlock free professional collaboration features.
• FigJam for Ideation and Brainstorming — FigJam is an online whiteboard tool within the Figma ecosystem designed for brainstorming, diagramming, and collaborative planning activities.
• Designing UI with Figma — Figma's design canvas allows teams to create wireframes, high-fidelity mockups, and interactive prototypes that simulate the final user experience.
• Dev Mode: Bridging Design and Code — Figma's Dev Mode workspace allows developers to inspect designs and extract precise measurements, styles, and auto-generated code snippets, reducing miscommunication between design and development.

AI Tools in HCI and Development

• How AI Supports the Design Process — AI tools assist designers by suggesting UI layouts, identifying design inconsistencies, and automating visual testing, enabling faster and more informed design decisions.
• AI Coding Assistants — AI coding assistants like GitHub Copilot provide real-time code suggestions, generate boilerplate, explain code, and assist with debugging, helping developers work faster and with fewer errors.
• AI Across the Software Development Lifecycle — AI tools support every phase of the SDLC, from analyzing requirements and predicting risks in planning, to monitoring performance and fixing bugs after deployment.
• Responsible Use of AI in This Course — While AI tools are encouraged as productivity aids, students are responsible for understanding, reviewing, and standing behind all AI-assisted work they submit.

Development Environment Setup

• Choosing a Code Editor — A code editor is the primary tool through which developers write and manage code; selecting and configuring it correctly at the start of a project ensures consistency across the team.
• Installing and Configuring Git Locally — Git must be installed on each student's machine and configured with their identity before they can interact with the team's GitHub repository from the command line.
• Cloud Development with GitHub Codespaces — GitHub Codespaces provides a full, cloud-based development environment accessible from any browser, eliminating setup inconsistencies across different machines and operating systems.
• Project Folder Structure and Conventions — Establishing a consistent folder structure and naming convention at the start of the project reduces confusion, prevents merge conflicts, and makes the codebase easier to navigate for all team members.
• Verifying the Complete Setup — Before closing out the first module, every team member should verify that their full environment is working by completing a short end-to-end test: edit a file, commit it, push to GitHub, and confirm it appears in the shared repository.

Team Collaboration and Project Kickoff

• Forming Effective Project Teams — Project teams in this course are structured to mirror cross-functional product teams in industry, combining students with different strengths across design, development, and project coordination.
• Defining Team Roles and Responsibilities — Assigning clear roles at the start of the project ensures accountability and prevents work from falling through the gaps during collaborative development.
• Creating the Team Charter — A team charter is a brief agreement that documents the team's goals, working norms, communication channels, and conflict resolution approach before work begins.
• Scoping the Course Project — Each team selects and defines the scope of their course project in week one, producing a brief problem statement and initial set of user goals that will drive the entire design and development process.
• End-of-Module Readiness Checklist — By the end of this module, every team must have all project infrastructure operational and documented so that week two collaborative work can begin without setup delays.

Student Learning Outcomes

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

Course Outcomes (reference)