TY - JOUR T1 - Using Flowcharts and State Diagrams as Tools For Industrial Design of Smart Products TT - Akıllı Ürünlerin Endüstriyel Tasarımında Akış ve Durum Diyagramlarının Araç Olarak Kullanımı AU - Özsoy, Hüseyin Özkal PY - 2025 DA - June Y2 - 2025 DO - 10.18603/sanatvetasarim.1699442 JF - Sanat ve Tasarım Dergisi PB - Ankara Hacı Bayram Veli Üniversitesi WT - DergiPark SN - 1308-2264 SP - 205 EP - 233 IS - 36 LA - en AB - This article investigates the integration of flowcharts and state diagrams into the industrial design process, focusing on their potential to support process planning, clarify product behavior, and enhance communication between designers and engineers. The study begins with an evaluation of storyboards as traditional design tools, followed by an introduction to flowcharts and state diagrams that explains their origins, structural characteristics, and interdisciplinary applications. A proposed method for incorporating these tools into the design process is presented and is supported by a case study involving the development of a smart lighting product. Storyboards, flowcharts, and state diagrams are comparatively evaluated in terms of their effectiveness in process planning and behavior modeling. Time spent and user interactions are measured and analyzed for each tool. The results show that flowcharts are effective in organizing sequential tasks with logical clarity, while state diagrams are more suitable for representing condition-based behaviors and user interaction in smart products. When used together, the tools offer complementary strengths, combining creative exploration with technical precision. This study provides a comprehensive examination of the combined use of flowcharts and state diagrams in industrial design, emphasizing their value not only in planning but also in fostering a shared design language for interdisciplinary collaboration. It also highlights their adaptability in various formats, demonstrating their flexibility across different design environments. KW - Flowcharts KW - State Diagrams KW - Industrial Design Process KW - Smart Product Behavior KW - Interdisciplinary Collaboration N2 - Bu makale, akış diyagramları ve durum diyagramlarının endüstriyel tasarım sürecine entegrasyonunu incelemekte; bu araçların süreç planlamasını destekleme, ürün davranışlarını netleştirme ve tasarımcılarla mühendisler arasındaki iletişimi güçlendirme potansiyeline odaklanmaktadır. Çalışma, geleneksel bir araç olan hikâye panolarının (storyboard) kullanımına dair bir değerlendirmeyle başlamakta, ardından akış diyagramları ve durum diyagramlarının kökenleri, yapısal özellikleri ve disiplinler arası kullanım alanları açıklanmaktadır. Bu araçların tasarım sürecinde nasıl kullanılabileceğine dair önerilen bir yöntem sunulmakta ve akıllı bir aydınlatma ürününün geliştirilmesine yönelik bir vaka çalışmasıyla desteklenmektedir. Hikâye panoları, akış diyagramları ve durum diyagramları süreç planlama ve ürün davranışlarının modellenmesi açısından karşılaştırmalı olarak değerlendirilmiştir. Kullanım süresi ve kullanıcı etkileşimleri temelinde ölçümler yapılmıştır. Akış diyagramlarının belirli görevlerin sıralı ve mantıklı şekilde organize edilmesinde etkili olduğunu; durum diyagramlarının ise özellikle akıllı ürünlerin duruma bağlı davranışlarını ve kullanıcı etkileşimlerini temsil etmede daha başarılı olduğunu göstermektedir. Her iki araç birlikte kullanıldığında, yaratıcı düşünme ile teknik netliği bir araya getiren tamamlayıcı avantajlar sunmaktadır. Bu çalışma, akış ve durum diyagramlarının endüstriyel tasarımda birlikte kullanımını vaka çalışmasıyla detaylı biçimde inceleyerek bu araçların yalnızca planlama değil, aynı zamanda disiplinler arası iletişimde ortak bir tasarım dili oluşturma potansiyeline sahip olduğunu ortaya koymaktadır. Ayrıca, bu araçların farklı biçimlerde kullanılabilirliğine de değinilerek, çeşitli çalışma koşullarına uygunlukları gösterilmiştir. CR - Adelt, J., Liebrenz, T., & Herber, P. (2021). Formal Verification of Intelligent Hybrid Systems that are Modeled with Simulink and the Reinforcement Learning Toolbox. In M. Huisman, C. Păsăreanu, & N. Zhan (Eds.), Formal Methods (pp. 349–366). Springer International Publishing. https://doi.org/10.1007/978-3-030-90870-6_19 CR - Alhir, S. S. (2003). Learning UML. O’Reilly Media, Inc. CR - Alhumaidan, F. (2012). State Based Static and Dynamic Formal Analysis of UML State Diagrams. Journal of Software Engineering and Applications, 5(7), Article 7. https://doi.org/10.4236/jsea.2012.57056 CR - Bagnati, E., & Del Bello, A. (2024). Modular UML statechart modelling for simulating the behaviour of production systems with integrated dispatching policies. https://www.politesi.polimi.it/handle/10589/230526 CR - Basheri, M. (2010). Collaborative Learning of UML-State diagrams using Multi-Touch Technology. Durham University. CR - Bowman, A. (2024). Intelligent Student Learning System (iSLS) [M.S.]. https://www.proquest.com/docview/3093581801/abstract/5AFEA474A8464340PQ/1 CR - Campbell, L. H., & McDonagh, D. (2009). Visual Narrative Research Methods as Performance in Industrial Design Education. Qualitative Inquiry, 15(3), 587–606. https://doi.org/10.1177/1077800408318306 CR - Chinofunga, M. D., Chigeza, P., & Taylor, S. (2025). How can procedural flowcharts support the development of mathematics problem-solving skills? Mathematics Education Research Journal, 37(1), 85–123. https://doi.org/10.1007/s13394-024-00483-3 CR - Creately. (2025). Horizontal Flowchart. https://creately.com/diagram/example/jny57xed8/horizontal-flowchart-template Diagramming Powered By Intelligence. (2025). Lucidchart. https://www.lucidchart.com/pages/landing CR - Doyle, P. (2002). Believability through context using “knowledge in the world” to create intelligent characters. Proceedings of the First International Joint Conference on Autonomous Agents and Multiagent Systems: Part 1, 342–349. https://doi.org/10.1145/544741.544822 CR - Draw.io. (2025). https://app.diagrams.net/ CR - Garzon, S. R., & Louis, B. (2020). Context Flow Graphs: Situation Modeling for Rule-Based Proactive Context-Aware Systems. IEEE Journals & Magazine, IEEE Access, 8, 212939–212960. https://doi.org/10.1109/ACCESS.2020.3040060 CR - Giuliani, F., Frizziero, L., & Donnici, G. (2024). Industrial Design Structure Plus: Industrial Design Structure Method Implemented with Theory of Inventive Problem Solving and Conceptual Method. https://cris.unibo.it/handle/11585/1006529 CR - Goldberg, R. P. (1973). Architecture of virtual machines. Proceedings of the Workshop on Virtual Computer Systems, 74–112. https://doi.org/10.1145/800122.803950 CR - Goldman, D. B., Curless, B., Salesin, D., & Seitz, S. M. (2006). Schematic storyboarding for video visualization and editing | ACM Transactions on Graphics. ACM Transactions on Graphics, 25(3), 862. CR - Granfelt, S. A. (2017). A Flowchart Guide For Micro & Small Business [BSc., Arcada]. https://www.theseus.fi/bitstream/handle/10024/125035/Stephan%20Aschwanden-Granfelt.pdf?sequence CR - Greenberg, S., Carpendale, S., Marquardt, N., & Buxton, B. (2012). The narrative storyboard: Telling a story about use and context over time. Interactions, 19(1), 64–69. https://doi.org/10.1145/2065327.2065340 CR - Guiochet, J. (2015). Trusting robots: Contributions to dependable autonomous collaborative robotic systems [Thesis, Université de Toulouse 3 Paul Sabatier]. https://hal.science/tel-01276555 CR - Harel, D. (1987). Statecharts: A visual formalism for complex systems. Science of Computer Programming, 8(3), 231–274. https://doi.org/10.1016/0167-6423(87)90035-9 CR - Helin, K., Evilä, T., Viitaniemi, J., Aromaa, S., Kilpeläinen, P., Rannanjärvi, L., Vähä, P., Kujala, T., Pakkanen, T., Raisamo, R., Salmenperä, P., Miettinen, J., & Patel, H. (2007). HumanICT. New Human-Centred Design Method and Virtual Environments in the Design of Vehicular Working Machine Interfaces. VTT Working Papers, 1459(7683). http://www.vtt.fi/publications/index.jsp CR - Herman, G. L., & Choi, D. S. (2017). The Affordances and Constraints of Diagrams on Students’ Reasoning about State Machines. Proceedings of the 2017 ACM Conference on International Computing Education Research, 173–181. https://doi.org/10.1145/3105726.3106172 CR - Hossain, Q., Yasmin, F., Biswas, T. R., & Asha, N. B. (2024). Integration of Big Data Analytics in Management Information Systems for Business Intelligence. Saudi Journal of Business and Management Studies, 9(09), 192–203. https://doi.org/10.36348/sjbms.2024.v09i09.002 CR - Jacob. (1985). A State Transition Diagram Language for Visual Programming. Computer, 18(8), 51–59. https://doi.org/10.1109/mc.1985.1662976 CR - Jäger, D., Schleicher, A., & Westfechtel, B. (1999). Using UML for software process modeling. SIGSOFT Softw. Eng. Notes, 24(6), 91–108. https://doi.org/10.1145/318774.318788 CR - Jonassen, D. H. (2000). Toward a design theory of problem solving. Educational Technology Research and Development, 48(4), 63–85. https://doi.org/10.1007/BF02300500 CR - Kant, E. (1985). Understanding and Automating Algorithm Design. IEEE Transactions on Software Engineering, SE-11(11), 1361–1374. https://doi.org/10.1109/TSE.1985.231884 CR - Kim, K., & Lee, K. (2016). Collaborative product design processes of industrial design and engineering design in consumer product companies. Design Studies, 46, 226–260. https://doi.org/10.1016/j.destud.2016.06.003 CR - Konrad, S., & Cheng, B. H. C. (2002). Requirements patterns for embedded systems. Proceedings IEEE Joint International Conference on Requirements Engineering, 127–136. https://doi.org/10.1109/ICRE.2002.1211541 CR - Koskimies, K., & Mäkinen, E. (1994). Automatic synthesis of state machines from trace diagrams. Software: Practice and Experience, 24(7), 643–658. https://doi.org/10.1002/spe.4380240704 CR - Lucidchart. (2025). Lucidchart. https://www.lucidchart.com/pages/landing CR - Ma, J., & Yu, S. (1998). Practical rules for reduction on the number of states of a state diagram. Proceedings. Technology of Object-Oriented Languages. TOOLS 26 (Cat. No.98EX176), 46–55. https://doi.org/10.1109/TOOLS.1998.711002 CR - Micheli, P., Jaina, J., Goffin, K., Lemke, F., & Verganti, R. (2012). Perceptions of Industrial Design: The “Means” and the “Ends.” Journal of Product Innovation Management, 29(5), 687–704. https://doi.org/10.1111/j.1540-5885.2012.00937.x CR - Millhouse, T. (2018). Virtual Machines and Real Implementations. Minds and Machines, 28(3), 465–489. https://doi.org/10.1007/s11023-018-9472-7 CR - Newman, R. M. (1998). A VISUAL DESIGN METHOD AND ITS APPLICATION TO HIGH RELIABILITY HYPERMEDIA SYSTEMS [PhD. Thesis, University of Plymouth.]. https://pearl.plymouth.ac.uk/fose-theses-other/355 CR - Norman, D. (1986). User-Centered System Design: New Perspectives on Human-Computer Interaction. Lawrence Erlbaum Associates. CR - Norman, D. (1988). The psychology of everyday things (pp. xi, 257). Basic Books. CR - Olivé, A. (Ed.). (2007). State Transition Diagrams. In Conceptual Modeling of Information Systems (pp. 299–323). Springer. https://doi.org/10.1007/978-3-540-39390-0_13 CR - Östlund, A. (2022). Telling a story of the future: Using storyboards and narratives to evaluate anticipated experiences. https://urn.kb.se/resolve?urn=urn:nbn:se:sh:diva-49410 CR - Palovuori, J. (2017). Towards harmonious experiences – A service design approach to evaluating and optimizing multi-touchpoint user experience [MSc.]. https://aaltodoc.aalto.fi/handle/123456789/27146 CR - Pavel, M. (1978). MICROPROCESSORS IN PSYCHOLOGY: Behavior Research Methods & Instrumentation, 10(2), 238–240. CR - R. Ponelis, S. (2015). Using Interpretive Qualitative Case Studies for Exploratory Research in Doctoral Studies: A Case of Information Systems Research in Small and Medium Enterprises. International Journal of Doctoral Studies, 10, 535–550. https://doi.org/10.28945/2339 CR - Rodda, J., Ranscombe, C., & Kuys, B. (2022). A method to explore strategies to communicate user experience through storyboards: An automotive design case study. AI EDAM, 36, e16. https://doi.org/10.1017/S0890060421000287 CR - Self, J. A. (2012). The Use of Design Tools in Industrial Design Practice [PhD. Thesis, Kingston University]. https://www.researchgate.net/publication/289674998_The_Use_of_Design_Tools_in_Industrial_Design_Practice CR - Shaw, A. C. (1992). Communicating Real-Time State Machines—ProQuest. IEEE Transactions on Software Engineering, 18(9), 805–816. CR - Shina, S. G. (2012). Concurrent Engineering and Design for Manufacture of Electronics Products. Springer Science & Business Media. CR - Simon, M. (2012). Storyboards: Motion In Art (3rd ed.). Routledge. https://doi.org/10.4324/9780080465951 CR - Spencer, V. (2025, April 19). Storyboarding for Product Design. Instructables. https://www.instructables.com/Storyboarding-for-Product-Design/ CR - State diagram. (2025). In Wikipedia. https://en.wikipedia.org/w/index.php?title=State_diagram&oldid=1282429372 CR - Truong, K. N., Hayes, G. R., & Abowd, G. D. (2006). Storyboarding: An empirical determination of best practices and effective guidelines. Proceedings of the 6th Conference on Designing Interactive Systems, 12–21. https://doi.org/10.1145/1142405.1142410 CR - Vegte, W. F., & Breemen, E. J. J. (2009). Flowchart-Assisted Function Analysis of Products to Support Teaching of the Exact Sciences. DS 58-10: Proceedings of ICED 09, the 17th International Conference on Engineering Design, Vol. 10, Design Education and Lifelong Learning, Palo Alto, CA, USA, 24.-27.08.2009, 101–112. CR - Vizcom AI. (2025, February). Online Artificial Intelligence Visualization Services. https://www.vizcom.ai/ Vpadmin. (2023, March 22). Introduction to State Diagrams: A Comprehensive Guide for Software Engineering. Visual Paradigm Guides. https://guides.visual-paradigm.com/introduction-to-state-diagrams-a-comprehensive-guide-for-software-engineering/ CR - Wah, B. W., Ieumwananonthachai, A., Yao, S., & Yu, T. (1995). Statistical generalization: Theory and applications. Proceedings of ICCD ’95 International Conference on Computer Design. VLSI in Computers and Processors, 4–10. https://doi.org/10.1109/ICCD.1995.528783 CR - Wang, J., Ranscombe, C., & and Eisenbart, B. (2024). An integrated prototyping tool to enhance interdisciplinary communication in smart product design. Ergonomics, 1–19. https://doi.org/10.1080/00140139.2024.2418949 CR - Wang, J., Ranscombe, C., & Eisenbart, B. (2023). Prototyping in smart product design: Investigating prototyping tools to support communication in the early stage smart product development. International Journal of Design Creativity and Innovation, 11(3), 159–184. CR - Welte, T. M. (2009). Using State Diagrams for Modeling Maintenance of Deteriorating Systems. IEEE Transactions on Power Systems, 24(1), 58–66. https://doi.org/10.1109/TPWRS.2008.2005711 CR - Weng, W. (2024). Flowchart. In W. Weng (Ed.), A Beginner’s Guide to Informatics and Artificial Intelligence: A Short Course Towards Practical Problem Solving (pp. 13–20). Springer Nature. https://doi.org/10.1007/978-981-97-1477-3_2 CR - Willett, D. L., Pandey, A., Ifejika, Nn. L., Kannan, V., Berry, J. D., & Basit, M. A. (2018). State Diagrams for Automating Disease “Risk Pyramid” Data Collection and Tailored Clinical Decision Support. Proceedings of the 2018 ACM International Conference on Bioinformatics, Computational Biology, and Health Informatics, 551–552. https://doi.org/10.1145/3233547.3233660 CR - Wynn, D. C., & Eckert, C. M. (2017). Perspectives on iteration in design and development. Research in Engineering Design, 28(2), 153–184. https://doi.org/10.1007/s00163-016-0226-3 CR - GÖRSEL KAYNAKLAR: Figure 1: Spencer, V. (2025, April 19). Storyboarding for Product Design. Instructables. https://www.instructables.com/Storyboarding-for-Product-Design/ Figure 2: Creately. (2025). Horizontal Flowchart. https://creately.com/diagram/example/jny57xed8/horizontal-flowchart-template Figure 3: Left-State diagram. (2025). In Wikipedia. https://en.wikipedia.org/w/index.php?title=State_diagram&oldid=1282429372 Right- Author’s work Figure 4: Vpadmin. (2023, March 22). Introduction to State Diagrams: A Comprehensive Guide for Software Engineering. Visual Paradigm Guides. https://guides.visual-paradigm.com/introduction-to-state-diagrams-a-comprehensive-guide-for-software-engineering/ Figure 5: Author’s drawings Figure 6: Author’s drawings Figure 7: Author’s drawings Figure 8: Author’s drawings Figure 9: Author’s drawings Figure 10: Author’s drawings CR - INTERNET KAYNAKLARI CR - Creately. (2025). Horizontal Flowchart. https://creately.com/diagram/example/jny57xed8/horizontal-flowchart-template CR - Diagramming Powered By Intelligence. (2025). Lucidchart. https://www.lucidchart.com/pages/landing CR - Draw.io. (2025). https://app.diagrams.net/ CR - Lucidchart. (2025). Lucidchart. https://www.lucidchart.com/pages/landing CR - Spencer, V. (2025, April 19). Storyboarding for Product Design. Instructables. https://www.instructables.com/Storyboarding-for-Product-Design/ CR - State diagram. (2025). In Wikipedia. https://en.wikipedia.org/w/index.php?title=State_diagram&oldid=1282429372 CR - Vizcom AI. (2025, February). Online Artificial Intelligence Visualization Services. https://www.vizcom.ai/ CR - Vpadmin. (2023, March 22). Introduction to State Diagrams: A Comprehensive Guide for Software Engineering. Visual Paradigm Guides. https://guides.visual-paradigm.com/introduction-to-state-diagrams-a-comprehensive-guide-for-software-engineering/ UR - https://doi.org/10.18603/sanatvetasarim.1699442 L1 - https://dergipark.org.tr/tr/download/article-file/4870780 ER -