Department of Education
Region VII – Central Visayas
Schools Division of Mandaue City
Mandaue City Comprehensive National High School
1
ArchFolio: A Web-Application Made for Organizing Architectural Design Process
to Integrate Digital Tools and Optimize Architectural Workflows
A Research Proposal
In partial fulfilment of the requirements in
Work Immersion/Capstone Project and
Inquiries, Investigation and Immersion
By
Arthas Bence Bayani
Kherulph O. Orais
Marv Einstien T. Perez
Angel Trisha L. Cardona
2025
2
INTRODUCTION
Digital tools are software and online resources that help people do many tasks
easily. It helps the people to be more productive, unite and communicate better (Digital
Adoption, 2024). The advancement of digital tools has transformed architectural design,
promoting creativity and precision. However, managing workflows has become
increasingly complex, with a design iteration process approach to continuously improve
the concept and design of the product Eby (2023) and the dispersed across various
platforms, inconsistent file organization, and challenges in tools integration. These
inefficiencies/challenges can result in time delays and the loss of critical information.
According to Landau (2024), there are architectural design processes and it consists of
seven distinct phases, including pre-design, schematic design, design development,
construction documents, building permit, bidding and negotiation and lastly the
construction administration. Each phase requires careful coordination among architects,
clients, and contractors to ensure that project goals are met efficiently. This structured
approach is essential for managing complex projects and minimizing the risk of errors
during construction Landau (2024). Moreover, Team (2025) points out that maintaining
effective communication and collaboration among stakeholders is vital throughout the
design process. This approach helps to align expectations and enables smoother
transitions between various phases. According to a study by Adam (2025), streamlining
workflows through the mastery of various software tools allows architects to significantly
reduce production time and improve design quality. This emphasizes that automation and
scripting can alleviate repetitive tasks, thereby enabling architects to focus more on
creative exploration and iterative design processes.
3
To address these problems in the architectural firm, the researcher's proposed and
introduced the ArchFolio website application. ArchFolio derives its name from
"Architecture" and "Portfolio," symbolizing its role as a comprehensive digital portfolio
for organizing design workflows. The website application is envisioned as a tool for
ensuring smoother transitions and better project management, addressing key
inefficiencies in current practices. ArchFolio is a digital application that proposes and
designs a solution to simplify and streamline architectural workflows or design process
by consolidating essential tools and processes within a single platform. The website
application enables architects to manage design iterations, maintain organized
documentation and transition seamlessly between tasks and track or monitor the
percentage of progress of their assigned works or projects as well as their co-employees .
ArchFolio aims to minimize delays, reduce mismanagement, and improve efficiency,
allowing architects to focus on innovative design. By providing a centralized system, the
application seeks to help architects work more efficiently and focus on what they do best
creating great designs.
The lack of separation in software tools, features, platforms and organizing into
one application is the underlying problem of this research. Despite this, there remains a
gap in research as well as the lack of empirical data or there is no efficient data of
evidence on how well the applications perform in real world scenarios. The main
objective of this study is to explore the challenges architects face in their workflows and
how ArchFolio can offer practical solutions on the significance of this research study, the
professional, student and inspiring architectures by analyzing current inefficiencies and
4
proposing an integrated platform. This aims to make the architectural process more
organized, productive, and tailored to the demands of modern practice.
STATEMENT OF THE PROBLEM
This study aims to analyze current workflow inefficiencies and develop a solution
that enhances architectural design process management. Specifically, it answered the
following questions:
1.​ How can architects effectively track and record design iterations that are
distributed across multiple digital platforms?
2.​ How does using the ArchFolio application enhance an architect's workflow
efficiency and improve their digital file organization?
3.​ How can standardized workflows be established to optimize the utilization of
digital tools in architectural practice?
LITERATURE REVIEW
The File Management Software or Applications on Productivity
File management is the process of organizing, storing, and retrieving digital files.
With the digital modern technology, file management has become useful in terms of
productivity and efficiency. According to the research study (Fairlie, 2024) and survey
(Adobe Acrobat Survey, 2023) 47 percent of employees say their company’s digital
organization method is ineffective and difficult to navigate. With this result, it is crucial
to have a proper organization and file management system to improve the employees
efficiency. By having an effective file management it helps to maintain the order and
organization. It also helps to prevent delays or missed deadlines, time consuming and
5
decreased productivity. It improved time management, streamline access to information,
reduced downtime, improved security, reduced risk of data loss, cost savings, increased
collaboration and enhanced productivity (Tariq, 2023b).
Web Application Architecture Components
According to the study of Petrenko and Litslink (2024), Content Delivery Networks
(CDNs) have become ubiquitous throughout modern web ecosystems to provide a
fundamental change in digital resource global distribution. Web assets are distributed
strategically across various locations to allow Content Delivery Networks (CDNs) to
enhance user experience through delivery of HTML frameworks and CSS styling
elements and JavaScript code and multimedia files. The distributed system architecture
uses resource delivery approaches that base each transmission on end-user geographic
proximity. Users receive faster responses together with improved system performance
because the network directs content requests to the nearest server node. The optimization
method makes digital content more accessible throughout all geographic areas while
demonstrating spatial distribution methods help overcome the time limitations in network
interchange activities.
Workflow Optimization
Boeykens et al., (2006) conducted experimental research to optimize workflows in
architectural design through software optimization methods. The research observed
design application user behavior to discover creative process delays. The research team
performed tests with architectural professionals to record modifications in design
functionality and interface elements for better both efficiency and design quality output.
The research delivers important understanding about how software developers should
6
design applications to better assist architectural practice. El-Khouly and Abdelhalim
(2024) presents guarded findings that show difficulties in advancing AEC industry
workflows beyond conventional techniques. The industry faces two major challenges
which include keeping design purpose secure during project stages and the
implementation of innovative technology platforms. Proper BIM integration leads to
important improvements in both project delivery efficiencies and accuracy levels
according to research documentation.
7
THEORETICAL-CONCEPTUAL FRAMEWORK
Figure 1.1 Conceptual Framework of Architectural Design Process
The ArchFolio conceptual framework represents an innovative strategy towards
architectural design processes resulting from the intersection of digital technology and
workflow optimization approaches. It is built on three theoretical pillars:
Digital Integration Theory, which includes the incorporation of existing digital
tools into conventional architectural practice; Workflow Optimization Theory, which
promotes the tightening of processes or procedures to encourage creativity; and
Collaborative Design Theory, which focuses on the enhancement of teamwork for
modern architectural design. The architecture of the framework has two main operational
layers: the Digital Integration Layer which serves as the technological core for managing
8
the integration and multiplicity of digital design tools, data, assets, and files; and the
Workflow Optimization Layer which is fundamentally concerned with the technology of
processes for improving operational efficiency, collaboration, and quality control.
The implementation of the framework follows a systematic three-phase approach
which comprises the integration, optimization, and validation phases where each phase
builds on the foundation of the previous stage towards an integrated solution. The impact
that is expected from this framework used is greater efficiency on design processes,
improved quality control and compliance, and enhanced teamwork and customer
relations. Measurement of success integrates both the quantitative metrics and the
qualitative evaluations, like time saving, reducing errors, and user satisfaction as well as
feeling improved workflows.
In this organized manner, ArchFolio meets the multifaceted needs of modern day
architectural practice with a clear pathway for enhancement and innovation in the
architectural design processes which, in the end, is a dependable solution for upgrading
architectural workflows of contemporary architecture.
9
RESEARCH METHODOLOGY
In this chapter, the outline of the research methodology are the research design,
research locale, research participants, data collection research procedure, data analysis
and ethical consideration were provided.
RESEARCH DESIGN
This study employs a developmental and quasi-experimental research design to
create and evaluate the offline functionality of “ArchFolio”, a prototype application
designed to streamline architectural workflows. The focus is on addressing inefficiencies
in managing architectural design processes and making the application accessible to users
without requiring internet connectivity.
RESEARCH LOCALE
The study site for this research served as a focal point for gathering information to
investigate the importance of digital tools in streamline architectural workflows. The
study was conducted at LP Kilayko Architectural Services, JRDC Building, Osmeña
Blvd., Cebu City.
RESEARCH PARTICIPANTS
The study targeted employees and professional architects from LP Kilayko
Architectural Services, located in the JRDC Building, Osmeña Blvd., Cebu City. A total
of 10 qualified professionals were selected as research participants based on their
expertise and relevance to the study.
10
DATA COLLECTION
The data collection was conducted through surveys and questionnaires to collect
the primary data. In order to achieve the study’s objective, respondents were answered
open -ended questions and likert scale questions during the survey and questionnaire.
Respondents were encouraged to submit the most accurate response feasible throughout
the procedure. On the other hand, secondary data will be conducted by finding reliable
sources or data and evaluating data’s or the sources relevance and reliability. Also, the
personal information of the respondents was kept and free from disclosure for the
respondents safety.
DATA ANALYSIS
This study follows a quasi-experimental approach to examine how ArchFolio can
improve workflow organization in architectural design. To gather data, structured survey
questionnaires were distributed among architects and designers at LP Kilayko
Architectural Services, focusing on their experiences with project management, digital
tool integration, and workflow efficiency. For the quantitative analysis, survey responses
were assessed using descriptive statistics such as percentages and averages to measure
how participants perceive the impact of ArchFolio. The responses provided insights into
the common challenges architects face, their level of satisfaction with existing tools, and
how a centralized platform could enhance their work processes. On the qualitative side,
open-ended responses were carefully reviewed to identify recurring themes related to file
organization, collaboration difficulties, and project tracking inefficiencies. These insights
helped highlight the specific areas where ArchFolio could make a meaningful difference
in streamlining architectural workflows. Since this study does not have full control over
11
external factors, it compares real-world experiences rather than relying on strict
experimental conditions. By analyzing trends and feedback from professionals in the
field, the study offers a practical understanding of how digital solutions like ArchFolio
can help architects work more efficiently and collaboratively.
RESEARCH PROCEDURE
Preparing the Development Environment
1.​
Setting Up Visual Studio Code (VS Code)
1.1 Download the Visual Studio Code from its official site and install.
1.2 Install the extensions of Javascript, HTML, and CSS extensions.
1.3 Install Node.js and npm (Node Package Manager) from the official
Node.js website.
2.​
Setting Up and Installing Firebase and Firestore SDK
2.1 Search for firebase.google.com in google and click the first link.
2.2 Set Up the firebase by following the commands and instruction on
who it gets started.
2.3 Create a Firebase project in the firebase console.
2.4 Set Up firestore as the database and install it in your application
project.
2.5 Initialize Firebase in your project directory using the command:
(firebase init).
12
Creating and Setting Up the Web Application
3.​
Creating a New Project
3.1 Navigate to the desired folder in the terminal and create a new project
using the command:(npx create-react-app my-web-app).
3.2 Open the project folder and load it into Visual Studio Code.
4.​
Setting Up the Firebase Project
4.1 Install the firebase extension in the Visual studio code.
4.2 Add the firebase configuration in a new file.
4.3 Import and configure the firestore in your project.
Developing the Web Application
5.​
Building the Web Application Features
5.1 Create the necessary components for the application using the
Javascript language and React computer program.
5.2 Implement the UI design using the HTML and CSS language.
5.3 Set up routing for navigation between different pages of the
application using React Router.
5.4 Build the Web Application features
5.4.1 User Authentication
Secure the login and signup system as well as the password
security.
5.4.2 File Management
Able to upload, rename and delete files that can support multiple
file types (PDF, documents, images, dwg etc.).
13
5.4.3 Folder Organization
Able to have specified folder in each architectural process the
Pre-design (PD) [2 to 4 weeks], Schematic design (SD) [4 to 8
weeks], Design development (DD) [8 to 12 weeks], Construction
documents (CD) [8 to 12 weeks], Building permit (BP) [12 to 24
weeks], Bidding and Negotiation (BN) [3 to 6 weeks] and
Construction administration (CA).
5.4.4 Task Progress Update Bar
Able to track file uploads or ongoing tasks.
6.​
Connecting to the Firestore
6.1 Create functions to read and write data to Firestore from your React
components.
Testing and Debugging
7.​
Running the Web Application Locally
7.1 Run the development software by running the command:(npm start).
7.2 Test the application on a web browser and resolve any issues or errors
encountered during testing.
Building and Deployment the Web Application
8.​
Building the Application for Production
8.1 Create a production build of the web application by running the
command:(npm run build).
8.2 The generated build files are located in the build directory.
14
9.​
Deploying the Web Application
9.1 Deploy or Upload the web application on the firebase hosting by
running the commands of:(firebase login); (firebase init): (firebase
deploy).
9.2 Share the link to the hosted application with users.
ETHICAL CONSIDERATIONS
When conducting research on ArchFolio, several ethical considerations must be
taken into account to ensure the integrity of the study and the welfare of participants.
First and foremost, informed consent is crucial; participants involved in interviews or
surveys must be fully informed about the purpose of the research, how their data will be
used, and any potential risks. They should voluntarily agree to participate without any
coercion, ensuring that they understand their right to withdraw at any time without
penalty. Additionally, confidentiality and data protection are paramount. Researchers
must prioritize the confidentiality of participants' information by anonymizing data and
securely storing it to prevent unauthorized access. Clear protocols should be established
for handling sensitive information, ensuring compliance with data protection regulations
such as GDPR.
The research should critically assess the ethical implications of ArchFolio's
design and functionality. This includes evaluating how the application may impact users'
workflows, decision-making processes, and overall well-being. Researchers should
consider potential biases in design and strive to create a tool that promotes equity and
accessibility within architectural practices. Engaging with various stakeholders, including
architects, educators, and students, is also essential for understanding diverse
15
perspectives on ethical concerns related to digital tools in architecture. This engagement
can help identify potential ethical dilemmas and ensure that the application meets the
needs of all users.
The study should consider how ArchFolio may influence professional practices in
architecture. This includes examining whether it could inadvertently perpetuate existing
inequalities or biases within the industry and ensuring that it fosters an inclusive
environment for all practitioners.
16
RESULTS AND DISCUSSION
SUMMARY
This study focuses on optimizing the architectural workflows by developing a
web-based application called “ArchFolio”. It aims to address the challenges faced by the
architects in managing their works and projects. It aims to minimize delays and reduce
mismanagement as well as improve efficiency, enhance collaboration and teamwork, and
lastly improve the digital file organization. Additionally, this research study investigates
workflow optimization, evaluates the user experience and the effectiveness of the
ArchFolio web-based application in architectural professional use. This study employs a
quasi-experimental research design where the researchers use the mixed method from
qualitative to quantitative in order to survey the architects to assess the application
impacts on workflow organization.
FINDINGS
Qualitative Phase
Before using the application, the researchers have gathered survey data where it
shows that the integration of technology in file management and project organization
plays an important role in streamlining processes, particularly in architectural firms.
According to the responses gathered, there is a growing need for an application like
ArchFolio that simplifies file categorization, enhances security, and improves
accessibility. Some studies indicate that efficient digital tools effectively reduce the time
spent allowing the users or professionals to manage and focus on only one task (Flayyih,
2024).
17
Another primary challenge highlighted in the survey responses is the difficulty in
categorizing and retrieving project files, particularly older documents stored in multiple
locations. This aligns with previous research where it emphasizes the importance of
structured digital storage systems in reducing inefficiencies and human error in creative
industries (Sachdeva et al., 2020). Also one of the respondents expressed the need for the
project where it gives ideas on how to organize projects based on timelines. (Sangupta,
2019).
The results imply that the utilization of the web-based application “ArchFolio” or
any digital application would have a big impact in professional fields even though the
host company is either private or not. It reflects a demand for a more optimized, user
friendly interface that prioritizes security and is easy to access. Similar to one of the
response suggestions in the survey that by having an intuitive design combined with
structured categorization could lead to higher satisfaction levels and better usability.
In summary, the study's findings align with existing literature on digital efficiency
in professional settings. The feedback underscores the necessity of structured file
organization, security optimization, and user-friendly navigation within ArchFolio. By
addressing these needs, the application has the potential to transform file management
practices, ultimately benefiting professionals in architecture and related fields.
18
Quantitative Phase
19
20
The ArchFolio survey reveals key challenges architects face with organization
and workflow efficiency. While the platform is well-received 57% rated it 4 stars and
43% gave it 5 file management remains a major issue. A significant 71% believe better
organization tools could boost their productivity by over 50%. Surprisingly, all
respondents still rely on traditional folders and naming conventions, showing an
opportunity for ArchFolio to introduce a smarter system. Additionally, only 28% of teams
are certain they follow a standardized workflow, indicating a need for clearer processes.
Time wasted searching for files is another major concern. While 43% spend under
an hour weekly, nearly 30% lose over five hours just looking for documents.
Standardized workflows could help, with 57% citing productivity as the biggest benefit,
followed by fewer mistakes and better efficiency. However, tools alone aren't enough
86% of respondents want training in workflow standardization, document management,
and system integration. This highlights the importance of combining better tools with
strong user support.
The survey also shows that ArchFolio would be most useful for early-career
architects, as 71% of respondents have less than two years of experience. In terms of
software, AutoCAD is dominant, with 86% using it, while tools like SketchUp, Revit,
and Rhino barely got any votes. This makes AutoCAD integration a top priority for
ArchFolio. Overall, the results highlight a strong demand for better file management,
smarter workflows, and training. If ArchFolio can address these needs, it has the potential
to become an essential tool for architects, helping them work more efficiently and stay
organized.
21
Conclusion
This study aimed to address the inefficiencies in architectural design workflows
by developing ArchFolio, a web application designed to integrate digital tools and
optimize architectural processes. ArchFolio consolidates essential tools and processes
into a single platform, enabling architects to manage design iterations, maintain organized
documentation, and transition seamlessly between tasks. The results show that ArchFolio
enhances workflow efficiency and improves digital file organization, with a significant
majority of participants expressing satisfaction with its use.
The theoretical framework of ArchFolio, built on digital integration, workflow
optimization, and collaborative design theories, supports its effectiveness in enhancing
teamwork and quality control. Future directions include integrating artificial intelligence
to further improve efficiency and exploring its application in other design fields. Overall,
ArchFolio offers a promising solution for streamlining architectural workflows, allowing
architects to focus on creative design while minimizing delays and mismanagement.
RECOMMENDATIONS
Based on the findings of this study, the researchers would recommend:
1.​ Integrating the Artificial Intelligence in the application to improve the workflow
efficiency and security.
2.​ Compare the user experience in using this application “ArchFolio” to other file or
data management organizer applications and websites.
3.​ Explore and assess the performance of the application to provide more
comprehensive metrics to evaluate the real world effectiveness of ArchFolio.
22
4.​ Investigate the potential use of ArchFolio in other design fields such as
engineering, urban planning, etc.
23
References
Adam. (2025, January 24). ArchAdemia | Alternative Education for Architects &
Students. ArchAdemia.
Boeykens, S., Neuckermans, H., & Leuven, K. U. (2006). Improving Design Workflow in
Architectural Design Applications. International Journal of Architectural
Computing, 4(4), 1–19.
Digital Adoption. (2024, August 2). What are Digital Tools? | Digital-adoption.com.
Eby, K. (2023, March 1). The power of iterative design and process. Smartsheet.
El-Khouly, T., & Abdelhalim, O. (2024). Preserving conceptual design integrity:
strategies for enhancing interoperability in architectural digital design workflows.
Scientific Reports, 14(1).
Fairlie, M. (2024, June 10). 7 stats that will make you rethink your document
management strategy. business.com.
Flayyih, H. (2024, September). The Impact of Digital Transformation on Office
Management Efficacy.
Landau, P. (2024, June 17). Architectural Design Process: A quick guide.
ProjectManager.
Sachdeva et al., (2020). Critical Analysis of Data Storage Approach
Tariq, N. (2023b, May 15). The impacts of file management on productivity and
efficiency. Medium.
Team, I. (2025, January 25). illustrarch | Daily Dose of Architecture. Illustrarch
24
APPENDICES
Conceptual Framework
‌
25
DATA GATHERING OF QUALITATIVE SURVEY
26
27
DOCUMENTATION IN MAKING THE APPLICATION
28
29
DATA GATHERING OF QUANTITATIVE SURVEY
Oo
30