HCI Course Overview
Build Applications Using HCI Standards
Learn Human-Computer Interaction foundations and apply them to design and build usable, effective applications. This course focuses on the core principles, methods, and tools needed to create interfaces that meet real user needs.
Why Learn HCI and UX?
- Problem Definition: Start with clear problem framing to identify real user needs and define the right solution space
- Prototyping: Create interfaces using Figma, ChatGPT, Human-Centered Design principles, and Canva
- Revise: Iterate on designs through feedback, usability testing, and refinement to produce a functional application
Duration
8 Weeks
Time Commitment
5-10 Hours/Week
Format
Online / Hybrid
Certificate
Yes, upon completion
Foundations in HCI Research and Design
In this session, we introduce Human-Computer Interaction (HCI) and how it informs the design of meaningful, usable, and scalable technologies. You will see how HCI methods connect to real-world problems and how they set the foundation for the rest of the course.
What You Will Learn:
- What Human-Computer Interaction is and why it matters
- Core HCI research and design methods
- The HCI approach to framing and solving problems
- Applying HCI in a healthcare facility context
- HCI methodology, user interviews, and iterative design
- From prototyping to MVP using examples like MMC (Medication Management Companion)
- Recap of the HCI approach and key next steps for the course
How This Supports Your Project:
You will use this foundation to analyze real products, ask better research questions, and structure your design process for the rest of the modules.
HCI Question, Understanding Users, Personas and Scenarios – Team Presentations
This live session focuses on HCI training through team presentations that tackle real-world problems in employment, agriculture, healthcare, and energy use. Each team demonstrates how to frame an HCI question and how to analyze users and contexts before jumping into solutions.
What You Will Learn:
- How to define clear HCI research and design questions
- Techniques for understanding users in real contexts
- Creating and documenting personas and user challenges
- Writing scenarios that connect users, challenges, and context
- Why technology context matters before prototyping
- How different domains (employment, agriculture, health, energy) shape HCI decisions
How This Supports Your Project:
You will refine your own personas, scenarios, and HCI questions, ensuring your project is grounded in real user needs and environments before you move into user stories and prototypes.
Personas to User Stories and Then Into Prototypes
In this recorded session, we walk step-by-step from personas to user stories and then into prototypes. You will see how to write user stories correctly and how they connect directly to specific personas and user needs.
What You Will Learn:
- Brief review of HCI foundations and previous sessions
- How to translate personas into structured user stories
- Best practices for writing clear, actionable user stories
- Using ChatGPT to turn user stories into design flows
- Mapping user stories and flows visually in Miro
- Preparing for low and medium fidelity prototype development
How This Supports Your Project:
You will transform your personas into a set of user stories and use AI tools plus Miro to create structured user flows that become the backbone of your upcoming prototypes.
Team User Stories Review Session on Miro
This session captures team presentations and group discussion focused on generating and refining user stories and personas inside Miro. You will see how different teams structure their stories and how feedback improves clarity and alignment.
What You Will Learn:
- Reviewing user story structure and key components
- How user stories connect directly to personas
- Organizing user stories and personas visually in Miro
- Common mistakes and how to correct them
- How team discussion sharpens user needs and priorities
How This Supports Your Project:
You will review your own Miro board, refine your user stories for completeness and clarity, and make sure every story is clearly linked back to a persona and a real user scenario.
Generating Personas – Review Sessions and Feedback
In this live stream, we review early prototypes created by student teams and analyze how well their personas and research questions were translated into design decisions. The focus is on whether the designs truly reflect user needs.
What You Will Learn:
- Evaluating the quality of personas and research questions
- Checking alignment between personas and prototype decisions
- Identifying common issues when moving from research to solutions
- Improving clarity and focus of early prototypes
- Understanding how feedback is used to strengthen design direction
How This Supports Your Project:
You will critique your own personas and early design ideas, checking that every feature and interaction traces back to real user research rather than assumptions.
Building Low Fidelity Prototypes with Miro, ChatGPT, Figma, and Balsamiq
This session brings everything together and shows how to move from ideas to structured low fidelity prototypes using practical tools and clear user flows. You will see how to connect user stories to user flows and visual layouts.
What You Will Learn:
- Turning user stories into user flows
- Differences between low, medium, and high fidelity prototypes
- Using Miro to map out flows and screens
- Using ChatGPT to generate interface ideas and content
- Creating low fidelity layouts in Figma and Balsamiq
- Defining next steps for refining and testing designs
How This Supports Your Project:
You will build your first full low fidelity prototype, using AI and design tools to quickly explore layouts while keeping user stories and flows at the center.
Low Fidelity Prototypes – Team Presentations
This video features team presentations on building low fidelity prototypes and translating user stories into clear user flows. You will see multiple examples of how different teams interpret the same HCI process.
What You Will Learn:
- How teams communicate user flows through low fidelity screens
- Different ways of structuring user journeys visually
- How to present low fidelity prototypes effectively
- Common strengths and weaknesses across team prototypes
How This Supports Your Project:
You will compare your own low fidelity prototype to peer examples and identify at least three improvements you can make to your flows or screen layouts.
Medium Fidelity Prototype – Team Presentations
Each team presents their medium fidelity prototype, walking through the problem definition, user journey, interaction flow, and core feature structure. The focus is on validating usability before investing in high fidelity design.
What You Will Learn:
- How to articulate a clear problem definition through design
- Demonstrating user journeys and interaction flows
- Structuring core features in a medium fidelity prototype
- Using medium fidelity to validate usability and workflows
- Deciding what to refine before moving to high fidelity
How This Supports Your Project:
You will present or review your own medium fidelity prototype, focusing on whether the interaction flow and feature structure clearly support your user stories.
Medium Fidelity Prototype Reviews
This session reviews medium fidelity prototypes for clarity, interaction logic, consistency, and completeness. Each team receives targeted feedback to strengthen their designs before moving to high fidelity.
What You Will Learn:
- Evaluating interaction logic and user flow coherence
- Checking visual and behavioral consistency
- Identifying usability gaps in mid-stage designs
- Prioritizing changes for the next design iteration
- Preparing prototypes for high fidelity refinement
How This Supports Your Project:
You will use review criteria from this session to audit your own medium fidelity prototype and create a concrete list of improvements for your high fidelity version.
Generating High Fidelity Prototypes
This recording shows how validated medium fidelity concepts evolve into high fidelity prototypes. You will see how structure, interaction decisions, and UX feedback translate into polished, realistic interfaces.
What You Will Learn:
- Using Figma prompts to generate high fidelity designs
- Prompting techniques to get usable, structured design outputs
- Translating interaction decisions into visual detail
- Reviewing and iterating on high fidelity prototype results
- Preparing high fidelity screens for stakeholder review or development
How This Supports Your Project:
You will generate your own high fidelity screens from your medium fidelity prototype, using structured prompts and design systems to ensure consistency and clarity.
Revised High Fidelity Prototype – Presentation and Feedback
This session presents revised high fidelity prototypes following earlier testing and feedback. The Project Design Lead opens with an update on revisions, followed by team presentations showing refined interfaces and improved interaction flows.
What You Will Learn:
- How to incorporate usability feedback into high fidelity designs
- Presenting design changes and rationale clearly
- Validating design readiness for implementation
- Gathering final feedback from stakeholders and peers
- Identifying remaining risks before development
How This Supports Your Project:
You will refine your high fidelity prototype based on feedback and practice communicating design decisions, preparing your project for handoff or implementation.
Revised High-Fidelity Prototype Presentations on Figma
Three teams present their revised high-fidelity prototypes on Figma, focusing on user flow, interface design, and core features. This session highlights how teams converge on final interaction and visual decisions.
What You Will Learn:
- Presenting high fidelity flows directly in Figma
- Demonstrating how interface design supports user tasks
- Reviewing core feature sets at a high fidelity level
- Comparing different design approaches for similar problems
How This Supports Your Project:
You will benchmark your high fidelity prototype against the examples in this session and refine your user flow and UI details where needed.
Setting Up Cursor Files for Application Development
Learn how to set up Cursor files and define clear boundaries for your application development using your design research questions. This session prepares you to move from high fidelity prototypes into implementation.
What You Will Learn:
- Setting up your Cursor project file for development
- Adding research questions to define boundaries and scope
- Structuring files and components based on your design
- Preparing for the development phase with clear links to HCI decisions
How This Supports Your Project:
You will create or refine your own Cursor file setup, ensuring your implementation environment reflects your HCI research, user stories, and final prototypes.
Cursor Rules and Figma-to-Code Workflow
In this session, we show how to set up Cursor rules to enforce architecture and coding standards, rely strictly on written UI specifications from Figma, generate structured components that align with the design, and refine AI-generated output into production-ready code.
What You Will Learn:
- Configuring Cursor rules to keep your system structured, maintainable, and consistent
- Translating detailed Figma prototypes into scalable frontend components
- Refining AI-generated code so it meets production quality standards
- Making the design-to-product workflow practical for founders, UX teams, and engineers
- Running and testing the generated app locally on localhost to iterate quickly
How This Supports Your Project:
You will see how detailed prototype specifications become working components, and you will be able to set up a repeatable workflow that takes you from Figma designs to a running application while preserving architecture and code quality.
Final Product Presentations and Live Deployments
In this final module, student teams present the first live iterations of their products. This session brings together everything covered in the course—from problem framing, personas, user stories, and prototyping to setting up Cursor rules and deploying working applications.
What You Will Learn:
- How to connect HCI research, UX decisions, and implementation into a coherent product story
- How teams framed problems, validated flows, and translated Figma prototypes into code
- What it takes to deploy an initial live iteration that real users can interact with
- How to use live products to gather the next cycle of feedback and improvements
Live Products from the Course:
Explore three products built and deployed by students as part of this final presentation:
- Kazi – employment and work-focused solution
- Afya – healthcare and wellbeing solution
- Masomo – learning and education solution
Use these examples to study how concept ideation, UX research, prototyping, and AI-assisted development came together into live, testable products.