diff --git a/report/1_Introduction.tex b/report/1_Introduction.tex
index 00bd25189c501673462e1673e44ea4e84b77dc83..9842ff378132c94c1e315754e924e1153f7407df 100644
--- a/report/1_Introduction.tex
+++ b/report/1_Introduction.tex
@@ -4,12 +4,12 @@
\chapter{INTRODUCTION}
\section{Overview}
- Many businesses require their supply chain partners to comply with wide-ranging cyber security compliance standards, of which there are many hundreds. Cyber supply chain risk management (CSCRM) differs from cyber security by gaining a higher degree of governance over the company in question, and over its extended enterprise partners such as all its suppliers and customers. \cite{CSCRM} Cyber security, however, only considers security of a technical nature, whereas CSCRM attempts to encompass both managerial and human factors in preventing risks from disrupting IT systems\textquoteright\ operations. \cite{CSCRM}
+ Many businesses require their supply chain partners to comply with wide-ranging cyber security compliance standards, of which there are many hundreds. Cyber supply chain risk management (CSCRM) differs from cyber security by gaining a higher degree of governance over the company in question, and over its extended enterprise partners such as all its suppliers and customers. \cite{CSCRM} Cyber security, only considers security of a technical nature, whereas CSCRM attempts to encompass both managerial and human factors in preventing risks from disrupting IT systems\textquoteright\ operations. \cite{CSCRM}
This chapter gives an overview of the project's goals and objectives. Subsequent chapters discuss compliance in cyber security, cyber crime, supply chains and the impacts of security breaches on businesses, use cases, requirements, risks and functionality for the proposed application, followed by the proposed design of the implementation for the application.
\section{Identification of the Problem}
- Keeping track of each company's compliance to a specific standard is a lengthy and potentially expensive task as it can be difficult to maintain such compliance without the use of an external service or consultant. For time and experience reasons, it is difficult for system administrators to perform such tasks in addition to their other responsibilities. Therefore a specialist is required in many cases, which can be too expensive for most SMEs.
+ Keeping track of each company's compliance to a specific standard is a lengthy and potentially expensive task as it can be difficult to maintain such compliance without the use of an external service or consultant. Regulations often considerably raise start up and production costs for businesses. \cite{costOfCompliance} For time and experience reasons, it is difficult for system administrators to perform such tasks in addition to their other responsibilities. Therefore a specialist is required in many cases, which can be too expensive for most SMEs.
An automatic cyber security compliance form generation engine would provide a low cost, time efficient solution for businesses that need a flexible, customisable way of tracking their partner's compliance - or their own compliance - to multiple standards.
@@ -20,7 +20,7 @@
A thorough review of relevant literature was required to fully understand the scope of the problem and the existing solutions, if any existed. If they were to exist, an assessment of possible improvements that could be made to those solutions was also executed. A chapter detailing the analysis of the requirements for the project was required to gauge and determine the feasibility and enable the planning and design of the application itself. This included an assessment of likely risks to the project.
\subsection{Development and Testing}
- The implementation of the web application, should be done in a way that allows for easy maintenance, extensions and other improvements at a later date. To ensure the functionality of all parts of the application, a testing system was also implemented. This software validation was automated for consistency and to save time.
+ The implementation of the web application should be done in a way that allows for easy maintenance, extensions and other improvements at a later date. To ensure the functionality of all parts of the application, a testing system was also implemented. This software validation was automated for consistency and to save time.
\subsection{Analysis}
An analysis of the test results and implementation was carried out after it was finalised to establish adherence to the designs and to assure the quality of the code.
diff --git a/report/2_BackgroundAndLiteratureReview.tex b/report/2_BackgroundAndLiteratureReview.tex
index 99c866b59fede9b8a2eea54de2ea98b284f537f5..94413f338f78fe2c13e4c3a32c86f7260af42568 100644
--- a/report/2_BackgroundAndLiteratureReview.tex
+++ b/report/2_BackgroundAndLiteratureReview.tex
@@ -10,65 +10,63 @@
Supply chain management is an essential process for interconnecting major business actions and behaviours both internally and externally between organisations to produce an effective overall integrated business model. \cite{CSCRM} Supply chain management encompasses all logistic management endeavours, including manufacturing operations, and drives the coordination of activities across multiple business areas including marketing, sales, product design, finance and IT. \cite{CSCRM}
\subsection{Supply Chain Security}
- Supply chain security concentrates on the threats to any organisation's suppliers of goods and services, many of which often have considerable access to internal company or to its customer data. \cite{CombattingCyberRisks}
+ Supply chain security concentrates on the threats to any organisation's suppliers of goods and services, many of which often have considerable access to internal company data or to its customer data. \cite{CombattingCyberRisks}
\section{Compliance}
Compliance is a crucial, costly, and complex issue for any company. \cite{ComplianceGovernance} It relates to conformance to a set of laws, regulations, policies, or best practices known as standards. \cite{ComplianceGovernance} Organisations are often required to put policies and controls in place ensuring conformity with the regulations outlined in their given compliance standard(s), the purpose of which is to safeguard the organisation against security threats.
\subsection{Compliance in Cyber Security}
- Cyber security is the aggregation of technologies, processes, and practices which are designed to shield computer networks, software and data from loss, theft or manipulation. \cite{CSCRM} Cyber security standards have long been in place governing company and individual policies and practices several decades. \cite{StanfordConsortium} Regulation and legislation is struggling to keep pace given the rapid evolution of this field. \cite{GDPR} With the expanding pool of available tools, there is also an ever-increasing pool of people capable of cyber crime. It is therefore essential that companies continually conform to the latest standards, regardless of the size of the enterprise. This project's aim is to enable cost effective organisational compliance with any given standard.
+ Cyber security is the aggregation of technologies, processes and practices which are designed to shield computer networks, software and data from loss, theft or manipulation. \cite{CSCRM} Cyber security standards have long been in place governing company and individual policies and practices for several decades. \cite{StanfordConsortium} Regulation and legislation is struggling to keep pace given the rapid evolution of this field. \cite{GDPR} With the expanding pool of available tools, there is also an ever-increasing pool of people capable of cyber crime. It is therefore essential that companies continually conform to the latest standards, regardless of the size of the enterprise. This project's aim is to enable cost effective organisational compliance with any given standard.
\subsection{Cyber Essentials}
- The UK Government has worked with a number of institutions to develop Cyber Essentials, a set of basic standards to help defend organisations from common online security threats. \cite{CyberEssentials} This scheme is designed to prevent unskilled individuals from finding basic organisational vulnerabilities by providing advice, and two different levels of certification; \textquotedblleft Cyber Essentials\textquotedblright\ and \textquotedblleft Cyber Essentials Plus\textquotedblright. The former is a self-assessment designed to be light-weight and easy to follow. The latter is a certification body independently carrying out the verification an organisation's cyber security.
+ The UK Government has worked with a number of institutions to develop Cyber Essentials, a set of basic standards to help defend organisations from common online security threats. \cite{CyberEssentials} This scheme is designed to prevent unskilled individuals from finding basic organisational vulnerabilities by providing advice and two different levels of certification; \textquotedblleft Cyber Essentials\textquotedblright\ and \textquotedblleft Cyber Essentials Plus\textquotedblright. The former is a self-assessment designed to be light-weight and easy to follow. The latter is a certification body independently carrying out the verification of an organisation's cyber security.
\section{Impacts}
- Cyber attacks can financially devastate and disrupt people and businesses. Successful attacks can expose personal information, leaving the victims of these security breaches vulnerable to fraud. \cite{CyberCrime} Victims can then be left vulnerable to further attacks, using information previously gathered by attackers.
+ Cyber attacks can financially devastate and disrupt people and businesses. Successful attacks can expose personal information leaving the victims of these security breaches vulnerable to fraud. \cite{CyberCrime} Victims can then be left vulnerable to further attacks using information previously gathered by attackers.
\subsection{The Effect on Business and Loss of Confidence}
- A Ping Identity survey (a company selling cloud and software identity security solutions,) states that 75\% of people stop engaging with a brand online following a data breach, with 59\% saying will not sign up to use online services or applications that have recently experienced a data breach. \cite{ITGovernance} Nevertheless, 56\% saying they were unwilling to pay for additional security to protect their personal information. \cite{ITGovernance}
+ A Ping Identity survey (a company selling cloud and software identity security solutions), states that 75\% of people stop engaging with a brand online following a data breach, with 59\% saying they would not sign up to use online services or applications that have recently experienced a data breach. \cite{ITGovernance} Despite this, 56\% said they were unwilling to pay for additional security to protect their personal information. \cite{ITGovernance}
\subsection{Legal consequences}
- GDPR requires competent management of all personal information held by an organisation. \cite{BusinessInfo} Should such information be compromised where that organisation security negligent, face fines and regulatory sanctions can be imposed. \cite{BusinessInfo}
+ GDPR requires competent management of all personal information held by an organisation. \cite{BusinessInfo} Should such information be compromised and that organisation is found to have been security negligent, it could face fines and regulatory sanctions may be imposed. \cite{BusinessInfo}
\section{Case Study: Pouring Pounds Ltd}
- Two cashback sites owned by Pouring Pounds Ltd were found to have leaked two terabytes of personally identifiable information and account data because of an unprotected database, which was accessible through an exposed port on the company's server. The leak occurred in October 2019 and has affected approximately 3.5 million individuals. \cite{z6mag}
+ Two cashback sites owned by Pouring Pounds Ltd were found to have leaked two terabytes of personally identifiable information and account data because of an unprotected database which was accessible through an exposed port on the company's server. The leak occurred in October 2019 and has affected approximately 3.5 million individuals. \cite{z6mag}
+
+
+\section{Discussion}
+ TODO
+
+
+\section{Conclusion}
+ TODO
\section{Previous and Similar Work}
There follows an overview and evaluation of two other products found during background research for this project.
\subsection{Formstack}
- Formstack boasts a drag and drop interface to allow quick and easy form creation customisation, with various components used for different data types and layouts to allow changes to be viewed in real time (featured in Figure 2.2). This product is aimed at developers and non-technical people, offering a time-saving way to build forms for a variety of different functions, including collecting payments, gathering customer data and automating day-to-day tasks. \cite{Formstack}
-
- At the time of writing, this product has multiple pricing tiers, from \$19 per month for \textquoteleft Bronze\textquoteright\ access to \$249 per month for \textquoteleft Platinum\textquoteright\ services which includes \textquotedblleft Advanced data collection features \& priority support\textquotedblright. \cite{Formstack} There is an 'Enterprise' edition where pricing is provided on a case-by-case basis.
+ Formstack boasts a drag and drop interface to allow quick and easy form creation customisation, with various components used for different data types and layouts to allow changes to be viewed in real time (Figure \ref{fig:formStack}). This product is aimed at developers and non-technical people, offering a time-saving way to build forms for a variety of different functions, including collecting payments, gathering customer data and automating day-to-day tasks. \cite{Formstack}
- \begin{figure}[H]
- \center
- \includegraphics[height=90mm, width=145mm]{../figures/FormstackUserInterface1}
- \caption{Formstack User Interface 1}
- \end{figure}
+ At the time of writing, this product has multiple pricing tiers, from \$19 per month for \textquoteleft Bronze\textquoteright\ access to \$249 per month for \textquoteleft Platinum\textquoteright\ services which includes \textquotedblleft Advanced data collection features \& priority support\textquotedblright. \cite{Formstack} There is also an \textquoteleft Enterprise\textquoteright\ edition where pricing is provided on a case-by-case basis.
\begin{figure}[H]
\center
\includegraphics[height=90mm, width=145mm]{../figures/FormstackUserInterface2}
- \caption{Formstack User Interface 2}
+ \caption{Formstack User Interface}
+ \label{fig:formStack}
\end{figure}
\subsection{Device Magic}
- With a broad focus that includes job reports, inspections, audits, work orders and invoices, Device Magic is a data collection application that allows users to create and complete mobile forms. \cite{DeviceMagic} One of the key selling points is the ability to use all application features app when offline. It possesses an easy-to-use drag and drop user interface similar to that of Formstack and allows users to preview forms in mobile format when creating them on a desktop. \cite{DeviceMagic} In addition it features rich data capture (such as images), and to automate workflows, e.g. enabling a form submission to trigger another form to be sent. \cite{DeviceMagic}
-
- \begin{figure}[H]
- \center
- \includegraphics[height=100mm, width=145mm]{../figures/DeviceMagicUserInterface1}
- \caption{Device Magic User Interface 1}
- \end{figure}
+ With a broad focus that includes job reports, inspections, audits, work orders and invoices, Device Magic is a data collection application that allows users to create and complete mobile forms. \cite{DeviceMagic} One of the key selling points is the ability to use all application features when offline. It possesses an easy-to-use drag and drop user interface similar to that of Formstack and allows users to preview forms in mobile format when creating them on a desktop (Figure \ref{fig:deviceMagic}). \cite{DeviceMagic} It features rich data capture (such as images), and automated workflows, e.g. enabling a form submission to trigger another form to be sent. \cite{DeviceMagic}
\begin{figure}[H]
\center
\includegraphics[height=100mm, width=145mm]{../figures/DeviceMagicUserInterface2}
- \caption{Device Magic User Interface 2}
+ \caption{Device Magic User Interface}
+ \label{fig:deviceMagic}
\end{figure}
\subsection{Evaluation and Comparison of Existing Products}
- The range of customisations available in Formstack and Device Magic make them a generic solution for form creation and customisation when compared to the specialised nature proposed in this project. While the general layout was a good starting point for my own design, this project has a more streamlined interface and method for form creation. Compliance forms have a more straightforward and predictable structure, a fact which has been exploited during the design phase (see Chapter 4: Design).
\ No newline at end of file
+ The range of customisations available in Formstack and Device Magic make them a generic solution for form creation and customisation when compared to the specialised nature proposed in this project. While the general layout was a good starting point for my own design, this project has a more streamlined interface and method for form creation. Compliance forms have a more straightforward and predictable structure, a fact which has been exploited during the design phase (Figure \ref{fig:wireframeCreateForm}).
\ No newline at end of file
diff --git a/report/3_RequirementsAndAnalysis.tex b/report/3_RequirementsAndAnalysis.tex
index f5bf91ea719bf43e8d35dab0a69ad45019ec7538..ef3a34fbd5fb843f55ee4e329dc0dd148a593d5f 100644
--- a/report/3_RequirementsAndAnalysis.tex
+++ b/report/3_RequirementsAndAnalysis.tex
@@ -6,11 +6,11 @@
This chapter analyses the requirements of the proposed application and informs the design decisions that have been made.
\section{Use Cases}
- Use cases describe the various interactions between external actors and a given system as part of the Unified Modelling Language (UML). They are used in this chapter to define the interactions between users and the proposed application.\\\\
+ Use cases describe the various interactions between external actors and a given system as part of the Unified Modelling Language (UML). They are used in this chapter to define the interactions between users and the proposed application (Figures \ref{fig:useCaseFunctionality} and \ref{fig:useCaseDashboard}).\\\\
\begin{figure}[H]
\center
- \begin{tikzpicture}
+ \begin{tikzpicture}[every node/.style={scale=0.7}]
% components
\umlactor[x=0, y=0, scale=2]{User}
\umlusecase[x=-3, y=3, scale=1.25, name=register]{Register}
@@ -33,12 +33,13 @@ This chapter analyses the requirements of the proposed application and informs t
\umlinherit{User}{submitForm}
\umlinherit{User}{signOut}
\end{tikzpicture}
- \caption{Use Case Diagram 1: Functionality}
+ \caption{Use Case Diagram: Functionality}
+ \label{fig:useCaseFunctionality}
\end{figure}
\begin{figure}[H]
\center
- \begin{tikzpicture}
+ \begin{tikzpicture}[every node/.style={scale=0.7}]
% components
\umlusecase[x=0, y=0, scale=1.5, fill=Red!20, name=dashboard]{Dashboard}
\umlusecase[x=-3, y=3, scale=1.25, width=2.5cm, name=displayForms]{Display forms}
@@ -59,17 +60,20 @@ This chapter analyses the requirements of the proposed application and informs t
\umlinclude{dashboard}{addPartner}
\umlinclude{dashboard}{signOut}
\end{tikzpicture}
- \caption{Use Case Diagram 2: Dashboard requirements}
+ \caption{Use Case Diagram: Dashboard requirements}
+ \label{fig:useCaseDashboard}
\end{figure}
\clearpage
\subsection{Use Case Description}
- The following table explains the major use cases for the application:\\
+ The following table explains the major use cases for the application (Table \ref{table:useCaseDescriptions}):\\
\begin{table}[h]
\centering
+ \caption{Use Case Descriptions}
+ \label{table:useCaseDescriptions}
\begin{tabular}{|c|c|}
\hline
Use Case & Description\\
@@ -92,15 +96,16 @@ This chapter analyses the requirements of the proposed application and informs t
Sign out button & Allows the user to sign out from the application.\\
\hline
\end{tabular}
- \caption{Use Case Descriptions}
\end{table}
\section{Functional Requirements}
- A functional requirement defines the intended behaviour of a component or part of a system. In the table below, the major functional requirements have been described:\\
+ A functional requirement defines the intended behaviour of a component or part of a system. In the table below, the major functional requirements have been described (Table \ref{table:functionalRequirements}):\\
\begin{table}[H]
\centering
+ \caption{Functional Requirements}
+ \label{table:functionalRequirements}
\begin{tabular}{|c|c|}
\hline
Requirement & Description\\
@@ -127,14 +132,15 @@ This chapter analyses the requirements of the proposed application and informs t
Add a partner & \makecell{Users are able to view and edit their account information\\including name, email, company and password (latter not viewable).}\\
\hline
\end{tabular}
- \caption{Functional Requirements}
\end{table}
\subsection{Functional Requirements Analysis}
- An importance level has been assigned to each of the functional requirements, to effectively plan the work in order to create the minimum viable product. An additional table shows how the importance levels have been determined for each requirement.\\
+ An importance level has been assigned to each of the functional requirements to effectively plan the work in order to create the minimum viable product (Table \ref{table:functionalRequirementsAnalysis}). An additional table shows how the importance levels have been determined for each requirement (Table \ref{table:importanceLevels}).\\
\begin{table}[H]
\centering
+ \caption{Importance Levels}
+ \label{table:importanceLevels}
\begin{tabular}{|c||c|c|c|c|c|}
\hline
\makecell{Complexity/\\Time} & Low & Medium & High\\
@@ -147,11 +153,12 @@ This chapter analyses the requirements of the proposed application and informs t
Long & \cellcolor{Yellow}0.25 & \cellcolor{Yellow}0.5 & \cellcolor{Red}1\\
\hline
\end{tabular}
- \caption{Importance Levels}
\end{table}
\begin{table}[H]
\centering
+ \caption{Functional Requirements Analysis}
+ \label{table:functionalRequirementsAnalysis}
\begin{tabular}{|c|c|c|c|}
\hline
Requirement & Complexity & Time & Importance Level\\
@@ -178,15 +185,16 @@ This chapter analyses the requirements of the proposed application and informs t
Add a partner & High & Long & \cellcolor{Red}0.75\\
\hline
\end{tabular}
- \caption{Functional Requirements Analysis}
\end{table}
\section{Non-Functional Requirements}
- Non-functional requirements are high-level requirements that need to be considered during the development decisions for the entire application.\\
+ Non-functional requirements are high-level requirements that need to be considered during the development decisions for the entire application (Table \ref{table:nonFunctionalRequirements}).\\
\begin{table}[H]
\centering
+ \caption{Non-Functional Requirements}
+ \label{table:nonFunctionalRequirements}
\begin{tabular}{|c|c|}
\hline
Requirement & Description\\
@@ -203,14 +211,15 @@ This chapter analyses the requirements of the proposed application and informs t
Ease of use & \makecell{The application must be intuitive to use due to the\\mixed technical skill level of the target users.}\\
\hline
\end{tabular}
- \caption{Non-Functional Requirements}
\end{table}
\section{SWOT Analysis}
- A Strengths-Weaknesses-Opportunities-Threats or SWOT analysis is a strategic planning tool used to evaluate the internal and external factors affecting the project. \cite{investopedia}
+ A Strengths-Weaknesses-Opportunities-Threats or SWOT analysis is a strategic planning tool used to evaluate the internal and external factors affecting the project (Table \ref{table:swotAnalysis}). \cite{investopedia}
\begin{table}[H]
\centering
+ \caption{SWOT Analysis}
+ \label{table:swotAnalysis}
\begin{tabular}{|c|c|}
\hline
\cellcolor{Green}\textbf{\underline{Strengths}} & \cellcolor{Orange}\textbf{\underline{Weaknesses}}\\
@@ -224,14 +233,15 @@ This chapter analyses the requirements of the proposed application and informs t
\cellcolor{Cyan}- Could implement import/export & \cellcolor{Red}- The hosting service may start charging\\
\hline
\end{tabular}
- \caption{Risk Levels}
\end{table}
\section{MuSCoW Analysis}
- MuSCoW analysis is a prioritisation strategy for managing priorities. \cite{AgileBusiness} The four parts are short for \textquoteleft \textbf{must} have\textquoteright, \textquoteleft \textbf{Shoud} have\textquoteright, \textquoteleft \textbf{Could} have \textquoteright and \textquoteleft \textbf{Won't} have (this time)\textquoteright. \cite{AgileBusiness} The technique helps to establish the essential and optional components of a project relative to each other, simplifying the prioritisation process. \cite{AgileBusiness}
+ MuSCoW analysis is a management prioritisation strategy. \cite{AgileBusiness} The four parts are short for \textquoteleft \textbf{must} have\textquoteright, \textquoteleft \textbf{shoud} have\textquoteright, \textquoteleft \textbf{could} have \textquoteright and \textquoteleft \textbf{won't} have (this time)\textquoteright. \cite{AgileBusiness} The technique helps to establish the essential and optional components of a project relative to each other, simplifying the prioritisation process (Table \ref{table:muscowAnalysis}). \cite{AgileBusiness}
\begin{table}[H]
\centering
+ \caption{MuSCoW Analysis}
+ \label{table:muscowAnalysis}
\begin{tabular}{|c|c|}
\hline
Requirement & MoSCoW\\
@@ -262,15 +272,16 @@ This chapter analyses the requirements of the proposed application and informs t
Display Account Info & \cellcolor{Red}Won't\\
\hline
\end{tabular}
- \caption{Risk Levels}
\end{table}
\section{Risk Analysis}
- The following risk analysis has been produced, based on the requirements above and potential risks to the application. A rating system, similar to that of the importance levels for the functional requirements, has been devised for risk levelling.\\
+ The following risk analysis has been produced, based on the requirements above and potential risks to the application (Table \ref{table:riskAnalysis}). A rating system, similar to that of the importance levels for the functional requirements, has been devised for risk levelling (Table \ref{table:riskLevels}).\\
\begin{table}[H]
\centering
+ \caption{Risk Levels}
+ \label{table:riskLevels}
\begin{tabular}{|c||c|c|c|c|c|}
\hline
\makecell{Consequence/\\Probability} & Negligible & Minor & Moderate & Major & Catastrophic\\
@@ -287,13 +298,14 @@ This chapter analyses the requirements of the proposed application and informs t
Certain & \cellcolor{Green}0 & \cellcolor{Yellow}0.25 & \cellcolor{Yellow}0.5 & \cellcolor{Red}0.75 & \cellcolor{Red}1\\
\hline
\end{tabular}
- \caption{Risk Levels}
\end{table}
\hfill\break
\begin{table}[H]
\centering
+ \caption{Risk Analysis}
+ \label{table:riskAnalysis}
\begin{tabular}{|c|c|c|c|c|c|}
\hline
Risk & Probability & Consequence & \makecell{Risk\\Rating} & Mitigation\\
@@ -314,15 +326,16 @@ This chapter analyses the requirements of the proposed application and informs t
\makecell{Major\\illness} & Low & Catastrophic & \cellcolor{Yellow}0.25 & \makecell{Maintain healthy diet,\\exercise and hygiene to\\reduce risk of infection.}\\
\hline
\end{tabular}
- \caption{Risk Analysis}
\end{table}
\section{Contingency Planning}
- This section will establish the steps to take should one of the above identified risk events occur. \cite{pmi} These contingencies differ from the listed mitigations as they occur once the risk event has taken place, whereas mitigations occur before a risk event has materialised in an attempt to prevent its occurrence. \cite{pmi}
+ This section will establish the steps to take should one of the above identified risk events occur. \cite{pmi} These contingencies differ from the listed mitigations as they occur once the risk event has taken place, whereas mitigations occur before a risk event has materialised in an attempt to prevent its occurrence (Table \ref{table:contingencyPlanning}). \cite{pmi}
\begin{table}[H]
\centering
+ \caption{Contingency Planning}
+ \label{table:contingencyPlanning}
\begin{tabular}{|c|c|}
\hline
Risk Event & Contingency\\
@@ -343,12 +356,11 @@ This chapter analyses the requirements of the proposed application and informs t
Major illness & Apply for special considerations.\\
\hline
\end{tabular}
- \caption{Contingency Planning}
\end{table}
\section{Functionality}
- Below is a series of diagrams which describe the flow of some of the primary pieces of functionality in the application. They show the logic behind various aspects of the application, as well as some of the infrastructure that will be in place.
+ Below are a series of diagrams which describe the flow of some of the primary pieces of functionality in the application (Figures \ref{fig:activityAuthentication}, \ref{fig:activityFormCreation}, \ref{fig:activityFormSharing} and \ref{fig:activityAddPartner}). They show the logic behind various aspects of the application, as well as some of the infrastructure that will be in place.
\pagebreak
@@ -408,6 +420,7 @@ This chapter analyses the requirements of the proposed application and informs t
\path [line] (errorMessage) |- (userLogin);
\end{tikzpicture}
\caption{Activity Diagram: Authentication}
+ \label{fig:activityAuthentication}
\end{figure}
\clearpage
@@ -432,6 +445,7 @@ This chapter analyses the requirements of the proposed application and informs t
\path [line] (dataStored) -- (displayDashboard2);
\end{tikzpicture}
\caption{Activity Diagram: Form Creation}
+ \label{fig:activityFormCreation}
\end{figure}
\begin{figure}[b]
@@ -454,6 +468,7 @@ This chapter analyses the requirements of the proposed application and informs t
\path [line] (dataUpdated) -- (displayDashboard2);
\end{tikzpicture}
\caption{Activity Diagram: Form Sharing}
+ \label{fig:activityFormSharing}
\end{figure}
\clearpage
@@ -485,9 +500,11 @@ This chapter analyses the requirements of the proposed application and informs t
\path [line] (errorMessage) -- (searchPartner);
\end{tikzpicture}
\caption{Activity Diagram: Add Partner}
+ \label{fig:activityAddPartner}
\end{figure}
\subsection{Architecture Diagram}
+ TODO Figure \ref{fig:architecture}
\hfill\break
@@ -512,4 +529,5 @@ This chapter analyses the requirements of the proposed application and informs t
\draw[to] (firestore) to[bend right=50] node[midway, above] {5) Populate with} node[midway, below] {new data} (react);
\end{tikzpicture}
\caption{Architecture}
+ \label{fig:architecture}
\end{figure}
diff --git a/report/4_Design.tex b/report/4_Design.tex
index 5c0867f5bfb47f535bbd86b8cb38659896081164..0e8717fd3f0e04c7cd6ba2e863eec6b04e753a08 100644
--- a/report/4_Design.tex
+++ b/report/4_Design.tex
@@ -6,8 +6,6 @@
The design of the web application will be based on the requirements established in the previous chapter, coupled with standards for friendly user interfaces (UI) and the user experience (UX).
\section{Conducting User Research}
- To design a good user interface, who the user is and the most suitable interface needs to be taken into account.
-
In an SME, any person could be responsible for compliance, e.g. employee, IT, administration, even the CEO. Due to the necessity for the application to allow for both technical and non-technical users, the design must be as accessible as possible. To ensure accessibility, the application should be designed with non-technical users in mind.
\subsection{User Personas}
@@ -15,10 +13,10 @@ The design of the web application will be based on the requirements established
\begin{itemize}
\item
- Alan is a 35-year-old CEO at a small tech startup. Since he started the company from scratch and with his previous experience as a developer, he is competent when maintaining the company's network and cyber security but he does not know about the level of security at other organisations in his company's supply chain. He is aware that those organisations could be compromised and used as an attack vector to infiltrate his company's network to steal valuable data or do other serious harm.
+ Alan is a 35-year-old CEO at a small tech startup. Since he started the company from scratch and has previous experience as a developer, he is competent when maintaining the company's network and cyber security, but he does not know about the level of security at other organisations in his company's supply chain. He is aware that those organisations could be compromised and used as an attack vector to infiltrate his company's network to steal valuable data or do other serious harm.
\item
- Emily is a 22-year-old computer science graduate, tasked with producing some cyber security best practices for her company to follow, to fend off basic attacks by an unskilled individual. She knows about cyber security best practices from her university modules but is not sure where to start when producing compliance forms for her company to follow.
+ Emily is a 22-year-old computer science graduate tasked with producing some cyber security best practices for her company to adopt to fend off basic attacks by an unskilled individual. She knows about cyber security best practices from her university modules but is not sure where to start when producing compliance forms for her company to follow.
\item
Robert is a 57-year-old systems administrator at a medium sized company that has just undergone a merger with another firm. He is tasked with combining the cyber security compliance standards for both former companies into a single standard for the new merged company to follow.
@@ -28,14 +26,13 @@ The design of the web application will be based on the requirements established
Existing products have been evaluated in chapter 2. As previously stated, the design of these products is unnecessarily bloated for the purpose of producing cyber security compliance forms. Such products are designed to generate many other form types, whereas this product capitalised on the simple structure of compliance to streamline the design of the tool needed to build them. However, the basic layouts of the applications are well-suited and served as an excellent starting point from which to build the design.
-\section{User Flows and Wireframes}
- This section illustrates the application flow from start to finish, similar to flow charts in chapter 3, but with wireframes representing the UI and how each page transitions to another.
+\section{Wireframes and User Flows}
+ This section illustrates the layout of the UI and paths through it, similar to flow charts in chapter 3. The name chosen for the application is \textquotedblleft CompForge\textquotedblright (Figures \ref{fig:wireframeSignUp}, through \ref{fig:wireframeViewPartnerFormSubmissions}).
\subsection{Wireframes}
- \begin{figure}[H]
- \center
- \begin{tikzpicture}
+ \tikzset{
+ registerWireframe/.pic={
\draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border
\draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header
\node[text=White] at (2, 9) {Menu}; % Menu text
@@ -48,13 +45,11 @@ The design of the web application will be based on the requirements established
\draw[Black, very thin] (5, 3.5) rectangle (10, 3); % Password input
\draw[Black, fill=NavyBlue] (6.5, 2.5) rectangle (8.5, 2); % Create account button
\node[text=White] at (7.5, 2.25) {Create}; % Create text
- \end{tikzpicture}
- \caption{Wireframe: Register}
- \end{figure}
+ }
+ }
- \begin{figure}[H]
- \center
- \begin{tikzpicture}
+ \tikzset{
+ signInWireframe/.pic={
\draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border
\draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header
\node[text=White] at (2, 9) {Menu}; % Menu text
@@ -66,13 +61,11 @@ The design of the web application will be based on the requirements established
\draw[Black, very thin] (5, 4.5) rectangle (10, 4); % Password input
\draw[Black, fill=NavyBlue] (6.5, 3.5) rectangle (8.5, 3); % Sign in button
\node[text=White] at (7.5, 3.25) {Sign in}; % Sign in text
- \end{tikzpicture}
- \caption{Wireframe: Sign in}
- \end{figure}
+ }
+ }
- \begin{figure}[H]
- \center
- \begin{tikzpicture}
+ \tikzset{
+ dashboardWireframe/.pic={
\draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border
\draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header
\node[text=White] at (2, 9) {Menu}; % Menu text
@@ -87,13 +80,44 @@ The design of the web application will be based on the requirements established
\draw[Black, fill=White] (1, 2) rectangle (14, 0); % Partner table
\draw[Black, very thin] (1, 1.5) -- (14, 1.5); % Table rows
\draw[Black, very thin] (1, 0.5) -- (14, 0.5); % Table rows
- \end{tikzpicture}
- \caption{Wireframe: Dashboard}
- \end{figure}
+ }
+ }
- \begin{figure}[H]
- \center
- \begin{tikzpicture}
+ \tikzset{
+ dashboardMenuWireframe/.pic={
+ % Dashboard as background
+ \draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border
+ \draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header
+ \node[text=White] at (2, 9) {Menu}; % Menu text
+ \node[text=White] at (7.5, 9) {CompForge}; % Page title
+ \node[text=White] at (12, 9) {Welcome [user]!}; % Welcome text
+ \node[text=White] at (7.5, 7.5) {Form Templates Dashboard}; % Form table title
+ \draw[Black, fill=White] (1, 7) rectangle (14, 3.5); % Form table
+ \draw[Black, very thin] (1, 6.5) -- (14, 6.5); % Table rows
+ \draw[Black, very thin] (1, 5.5) -- (14, 5.5); % Table rows
+ \draw[Black, very thin] (1, 4.5) -- (14, 4.5); % Table rows
+ \node[text=White] at (7.5, 2.5) {My Partners}; % Partner table title
+ \draw[Black, fill=White] (1, 2) rectangle (14, 0); % Partner table
+ \draw[Black, very thin] (1, 1.5) -- (14, 1.5); % Table rows
+ \draw[Black, very thin] (1, 0.5) -- (14, 0.5); % Table rows
+ % Menu overlay
+ \draw[Black, fill=White] (1, 8.5) rectangle (5, 0.5); % Menu window
+ \node[text=Gray] at (3, 8) {Navigation}; % Navigation text
+ \draw[Black, very thin] (1, 7.5) -- (5, 7.5); % Menu divider
+ \node[text=Gray] at (3, 7) {Dashboard}; % Dashboard text
+ \node[text=Gray] at (3, 6.5) {Create Form}; % Create form text
+ \node[text=Gray] at (3, 6) {Add Partner}; % Add Partner text
+ \node[text=Gray] at (3, 5.5) {My Submissions}; % My submissions text
+ \node[text=Gray] at (3, 5) {Partner Submissions}; % Partner submissions text
+ \node[text=Gray] at (3, 4) {Settings}; % Settings text
+ \draw[Black, very thin] (1, 3.5) -- (5, 3.5); % Menu divider
+ \node[text=Gray] at (3, 3) {Logout}; % Logout text
+ \node[text=Gray] at (3, 1) {Close Menu}; % Close menu text
+ }
+ }
+
+ \tikzset{
+ createFormWireframe/.pic={
% Dashboard as background
\draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border
\draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header
@@ -109,6 +133,19 @@ The design of the web application will be based on the requirements established
\draw[Black, fill=White] (1, 2) rectangle (14, 0); % Partner table
\draw[Black, very thin] (1, 1.5) -- (14, 1.5); % Table rows
\draw[Black, very thin] (1, 0.5) -- (14, 0.5); % Table rows
+ % Menu overlay
+ \draw[Black, fill=White] (1, 8.5) rectangle (5, 0.5); % Menu window
+ \node[text=Gray] at (3, 8) {Navigation}; % Navigation text
+ \draw[Black, very thin] (1, 7.5) -- (5, 7.5); % Menu divider
+ \node[text=Gray] at (3, 7) {Dashboard}; % Dashboard text
+ \node[text=Gray] at (3, 6.5) {Create Form}; % Create form text
+ \node[text=Gray] at (3, 6) {Add Partner}; % Add Partner text
+ \node[text=Gray] at (3, 5.5) {My Submissions}; % My submissions text
+ \node[text=Gray] at (3, 5) {Partner Submissions}; % Partner submissions text
+ \node[text=Gray] at (3, 4) {Settings}; % Settings text
+ \draw[Black, very thin] (1, 3.5) -- (5, 3.5); % Menu divider
+ \node[text=Gray] at (3, 3) {Logout}; % Logout text
+ \node[text=Gray] at (3, 1) {Close Menu}; % Close menu text
% Create form modal overlay
\draw[Black, fill=White] (3, 9) rectangle (12, 2); % Create form window
\node[text=Black] at (7.5, 8) {Create Form Template}; % Create form title
@@ -123,13 +160,11 @@ The design of the web application will be based on the requirements established
\node[text=Black] at (10, 3.75) {Add entry}; % Add entry text
\node[text=Black] at (6.5, 3) {Cancel}; % Cancel text
\node[text=Black] at (8.5, 3) {Submit}; % Submit text
- \end{tikzpicture}
- \caption{Wireframe: Create Form}
- \end{figure}
+ }
+ }
- \begin{figure}[H]
- \center
- \begin{tikzpicture}
+ \tikzset{
+ addPartnerWireframe/.pic={
% Dashboard as background
\draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border
\draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header
@@ -145,28 +180,208 @@ The design of the web application will be based on the requirements established
\draw[Black, fill=White] (1, 2) rectangle (14, 0); % Partner table
\draw[Black, very thin] (1, 1.5) -- (14, 1.5); % Table rows
\draw[Black, very thin] (1, 0.5) -- (14, 0.5); % Table rows
+ % Menu overlay
+ \draw[Black, fill=White] (1, 8.5) rectangle (5, 0.5); % Menu window
+ \node[text=Gray] at (3, 8) {Navigation}; % Navigation text
+ \draw[Black, very thin] (1, 7.5) -- (5, 7.5); % Menu divider
+ \node[text=Gray] at (3, 7) {Dashboard}; % Dashboard text
+ \node[text=Gray] at (3, 6.5) {Create Form}; % Create form text
+ \node[text=Gray] at (3, 6) {Add Partner}; % Add Partner text
+ \node[text=Gray] at (3, 5.5) {My Submissions}; % My submissions text
+ \node[text=Gray] at (3, 5) {Partner Submissions}; % Partner submissions text
+ \node[text=Gray] at (3, 4) {Settings}; % Settings text
+ \draw[Black, very thin] (1, 3.5) -- (5, 3.5); % Menu divider
+ \node[text=Gray] at (3, 3) {Logout}; % Logout text
+ \node[text=Gray] at (3, 1) {Close Menu}; % Close menu text
% Add partner modal overlay
\draw[Black, fill=White] (3, 9) rectangle (12, 5); % Create form window
\node[text=Black] at (7.5, 8) {Add Partner}; % Create form title
\draw[Black, very thin] (6, 7) rectangle (9, 6.5); % Partner email input
\draw[Black, fill=NavyBlue] (7, 6.25) rectangle (8, 5.75); % Add button
\node[text=Black] at (7.5, 6) {Add}; % Add text
+ }
+ }
+
+ \tikzset{
+ viewSubmissionsWireframe/.pic={
+ \draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border
+ \draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header
+ \node[text=White] at (2, 9) {Menu}; % Menu text
+ \node[text=White] at (7.5, 9) {CompForge}; % Page title
+ \node[text=White] at (12, 9) {Welcome [user]!}; % Welcome text
+ \node[text=White] at (7.5, 7.5) {#1 Form Submissions}; % Form table title
+ \draw[Black, fill=White] (1, 7) rectangle (14, 3.5); % Form table
+ \draw[Black, very thin] (1, 6.5) -- (14, 6.5); % Table rows
+ \draw[Black, very thin] (1, 5.5) -- (14, 5.5); % Table rows
+ \draw[Black, very thin] (1, 4.5) -- (14, 4.5); % Table rows
+ }
+ }
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}
+ \pic {registerWireframe};
+ \end{tikzpicture}
+ \caption{Wireframe: Sign up}
+ \label{fig:wireframeSignUp}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}
+ \pic {signInWireframe};
+ \end{tikzpicture}
+ \caption{Wireframe: Sign in}
+ \label{fig:wireframeSignIn}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}
+ \pic {dashboardWireframe};
+ \end{tikzpicture}
+ \caption{Wireframe: Dashboard}
+ \label{fig:wireframeDashboard}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}
+ \pic {dashboardMenuWireframe};
+ \end{tikzpicture}
+ \caption{Wireframe: Dashboard (Menu Open)}
+ \label{fig:wireframeDashboardMenu}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}
+ \pic {createFormWireframe};
+ \end{tikzpicture}
+ \caption{Wireframe: Create Form}
+ \label{fig:wireframeCreateForm}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}
+ \pic {addPartnerWireframe};
\end{tikzpicture}
\caption{Wireframe: Add Partner}
+ \label{fig:wireframeAddPartner}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}
+ \pic {viewSubmissionsWireframe=User};
+ \end{tikzpicture}
+ \caption{Wireframe: View User Form Submissions}
+ \label{fig:wireframeViewUserFormSubmissions}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}
+ \pic {viewSubmissionsWireframe=Partner};
+ \end{tikzpicture}
+ \caption{Wireframe: View Partner Form Submissions}
+ \label{fig:wireframeViewPartnerFormSubmissions}
+ \end{figure}
+
+ \subsection{User Flow Diagrams}
+ User flow diagrams are used in UX design to illustrate the user's journey through the application. \cite{uxplanet} Below is a series of user flows describing the various paths through the application (Figures \ref{fig:flowSignUp} through \ref{fig:flowSignOut}).
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}[every node/.style={scale=0.4}]
+ \pic (register) at (-4, 0) {registerWireframe};
+ \pic (dashboard) at (4, 0) {dashboardWireframe};
+ \draw [->, very thick] (-1, 1) -- (4, 2);
+ \end{tikzpicture}
+ \caption{User Flow: Signing up}
+ \label{fig:flowSignUp}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}[every node/.style={scale=0.4}]
+ \pic (signIn) at (-4, 0) {signInWireframe};
+ \pic (dashboard) at (4, 0) {dashboardWireframe};
+ \draw [->, very thick] (-1, 1.5) -- (4, 2);
+ \end{tikzpicture}
+ \caption{User Flow: Signing in}
+ \label{fig:flowSignIn}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}[every node/.style={scale=0.4}]
+ \pic (dashboardMenu) at (-4, 0) {dashboardMenuWireframe};
+ \pic (createForm) at (4, 0) {createFormWireframe};
+ \pic (dashboard) at (0, -5) {dashboardWireframe};
+ \draw [->, very thick] (-2.5, 2.5) -- (4, 2);
+ \draw [->, very thick] (7.5, 1) -- (3, -1);
+ \end{tikzpicture}
+ \caption{User Flow: Creating a form}
+ \label{fig:flowCreateForm}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}[every node/.style={scale=0.4}]
+ \pic (dashboardMenu) at (-4, 0) {dashboardMenuWireframe};
+ \pic (addPartner) at (4, 0) {addPartnerWireframe};
+ \pic (dashboard) at (0, -5) {dashboardWireframe};
+ \draw [->, very thick] (-2.5, 2.5) -- (4, 2);
+ \draw [->, very thick] (7, 2.5) -- (3, -1);
+ \end{tikzpicture}
+ \caption{User Flow: Adding a partner}
+ \label{fig:flowAddPartner}
\end{figure}
- \subsection{Flow Charts} % Map journey
- TODO: Minified versions of the wireframes with arrows showing flow of the application...
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}[every node/.style={scale=0.4}]
+ \pic (dashboardMenu) at (-4, 0) {dashboardMenuWireframe};
+ \pic (viewUserSubmissions) at (4, 0) {viewSubmissionsWireframe=User};
+ \draw [->, very thick] (-2.5, 2) -- (4, 2);
+ \end{tikzpicture}
+ \caption{User Flow: Viewing user form submissions}
+ \label{fig:flowViewUserFormSubmissions}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}[every node/.style={scale=0.4}]
+ \pic (dashboardMenu) at (-4, 0) {dashboardMenuWireframe};
+ \pic (viewPartnerSubmissions) at (4, 0) {viewSubmissionsWireframe=Partner};
+ \draw [->, very thick] (-2.5, 2) -- (4, 2);
+ \end{tikzpicture}
+ \caption{User Flow: Viewing partner form submissions}
+ \label{fig:flowViewPartnerFormSubmissions}
+ \end{figure}
+
+ \begin{figure}[H]
+ \center
+ \begin{tikzpicture}[every node/.style={scale=0.4}]
+ \pic (dashboardMenu) at (-4, 0) {dashboardMenuWireframe};
+ \pic (signIn) at (4, 0) {signInWireframe=Partner};
+ \draw [->, very thick] (-2.5, 1.25) -- (4, 2);
+ \end{tikzpicture}
+ \caption{User Flow: Signing out}
+ \label{fig:flowSignOut}
+ \end{figure}
\section{Material-UI}
- Material-UI is a popular React UI framework for faster and easier web development. It has a large suite of components that assist with building a fully customisable UI. It is well documented, and receives regular monthly updates from its developers. For these reasons, Material-UI has been used for many of the components in this project to increase development speed.
+ Material-UI is a popular React UI framework for faster and easier web development. It has a large suite of components that assist with building a fully customisable UI. It is well documented and receives regular monthly updates from its developers. For these reasons, Material-UI has been used for many of the components in this project to increase development speed.
\section{Minimum Viable Product}
- The Minimum Viable Product (MVP) encapsulates the core features that allow an application to function. While not fully functional, it will have the necessary functionality to allow the application to work at its most basic level, and it provides a solid starting point for a project's development.
+ The Minimum Viable Product (MVP) encapsulates the core features that allow an application to function. Whilst not fully functional it will have the necessary functionality to allow the application to work at its most basic level, and it provides a solid starting point for a project's development.
- For CompForge, these are the core features making up the MVP:
+ These are the core features making up the MVP for CompForge:
\begin{itemize}
\item Register
diff --git a/report/5_Implementation.tex b/report/5_Implementation.tex
index 9bf958027416be5eda93f705e45cbfc8ce5600fd..8377c532aa960547e9a87f7a380f05b81f899c17 100644
--- a/report/5_Implementation.tex
+++ b/report/5_Implementation.tex
@@ -4,17 +4,19 @@
\chapter{IMPLEMENTATION}
\section{Project Development Objective}
- The objective of this project is to produce a web application that allows an organisation to create, store, share and submit completed compliance forms to reduce the cost of tracking and maintaining compliance to any cyber security standard.
+ The objective of this project is to produce a web application that allows a non-technical member of staff within an organisation to create, store, share and submit completed compliance forms to reduce the cost of tracking and maintaining compliance to any cyber security standard.
\subsection{Functionality}
- The application, called CompForge, allows a user to create custom compliance forms, which are stored on a serverless database and hosted on Google Firebase. These forms can be shared with partners, i.e. other users that can be added in a similar fashion to friends or followers on social media. When such a form is shared with a partner, that partner can complete and return it to the original user with their given responses to each question.
+ CompForge allows a user to create custom compliance forms which are stored on a serverless database and hosted on Google Firebase. These forms can be shared with partners, i.e. other users that can be added in a similar fashion to friends or followers on social media. When such a form is shared with a partner, that partner can complete and return it to the original user with their given responses to each question.
\section{Technologies}
- A variety of different features were required to be implemented to complete the application which entailed several different technologies. Requirements included a fast and flexible frontend framework to reduce loading times that adapt quickly to changes from the backend, a real-time database to send those changes to the frontend, and good out-of-the-box security.
+ A variety of different features were required to be implemented to complete the application which entailed several different technologies. Requirements included a fast and flexible frontend framework to reduce loading times that adapt quickly to changes from the backend, a real-time database to send those changes to the frontend, and good out-of-the-box security (Table \ref{table:technologiesAndJustifications}).
\begin{table}[H]
\centering
+ \caption{Technologies and Justifications for Use}
+ \label{table:technologiesAndJustifications}
\begin{tabular}{|c|c|c|}
\hline
Tool/Library & Purpose & Justification\\
@@ -56,18 +58,17 @@
\makecell{Batch \& WSL} & \makecell{Scripting \& providing\\Linux commands\\on Windows} & \makecell{Latex build and\\clean up script\\(see appendix)}\\
\hline
\end{tabular}
- \caption{Technologies and Justifications for Use}
\end{table}
\subsection{React}
- React is a JavaScript library for the development of user interfaces, developed and maintained by Facebook. \cite{React} React was chosen as the medium for the frontend due to its manipulation of the virtual DOM which reduces loading times, its reusable components to increase development speed, and its built-in defence against Cross Site Scripting attacks. Given that the core application involves user inputting data to forms, the latter is especially important.
+ React is a JavaScript library for the development of user interfaces, developed and maintained by Facebook. \cite{React} React was chosen as the medium for the frontend due to its manipulation of the virtual DOM which reduces loading times, reusable components to increase development speed and built-in defence against Cross Site Scripting attacks. Given that the core application involves user inputting data to forms, the latter is especially important.
\subsubsection{Redux/Thunk}
Redux was utilised to manage the state of the application, including the user's data and authentication. Redux imposes certain restrictions to state management, increasing a developer's control over how and when the state can be updated.
To change the application's state, a JavaScript object is required to be dispatched. The action and the application's current state are passed into a JavaScript function, known as a reducer. A reducer takes these two parameters and returns the new state of the application. Usually the state of an application will be large so rather than managing the entire state with a single reducer, multiple reducers are written to manage different parts of the state.
- Thunk allows asynchronous logic to interact with the state. It was used in CompForge to do ... TODO
+ Thunk allows asynchronous logic to interact with the state. It was used in CompForge to fetch data from Firestore allowing the rest of the application to continue running while it waits for a response from the server.
\subsubsection{Code Structure}
The structure of the React frontend is heavily influenced by create-react-app - a tool used here to get a head-start on the frontend application's setup and configuration. As there is no recommended React project structure, it was decided that the best method for the remainder source code was to group them by type (components, reducers and actions), thereby simplifying the process of finding and editing related components.
@@ -92,46 +93,83 @@
This section describes the progression during the course of the implementation. Much of the implementation took longer than expected due to it being the first time many of the technologies were used, resulting in a steep learning curve.
\subsection{Agile}
- The Agile methodology was employed in an attempt to quickly iterate over the project to produce the MVP and then continually improve upon the application, adding additional features with each sprint. Agile allows for regular reviews of progress which can help with project management due to the frequent re-evaluation of the application's state. (See chapter 7 for more detail on project management.)
+ The Agile methodology was employed in an attempt to quickly iterate over the project to produce the MVP and then continually improve upon the application, adding additional features with each sprint. Agile allows for regular reviews of progress which can help with project management due to the frequent re-evaluation of the application's state (Figures \ref{fig:taskList} and \ref{fig:milestoneProgress}).
- \begin{description}
- \item [Sprint 1]
- \end{description}
- The implementation began with the installation and running of create-react-app to kickstart frontend development. From there, Material-UI components were used and adjusted alongside custom code to construct the \textquotedblleft Dashboard\textquotedblright\, and \textquotedblleft Create a Form\textquotedblright\ pages. Below is a screenshot of an early iteration of the dashboard.
+ \begin{description}
+ \item [Sprint 1]
+ \end{description}
+ The implementation began with the installation and running of create-react-app to kickstart frontend development. From there, Material-UI components were used and adjusted alongside custom code to construct the \textquotedblleft Dashboard\textquotedblright\, and \textquotedblleft Create a Form\textquotedblright\ pages. Below is a screenshot of an early iteration of the dashboard (Figure \ref{fig:uiDashboardFirst}).
\begin{figure}[H]
\center
\includegraphics[height=100mm, width=145mm]{../figures/Dashboard (hardcoded)}
- \caption{Dashboard: First Draft}
+ \caption{User Interface: Dashboard (First Draft)}
+ \label{fig:uiDashboardFirst}
\end{figure}
- \begin{description}
- \item [Sprint 2]
- \end{description}
- A \textquoteleft Compforge\textquoteright\ project was created on Firebase. Some configuration in the React code was needed to connect to the project's Firestore. In addition, a considerable amount of work was done to implement the Redux/Thunk reducers and actions needed to store and manipulate the state of the application.
+ \begin{description}
+ \item [Sprint 2]
+ \end{description}
+ A \textquoteleft Compforge\textquoteright\ project was created on Firebase. Some configuration in the React code was needed to connect to the project's Firestore. In addition, a considerable amount of work was done to implement the Redux/Thunk reducers and actions needed to store and manipulate the state of the application (Figure \ref{fig:firestore}).
\begin{figure}[H]
\center
\includegraphics[height=100mm, width=145mm]{../figures/Firebase}
\caption{Firestore}
+ \label{fig:firestore}
+ \end{figure}
+
+ \begin{description}
+ \item [Sprint 3]
+ \end{description}
+ With the basics completed, set up of authentication and user accounts was implemented using Firebase Authentication. For simplicity, the signups were only setup for email, though it is possible to set up authentication via many other methods in Firebase namely; phone number, Google, Facebook, Twitter, GitHub, Yahoo, Microsoft and Apple accounts. Once accounts and authentication were completed, the frontend needed a \textquoteleft Sign up\textquoteright\ and \textquoteleft Sign in\textquoteright\ page (Figures \ref{fig:uiSignUp} and \ref{fig:uiSignIn}). Using a Material-UI template, some configuration of the React code, as well as adjustments to the routing, the ability to sign up, sign in and sign out was added to the web app.
+
+ \begin{figure}
+ \center
+ \includegraphics[height=100mm, width=145mm]{../figures/SignUp}
+ \caption{User Interface: Sign Up}
+ \label{fig:uiSignUp}
\end{figure}
- \begin{description}
- \item [Sprint 3]
- \end{description}
- With the basics completed, set up of authentication and user accounts was implemented using Firebase Authentication. For simplicity, the signups were only setup for email, though it is possible to set up authentication via many other methods in Firebase namely; phone number, Google, Facebook, Twitter, GitHub, Yahoo, Microsoft and Apple accounts. Once accounts and authentication were completed, the frontend needed a \textquoteleft Sign up\textquoteright\ and \textquoteleft Sign in\textquoteright\ page. Using a Material-UI template, some configuration of the React code, as well as adjustments to the routing, the ability to sign up, sign in and sign out was added to the web app.
-
- \begin{description}
- \item [Sprint 4]
- \end{description}
- Following user account set up, the intention had been to implement the partner system. However, due to time constraints (discussed further in Chapter 7: Evaluation) this requirement was removed. Instead work focused on finishing the MVP; saving forms from the form creation page to Firestore, and the ability to share forms directly to users via their email addresses.
-
- \begin{description}
- \item [Sprint 5]
- \end{description}
- The final requirements were for a user to create submissions from forms that are shared with them and to view such forms and submissions. Having created a frontend page for completing and submitting a form, and adding it to the routing, the submissions were stored in Firestore in their own collection.
-
- \begin{description}
- \item [Sprint 6]
- \end{description}
- Refinements to the UI were made to improve the user experience, including changes to the columns shown on the form table on the dashboard. Some compiler warnings were also cleared and links between the \textquotedblleft sign in\textquotedblright\ and \textquotedblleft sign up\textquotedblright\ pages were created.
\ No newline at end of file
+ \begin{figure}
+ \center
+ \includegraphics[height=100mm, width=145mm]{../figures/SignIn}
+ \caption{User Interface: Sign In}
+ \label{fig:uiSignIn}
+ \end{figure}
+
+ \begin{description}
+ \item [Sprint 4]
+ \end{description}
+ Following user account set up, the intention had been to implement the partner system. However, due to time constraints (discussed further in chapter 7) this requirement was removed. Instead work focused on finishing the MVP; saving forms from the form creation page to Firestore, and the ability to share forms directly to users via their email addresses (Figure \ref{fig:uiCreateForm}).
+
+ \begin{figure}
+ \center
+ \includegraphics[height=100mm, width=145mm]{../figures/CreateForm}
+ \caption{User Interface: Create Form}
+ \label{fig:uiCreateForm}
+ \end{figure}
+
+ \begin{description}
+ \item [Sprint 5]
+ \end{description}
+ The final requirements were for a user to create submissions from forms that are shared with them and to view such forms and submissions. Having created a frontend page for completing and submitting a form, and having added it to the routing, the submissions were stored in Firestore in their own collection (Figure \ref{fig:uiPartnerSubmissions}).
+
+ \begin{figure}
+ \center
+ \includegraphics[height=100mm, width=145mm]{../figures/PartnerSubmissions}
+ \caption{User Interface: PartnerSubmissions}
+ \label{fig:uiPartnerSubmissions}
+ \end{figure}
+
+ \begin{description}
+ \item [Sprint 6]
+ \end{description}
+ Refinements to the UI were made to improve the user experience, including changes to the columns shown on the form table on the dashboard (Figure \ref{fig:uiDashboardFinal}). Some compiler warnings were also cleared and links between the \textquotedblleft sign in\textquotedblright\ and \textquotedblleft sign up\textquotedblright\ pages were created.
+
+ \begin{figure}
+ \center
+ \includegraphics[height=100mm, width=145mm]{../figures/Dashboard}
+ \caption{User Interface: Dashboard (Final version)}
+ \label{fig:uiDashboardFinal}
+ \end{figure}
\ No newline at end of file
diff --git a/report/6_TestingAndSoftwareValidation.tex b/report/6_TestingAndSoftwareValidation.tex
index 08ab82beca7afde8e9996d689ae585d287d98982..156014b2e2c6f457a9acf26683f752331067ba23 100644
--- a/report/6_TestingAndSoftwareValidation.tex
+++ b/report/6_TestingAndSoftwareValidation.tex
@@ -6,12 +6,14 @@
Verification and validation are essential parts of any software project. Consequently, many different application testing methods were employed to confirm that the application was fully functional and robust including from manual and automated to user and requirements testing.
\section{Verification}
- Verification tests were carried out to ensure that all project functionality was implemented to meet the requirements of the target users.
+ Verification tests were carried out to ensure that all project functionality was implemented to meet the requirements of the target users (Table \ref{table:requirementsTesting}).
\subsection{Requirements testing}
\begin{table}[H]
\centering
+ \caption{Requirements testing}
+ \label{table:requirementsTesting}
\begin{tabular}{|c|c|c|c|}
\hline
Requirement & Expectation & Outcome & Result\\
@@ -38,7 +40,6 @@
\makecell{Add Partner} & \makecell{To search and add another\\user as a partner} & \makecell{Requirement dropped due\\to time constraints as it\\was not part of the MVP.} & \cellcolor{red}\texttimes\\
\hline
\end{tabular}
- \caption{Requirements testing}
\end{table}
\section{Validation}
@@ -71,19 +72,28 @@
The process for integrating the Robot Framework test suite into the project was relatively simple. After the installation of Robot Framework and Selenium using the python package manager \textquoteleft pip\textquoteright, all that was left was to install a browser driver (in this case, chromedriver), and add it to the path. This allows Selenium to initialise an instance of Google Chrome, which is directed to the application's address by the test suite. Once the page has loaded, the test cases begin.
\subsubsection{Testing Writing}
- A series of test cases were written to perform tasks within the application. Collectively the test cases cover all the application's features, from signing in and out to sharing a form. (See appendix.) Robot Framework produces an HTML file with the all the logs from each test nested, making it very easy to see where a test fails which is useful for debugging. Below is an example log file of a test run with some failed tests.\\
+ A series of test cases were written to perform tasks within the application. Collectively the test cases cover all the application's features, from signing in and out to sharing a form. (TODO See appendix.) Robot Framework produces an HTML file with the all the logs from each test, making it very easy to see where a test fails which is useful for debugging. Below is an example log file of a test run with some failed tests (Figure \ref{fig:rfFail}).\\
\begin{figure}[H]
\center
\includegraphics[height=100mm, width=145mm]{../figures/RobotTestFails}
\caption{Robot Framework Testing: Example log with failed tests}
+ \label{fig:rfFail}
\end{figure}
+ The logs are nested the test suite hierarchy allowing testers to pinpoint where each test is failing without the need for inserting custom logging, though that is still an option and can be very helpful when testing for the value of a particular variable rather than the presence of an element.
+
\subsubsection{Results}
- The test cases all eventually passed, as shown in Figure 6.2 below, with a total run time of 1 minute and 23 seconds, highlighting the benefits of automating testing. These tests cases can now be used for regression testing when the application is extended to ensure that there is no loss of functionality when new features are added.\\
+ The test cases all eventually passed, as shown below, with a total run time of 1 minute and 23 seconds, highlighting the benefits of automating testing (Figure \ref{fig:rfPass}). These tests cases can now be used for regression testing when the application is extended in the future to ensure that there is no loss of functionality when new features are added.\\
\begin{figure}[H]
\center
\includegraphics[height=100mm, width=145mm]{../figures/RobotTestResults}
\caption{Robot Framework Testing: Final Results}
- \end{figure}
\ No newline at end of file
+ \label{fig:rfPass}
+ \end{figure}
+
+
+
+ \subsubsection{Discussion}
+ TODO
\ No newline at end of file
diff --git a/report/7_Evaluation.tex b/report/7_Evaluation.tex
index 1cfcdefe8ceb5aa9694f25ac0c814d6f9f09b6a6..9558fd5c5565f7423a4909ce1fe8979a704f866b 100644
--- a/report/7_Evaluation.tex
+++ b/report/7_Evaluation.tex
@@ -12,7 +12,7 @@ This chapter appraises the quality of the project by critical and comparative ev
\section{Comparative Evaluation}
- This project has been compared to the competitor applications described in chapter 2, Formstack and Device Magic. The metrics for this evaluation are:
+ This project has been compared to the competitor applications introduced in chapter 2, Formstack and Device Magic (Table \ref{table:comparativeEvaluation}). The metrics for this evaluation are:
\begin{itemize}
\item Speed and ease of form creation
@@ -24,6 +24,8 @@ This chapter appraises the quality of the project by critical and comparative ev
\begin{table}[H]
\centering
+ \caption{Comparative evaluation against competitor applications}
+ \label{table:comparativeEvaluation}
\begin{tabular}{|c|c|c|c|}
\hline
Metric & \cellcolor{Cyan}Compforge & \cellcolor{SeaGreen}Formstack & \cellcolor{SkyBlue}Device Magic\\
@@ -38,28 +40,29 @@ This chapter appraises the quality of the project by critical and comparative ev
\makecell{How well are the form templates and\\submissions formatted?} & \cellcolor{Cyan}3 & \cellcolor{SeaGreen}5 & \cellcolor{SkyBlue}5\\
\hline
\end{tabular}
- \caption{Comparative evaluation against competitor applications}
\end{table}
It's clear from this evaluation that CompForge has succeeded in surpassing the two competitor applicationss in most areas, but requires improvements to its formatting when viewing the form templates and submissions.
\section{Project Management}
- Some of the first parts of the project progressed ahead of schedule, such as the creation of the initial Gantt chart. Until the deadline for the progress report in December, the project was continuing to progress on time. Understandably, the implementation, testing and final report write up were severely impacted by the university closure from the 23rd March onwards, due to the spread of COVID-19. This, coupled with delays during the implementation caused by an underestimation of the learning curve of the technologies that were used, caused a knock on effect, resulting in much of the remainder of the project being completed behind schedule. This risk event was not part of the initial analysis so a new contingency was formulated to mitigate the risk of not completing the project by the deadline. It was decided that some non-essential features would be elimated from the project, and consequently the \textquoteleft Edit Form\textquoteright\ and \textquoteleft Add Partner\textquoteright\ features were removed. This was possible due to the use of Agile in the project management.
+ Some of the first parts of the project progressed ahead of schedule, such as the creation of the initial Gantt chart (TODO appendix x.x). Until the deadline for the progress report in December, the project was continuing to progress on time. Understandably, the implementation, testing and final report write up were severely impacted by the university closure from the 23rd March onwards, due to the spread of COVID-19. This, coupled with delays during the implementation caused by an underestimation of the learning curve of the technologies that were used, caused a knock on effect, resulting in much of the remainder of the project being completed behind schedule. This risk event was not part of the initial analysis so a new contingency was formulated to mitigate the risk of not completing the project by the deadline. It was decided that some non-essential features would be elimated from the project, and consequently the \textquoteleft Edit Form\textquoteright\ and \textquoteleft Add Partner\textquoteright\ features were removed. This was possible due to the use of Agile in the project management.
\subsection{Task Breakdown}
- The Agile methodology necessitates the breakdown of functional requirements into manageable tasks that can be completed during the course of a single sprint. It was decided sprints would last for four weeks each and the requirements were broken down accordingly. Task management was done using GitLab's issues boards. Each task was added to a board and assigned a milestone. Each milestone represented a component of the project, e.g. the MVP or report. Gitlab utilises the boards to track progress for each milestone, shown in the figure below:
+ The Agile methodology necessitates the breakdown of functional requirements into manageable tasks that can be completed during the course of a single sprint. It was decided sprints would last for four weeks each and the requirements were broken down accordingly. Task management was done using GitLab's issues boards. Each task was added to a board and assigned a milestone. Each milestone represented a component of the project, e.g. the MVP or report. Gitlab utilises the boards to track progress for each milestone, shown below (Figures \ref{fig:taskList} and \ref{fig:milestoneProgress}):
\begin{figure}[H]
\center
\includegraphics[height=100mm, width=145mm]{../figures/TasksList}
\caption{GitLab Boards Task List}
+ \label{fig:taskList}
\end{figure}
\begin{figure}[H]
\center
\includegraphics[height=100mm, width=145mm]{../figures/MilestoneProgress}
\caption{GitLab Boards Milestone Progress}
+ \label{fig:milestoneProgress}
\end{figure}
\subsection{Reflection}
@@ -67,10 +70,12 @@ This chapter appraises the quality of the project by critical and comparative ev
\subsection{Gantt Chart}
- The initial Gantt chart is represented by the cells in blue, with the aforementioned delays to the project represented in orange. Major components are represented in a darker shade of each colour, with each subcomponent represented by respective lighter shades. For readability, it has been split over two pages.
+ The initial Gantt chart is represented by the cells in blue, with the aforementioned delays to the project represented in orange. Major components are represented in a darker shade of each colour, with each subcomponent represented by respective lighter shades. For readability, it has been split over two pages (Tables \ref{table:ganttChart} and \ref{table:ganttChartCont}).
\begin{sidewaystable}[h]
\centering
+ \caption{Gantt Chart}
+ \label{table:ganttChart}
\begin{tabular}{|c|c|c|c|c|c|c|c|c|c|}
\hline
Component & Subcomponent & October & November & December & January & February & March & April & May\\
@@ -126,13 +131,14 @@ This chapter appraises the quality of the project by critical and comparative ev
& View submissions & & & & & \cellcolor{Cyan} & \cellcolor{Apricot} & & \\
\hline
\end{tabular}
- \caption{Gantt Chart}
\end{sidewaystable}
\pagebreak
\begin{sidewaystable}[h]
\centering
+ \caption{Gantt Chart cont.}
+ \label{table:ganttChartCont}
\begin{tabular}{|c|c|c|c|c|c|c|c|c|c|}
\hline
Component & Subcomponent & October & November & December & January & February & March & April & May\\
@@ -176,5 +182,4 @@ This chapter appraises the quality of the project by critical and comparative ev
- & \st{Viva} & - & - & - & - & - & - & \cellcolor{Cyan} - & - \\
\hline
\end{tabular}
- \caption{Gantt Chart cont.}
\end{sidewaystable}
\ No newline at end of file
diff --git a/report/8_Conclusions.tex b/report/8_Conclusions.tex
index 2b8d5a0711ef719fb58579de4a61c7621cd1bec1..f83603251d8d080aba1c612750ad0db1e2de1984 100644
--- a/report/8_Conclusions.tex
+++ b/report/8_Conclusions.tex
@@ -14,22 +14,22 @@ This project aimed to enable SMEs to create and customise their own compliance f
\begin{description}
\item [Edit Forms]
\end{description}
- The ability to edit forms that have already been created would be a useful tool in case a mistake is found, or an update is required. This is to be expected in the continuously growing field of cyber security, as doubtless many of the standards that are active today will change with time as technology continues to move forward along with the threats.
+ The ability to edit forms that have already been created would be a useful tool in case a mistake is found, or an update is required. This is to be expected in the continuously growing field of cyber security, as doubtless many of the standards that are active today will change with time as technology continues to move forward along with the threats.
\begin{description}
\item [Share Forms]
\end{description}
- In the same vein, it would be useful to add the ability to share a form with new partners after it has been created. Organisations change and grow, and it could be necessary to share a form with additional organisations.
+ In the same vein, it would be useful to add the ability to share a form with new partners after it has been created. Organisations change and grow, and it could be necessary to share a form with additional organisations.
\begin{description}
\item [Add Partners]
\end{description}
- To save time, another useful feature would be the ability to add partners in a similar way to adding a friend on a social media platform. There would be no need to search for email addresses every time they would be needed when sharing a new form with an existing partner.
+ To save time, another useful feature would be the ability to add partners in a similar way to adding a friend on a social media platform. There would be no need to search for email addresses every time they would be needed when sharing a new form with an existing partner.
\begin{description}
\item [Ability to Search/Sort Forms]
\end{description}
- Finally, the number of forms that can be created and shared is technically infinite so a search bar and sorting filter would be useful additions to the application.
+ Finally, the number of forms that can be created and shared is technically infinite so a search bar and sorting filter would be useful additions to the application.
\section{Future Work}
@@ -38,19 +38,19 @@ This project aimed to enable SMEs to create and customise their own compliance f
\begin{description}
\item [Export Form Templates]
\end{description}
- Specifically, a feature that allows a user to export form templates and specific submissions from partners into a particular format. Users may wish to print another user's submission to their form or share a form template with another user.
+ Specifically, a feature that allows a user to export form templates and specific submissions from partners into a particular format. Users may wish to print another user's submission to their form or share a form template with another user.
\begin{description}
\item [Import Form Templates]
\end{description}
- Conversely, the ability to import existing form templates would allow users to share popular standards such as; ISO/IEC 27001, Cloud Controls Matrix, the Cyber Essentials Scheme, or its progeny, IASME. The addition of this feature would further enhance the speed at which forms are produced.
+ Conversely, the ability to import existing form templates would allow users to share popular standards such as; ISO/IEC 27001, Cloud Controls Matrix, the Cyber Essentials Scheme, or its progeny, IASME. The addition of this feature would further enhance the speed at which forms are produced.
\begin{description}
\item [Mobile Applications]
\end{description}
- As described in Chapter 8, multiple applications can be added to a Firebase project and share the same data. This would allow easy integration of a mobile application on platforms such as iOS or Android.
+ As described in Chapter 5, multiple applications can be added to a Firebase project and share the same data. This would allow easy integration of a mobile application on platforms such as iOS or Android.
\begin{description}
\item [Notifications]
\end{description}
- Finally, the use of email notifications to alert users when a form has been shared with them, or when a partner has made a submission would be convenient, as it is unlikely a user will have the application open at all times. Should the mobile application extension also be implemented this would allow for equivalent push notifications to a user's mobile device.
\ No newline at end of file
+ Finally, the use of email notifications to alert users when a form has been shared with them, or when a partner has made a submission would be convenient, as it is unlikely a user will have the application open at all times. Should the mobile application extension also be implemented this would allow for equivalent push notifications to a user's mobile device.
\ No newline at end of file
diff --git a/report/master.bbl b/report/master.bbl
index f1927e5b901018509be9acf887277d766e1cc6f9..9570e4d0e24ef244eaac83ecd7de2ed0b635dfe4 100644
--- a/report/master.bbl
+++ b/report/master.bbl
@@ -28,6 +28,13 @@ S.~Boyson, ``Cyber supply chain risk management: Revolutionizing the strategic
\url{https://www.sciencedirect.com/science/article/pii/S0166497214000194}
\BIBentrySTDinterwordspacing
+\bibitem{costOfCompliance}
+\BIBentryALTinterwordspacing
+J.~S.~W. Keith E.~Maskus, Tsunehire~Otsuke, ``The cost of compliance with
+ product standards for firms in developing countries: An econometric study,''
+ 2005. [Online]. Available: \url{https://doi.org/10.1596/1813-9450-3590}
+\BIBentrySTDinterwordspacing
+
\bibitem{CyberEssentials}
\BIBentryALTinterwordspacing
GOV.UK, ``Cyber essentials scheme: Overview,'' 2014. [Online]. Available:
@@ -100,6 +107,13 @@ Formstack. [Online]. Available: \url{https://formstack.com/}
D.~Magic. [Online]. Available: \url{https://devicemagic.com/}
\BIBentrySTDinterwordspacing
+\bibitem{investopedia}
+\BIBentryALTinterwordspacing
+M.~Grant, ``Strength, weakness, opportunity, and threat (swot) analysis,''
+ 2020. [Online]. Available:
+ \url{https://www.investopedia.com/terms/s/swot.asp}
+\BIBentrySTDinterwordspacing
+
\bibitem{AgileBusiness}
A.~B. Consortium, ``Dsdm agile project framework handbook.''
@@ -115,6 +129,13 @@ Usability.gov. [Online]. Available:
\url{https://usability.gov/how-to-and-tools/methods/personas.html}
\BIBentrySTDinterwordspacing
+\bibitem{uxplanet}
+\BIBentryALTinterwordspacing
+N.~Baskanderi, ``Ux glossary: Task flows, user flows, flowcharts and some
+ new-ish stuff,'' 2017. [Online]. Available:
+ \url{https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d}
+\BIBentrySTDinterwordspacing
+
\bibitem{React}
\BIBentryALTinterwordspacing
Facebook. [Online]. Available: \url{https://reactjs.org/}
diff --git a/report/master.bib b/report/master.bib
index 0ae2b2a65310b9cc2eb7a9c2f689a76f9e3f7357..ed55373f5822d0de4a5f979e918f610a8a526bad 100644
--- a/report/master.bib
+++ b/report/master.bib
@@ -106,9 +106,9 @@
url = {https://usability.gov/how-to-and-tools/methods/personas.html}
}
-@misc{SWOT,
+@misc{investopedia,
author = {Michael Grant},
- title = {Strength, Weakness, Opportunity, and Threat (SWOT) Analysis}
+ title = {Strength, Weakness, Opportunity, and Threat (SWOT) Analysis},
year = {2020},
url = {https://www.investopedia.com/terms/s/swot.asp}
}
@@ -124,4 +124,19 @@
title = {Contingency Planning as a Necessity},
publisher = {Project Management Institute},
url = {https://www.pmi.org/learning/library/contingency-planning-necessity-risk-assessment-8898}
-}
\ No newline at end of file
+}
+
+@misc{uxplanet,
+ author = {Naema Baskanderi},
+ title = {UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff},
+ publisher = {UX Planet},
+ year = {2017},
+ url = {https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d}
+}
+
+@misc{costOfCompliance,
+ author = {Keith E. Maskus, Tsunehire Otsuke, John S. Wilson},
+ title = {The Cost Of Compliance With Product Standards For Firms In Developing Countries: An Econometric Study},
+ publisher = {Policy Research Working Papers},
+ year = {2005},
+ url = {https://doi.org/10.1596/1813-9450-3590},
\ No newline at end of file
diff --git a/report/master.pdf b/report/master.pdf
index 03705c30445ad05bddd2c9a6957637d67c62d1ab..65f73f486893eae374ca5c320d3b1ee639a19016 100644
Binary files a/report/master.pdf and b/report/master.pdf differ
diff --git a/report/src/ecsgdp.cls b/report/src/ecsgdp.cls
index d39bff2cb6b522d577fd74c48ae5ec151cfff818..4e3a4e98ac34dd051312e8225e0bf560af1f851a 100644
--- a/report/src/ecsgdp.cls
+++ b/report/src/ecsgdp.cls
@@ -109,6 +109,7 @@
\usepackage{tikz-uml}
\usepackage[figuresright]{rotating}
\usepackage{soul}
+\usepackage{wasysym}
\lstset{captionpos=b,
frame=tb,
basicstyle=\scriptsize\ttfamily,