Interactive product prototyping has been widely taught in industrial design studio courses to prepare design students in dealing with dynamic interactions of using digital products. While it requires the integration of design and technology, the lack of systematic approaches of the studio curricula creates a great challenge for students who are not familiar with technology in creating interactive prototypes successfully. A theoretical framework is developed from the human-machine interaction model and the sequential flow of task analysis methods. Based on this framework, a human-machine interaction (HMI) flow diagram is proposed with which interaction elements, relationships, and flows are specified and categorized. The flow diagram is utilized to create a storyboard and an allocation flowchart subsequently. A structured design process based on these methods was applied to an interactive product design studio course in an undergraduate industrial design program. Students created working prototypes of interactive products, following the structured design process consisting of an HMI flow diagram, a storyboard, and an allocation flowchart. 104 students (87.4%) among 119 succeeded in translating their ideas to functioning circuits. 74 students (62.2%) successfully integrated electronics components into working physical prototypes while 30 students (25.2%) just made the circuits work. The structured design process makes a transition from initial ideation to programming smooth and incremental. This helps students without previous programming experience to understand the logic flow and to develop algorithms. The HMI flow diagram is useful for analysis, concept development, and the specification of interactions, and helps students to grasp the effect of interactive features on user experience.
