Functional Prototype Development and Testing Preparation — Topics & Learning Outcomes

Module Topics

From Mockup to Functional Prototype

• Defining Functional Prototypes — A functional prototype is a coded, interactive artifact that simulates real system behavior and can be deployed for user interaction. Unlike a mockup, it responds to user inputs and reflects actual logic flows.
• Limitations of High-Fidelity Mockups for Testing — High-fidelity mockups excel at communicating visual design intent but fall short when realistic interaction data is needed. They cannot capture navigation errors, load behaviors, or user recovery patterns.
• Criteria for Transition Readiness — Before beginning prototype development, teams should assess whether their mockup designs are stable enough to code against. Premature coding of unstable designs wastes development effort.
• Scoping the Prototype for Usability Testing — A common mistake is building too much functionality into a test prototype. Scope should be limited to the features and flows directly relevant to the research questions being tested.

Transition Strategies from Design to Code

• Design Handoff and Asset Preparation — Effective handoff from design to development begins with organizing and exporting mockup assets in formats suitable for coding. Poorly prepared handoffs result in inconsistent implementations.
• Component-First Development Approach — Building reusable interface components before assembling full screens reduces duplication and makes the prototype easier to maintain and update. This mirrors modern front-end development practices.
• Iterative Build and Continuous Review — Prototype development should proceed in short build cycles, with frequent reviews against the original mockup to catch deviations early. Waiting until the end to compare code output to design leads to costly corrections.
• Managing Design Drift During Development — Design drift occurs when coding decisions gradually diverge from the approved mockup, producing a prototype that no longer reflects the intended design. Systematic practices prevent unintentional drift.

Development Environment Setup and Use

• Choosing an Appropriate Technology Stack — The technology stack for a usability testing prototype should prioritize speed of development and ease of deployment over long-term scalability. The goal is a testable artifact, not a production system.
• Setting Up Version Control — Version control is essential for collaborative prototype development, enabling the team to track changes, revert mistakes, and work in parallel without overwriting each other's contributions.
• Local Development and Live Preview Workflows — A smooth local development workflow allows developers to see the effect of code changes immediately, reducing the iteration cycle between writing code and observing results.
• Deploying the Prototype for Testing — Deploying the prototype to an accessible environment before the test session ensures that participants can access it reliably without the need for local setup on their devices.

Designing User Proficiency Surveys

• Purpose and Value of Proficiency Surveys — A user proficiency survey collects structured background information from participants before a usability test, allowing researchers to interpret performance data in light of participant experience levels.
• Identifying Relevant Proficiency Dimensions — Not all background information is relevant to every usability study. Teams must identify the specific dimensions of user experience and knowledge that are most likely to influence performance on the test tasks.
• Writing Effective Survey Questions — Survey question quality directly affects data reliability. Ambiguous, leading, or double-barreled questions produce unreliable data that cannot support valid conclusions about participant proficiency.
• Structuring and Administering the Survey — The survey should be organized logically, moving from general background questions to more specific proficiency items. Administration timing and format should be designed to minimize burden and maximize completion.

Designing Usability Testing Protocols

• Anatomy of a Usability Testing Protocol — A usability testing protocol is a formal document that defines every aspect of how a test session will be conducted, ensuring consistency across participants and enabling replication of the study.
• Writing Task Scenarios — Task scenarios describe realistic situations that prompt participants to interact with the prototype in ways that reveal usability strengths and weaknesses. Well-written scenarios feel natural and do not inadvertently guide participants toward correct actions.
• Developing Facilitator Scripts — A facilitator script provides standardized language for introducing the session, delivering tasks, and responding to common participant behaviors such as asking for help or expressing frustration.
• Planning Data Collection Methods — The protocol must specify what data will be collected, how it will be recorded, and who is responsible for each data collection activity during the session.
• Session Logistics and Environment Planning — Logistical details such as session scheduling, participant arrival procedures, room or virtual meeting setup, and equipment checks must be planned and documented to prevent disruptions during testing.
• Pilot Testing the Protocol — Running a pilot session with a colleague or peer before recruiting actual participants reveals gaps in the protocol, ambiguous task wording, and logistical issues that are not apparent from reading the document alone.

Integrating Prototype and Testing Preparation

• Aligning Prototype Scope with Test Tasks — The prototype must be capable of supporting every task scenario defined in the testing protocol. Misalignment between what the prototype can do and what participants are asked to do invalidates test results.
• Preparing Test Data and Prototype State — Usability tests require the prototype to begin each session in a consistent, predefined state with appropriate test data pre-loaded so that every participant starts from the same conditions.
• Coordinating Team Roles Across Development and Testing — The transition from prototype development to test facilitation requires clear role assignments so that team members know their responsibilities during both phases and can support each other effectively.

Student Learning Outcomes

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

Course Outcomes (reference)