Department of Computer Science BSc (Hons) Computer Science Academic Year 20 20 - 20 2 1 Solution of online collaboration management – Online Meeting Manager Dexter Freeman 1924445 A report submitted in partial fulfilment of the requirements for the degree of Bachelor of Science Brunel University London Department of Computer Science Uxbridge Middlesex UB8 3PH United Kingdom T: +44 1895 203397 F: +44 (0) 1895 251686 1924445 – Final Year Project Dissertation i Abstract In this dissertation, I will document the creation of my solution to the problem: There is a gap in technology for organisation users’ online meetings, which is becoming an increasingly widespread problem as increased companies move to remote work. The dissertation will contain my an alysis of the problem, the methodology on how I measure whether I solve the problem, and analysis of my solution, the design of my solution, the implementation, the testing of my solution and finally , a conclusion on whether my solution was successful & wh at I’ve learnt from this experience Acknowledgements Thank you to Tim Ruscica: https://www.linkedin.com/in/tim - ruscica - 82631b179/ who made a tutorial on the framework I used, which provided valuable knowledge to implement my application and gave me plenty of inspiration ( Tech with Tim , Ruscica , Tim ) Thank you to Jie Jenn , who created a tutorial on using the google calendar AP I , which helped me implement it within my project. https://www.youtube.com/watch?v=1JkKtGFnua8&list=PL3JVwFmb_BnTO_sppfTh3VkPhfD WRY5on Total Words: 10 5 10 Total Pages: 60 I certify that the work presented in the dissertation is my own unless referenced. Signat ure : Dexter Freeman Date : 1 st April 2022 1924445 – Final Year Project Dissertation 2 Table of Contents Contents Abstract ................................ ................................ ................................ ................................ ................................ ............. i Acknowledgements ................................ ................................ ................................ ................................ ...................... i Table of Contents ................................ ................................ ................................ ................................ ......................... 2 1 Introduction ................................ ................................ ................................ ................................ ......................... 3 1.1 Problem ................................ ................................ ................................ ................................ ........................ 3 1.2 Research Ai ms and Objectives ................................ ................................ ................................ ............ 3 1.3 Research Questions ................................ ................................ ................................ ................................ 4 1.4 Dissertation Outline ................................ ................................ ................................ ................................ 4 2 Background ................................ ................................ ................................ ................................ ........................... 5 2.1 Background research ................................ ................................ ................................ .............................. 5 2.2 Existing solutions ................................ ................................ ................................ ................................ ..... 7 2.3 Solution ................................ ................................ ................................ ................................ ......................... 8 3 Methodology ................................ ................................ ................................ ................................ ......................... 8 3.1 Software Development Life Cycle ................................ ................................ ................................ ...... 8 3.2 Time management ................................ ................................ ................................ ................................ 10 3.3 Research data methodology ................................ ................................ ................................ .............. 11 4 Design/Analysis ................................ ................................ ................................ ................................ ............... 13 4.1 Proto typing ................................ ................................ ................................ ................................ .............. 15 4.2 UI Design ................................ ................................ ................................ ................................ ................... 17 4.3 Results of design ................................ ................................ ................................ ................................ .... 19 4.4 Technologies/Tools utilised ................................ ................................ ................................ ............. 23 5 Implementation ................................ ................................ ................................ ................................ ............... 26 5.1 Commonly used code ................................ ................................ ................................ ........................... 26 5.2 Initialising & home page ................................ ................................ ................................ ..................... 30 5.3 Creating a meeting ................................ ................................ ................................ ................................ 33 5.4 Joining a meeting ................................ ................................ ................................ ................................ ... 37 5.5 U pdating meeting ................................ ................................ ................................ ................................ .. 43 5.6 Deleting a meeting ................................ ................................ ................................ ................................ 45 5.7 Viewing the meetings ................................ ................................ ................................ ........................... 46 5.8 Statistics ................................ ................................ ................................ ................................ .................... 47 5.9 Reminder of meetings ................................ ................................ ................................ ......................... 48 6 Testing and Evaluation ................................ ................................ ................................ ................................ 48 6.1 Application testing ................................ ................................ ................................ ................................ 48 1924445 – Final Year Project Dissertation 3 6.2 Screenshots from testing ................................ ................................ ................................ .................... 51 6.3 Error fixes ................................ ................................ ................................ ................................ ................. 52 6.4 User te sting ................................ ................................ ................................ ................................ .............. 53 6.5 Evaluation of user testing ................................ ................................ ................................ .................. 54 7 Conclusions ................................ ................................ ................................ ................................ ........................ 55 7.1 Is the solution usable? ................................ ................................ ................................ ......................... 55 7.2 Does the solution solve the problem? ................................ ................................ ........................... 56 7.3 Future Work ................................ ................................ ................................ ................................ ............ 56 7.4 Reflection on Project ................................ ................................ ................................ ............................ 57 8 References ................................ ................................ ................................ ................................ .......................... 57 1 Introduction 1.1 Problem Ever since the COVID - 19 pandemic, online collaboration/meetings have become more commonplace within the workforce, interviews, and people’s personal lives Numerous institutions have conscientiously deferred in - person interviews , discussions, and general c ollaboration f or virtual formats These meetings can quickly pile up for remote workers who extensively use these technologies to keep in touch with their team/clients and become difficult to organise and manage. In my background research, bad organisati on is detrimental to a worker’s quality of work, life, and general well - being Remote work also comes with other issues, such as people having too many distractions at home, an increased workload/hours compared to those not working remotely, and a lack of tools/utility to manage their work. My project will focus on organising and reminding users of their online meetings to lessen the burden caused by remote work and reduce the adverse effects. 1.2 Research Aims and Objectives This project aims to create a solution to make the organisation of online meetings for my target audience - remote workers /freelancers – easier to manage. Online meetings can be hard to manage when many occur in a short amount of time and can also be easy to miss 1924445 – Final Year Project Dissertation 4 since they typically happen at home. As people can get distracted/unfocused and miss these online meetings unintentionally. To measure whether I have successfully met these aims and objectives, I will need to test the solution in two different manners. The first is whether the solution is liked by the users in terms of usability – in other words, can they use the solution correctly and would they willingly use it again. The second is whether the solution solves the user’s problem and to what extent. I can build a piece of software that works perfectly, but if it doesn’t help my target audience , the solution is futile. To do this, I will use user t esting to gather primary data on whether the users believe my solution solves the problem I have discussed. I will then analyse my findings and discuss whether my project is successful in section 7. 1.3 Research Question s Is the solution I produce effective ly solving the problem of people’s organisation of online collaboration? Is the solution usable and provides benefit to the user? What did I learn from this experience? 1.4 Dissertation Outline 1924445 – Final Year Project Dissertation 5 2 Background 2.1 B ackground research During the pandemic, online meetings were a relatively new form of communication and were picked up by businesses as companies were forced to work remotely, creating a wave of new remote workers. Recent evidence suggests that “the advent of the COVID - 19 pandemic has forced millions of workers to suddenly shift their activity out of their offices and into their homes: while 5 - 15% of Americans worked from home before the pandemic, 50% of the America ns who were employed pre - COVID reported working from home in April/2020” (Teodorovicz et al., 2021 ) An article by Heather V MacArthur highlights the struggles these people faced: “ Time management is one of the most common issues in the way of productivit y under normal circumstances. But we are operating in strange times. Working from home automatically comes with its own additional time management challenges under regular circumstances. But we are all dealing with time management on top of the undeniably chaotic events that are unfolding due to the COVID - 19 pandemic. ” (MacArthur, 2020 ) Not only does the setting of remote work make it harder for some people, but it also influences their workload. A large and growing body of literature has recently investig ated the effects of online collaboration and the pandemic on people’s workload. One such study was conducted on young teachers who had to give lessons online. One quoted : “I am saying that the time resource to have someone at home on their own to solve thi s thing, and now that it takes more time than someone to tell you about methods that are effective and provide more examples. It takes a certain amount of time to learn on your own. (T2)” (Rannastu - Avalos and Siiman, 2020) . Indicating that remote work inhe rently gives people more work to organise , which further escalates time management for the employees. This has produced a new demand for technology to assist people working remotely/working from home ; as there is limited technology to help people organise online meetings, this is discussed in Teodorvicz’s study as follows : “We argue that there are opportunities for technological innovation both in supporting workers as they structure their activities, and as they try to complete their activities efficiently. Furthermore, technology can help workers strive to find work - life balance. ” (Teodorovicz et al., 2021 ) 1924445 – Final Year Project Dissertation 6 As stated by the Chartered Institute of Personnel and Development , two of the seven strategies for effective remote working are “Ensure effective co - ordination of tasks and task - related communication” & “Build in time, include face - to - face time, for team cohesion and organisational belonging” (From the “nature” of the work to the design of work, n.d. ) which my application can help with. As mentioned previously, the problem I’m trying to solve is that there is a lack of tools for organising and managing your online meetings – as bad organisation is commonly known to affect the individua l negatively A large and growing body of literature indicated this, such as Saleh H amad A l - M arri ’s study : ‘The study showed that there was indeed a linkage between time management behaviours and organisational performance. The study found that aspects of job outcomes, examined in respect of work balancing, workload, and awareness building, were positively and significantly impacted by time management practices. ’ (Hamad Al - Marri, 2019) They show that poor time management/organisation performance links to poor mental health, work performance, and an organisation’s performance. Brad Aeon even further backs this up in his meta - analysis: “Results show that time management is moderately related to job performance, academic achievement, and wellbeing. Time mana gement also shows a moderate, negative relationship with distress.” (Aeon, Faber and Panaccio, 2021) A statement even further backs this up from Eric Garton , and Michael Mankins of the Harvard Business Review states that for companies over the pandemic: ‘Some have remained remarkably productive during the Covid - era, capitalizing on the latest technology to collaborate effectively and efficiently. Most, however, are less productiv e now than they were 12 months ago. The key difference between the best and the rest is how successful they were at managing the scarce time, talent, and energy of their workforces before Covid - 19.’ (Garton and Mankins, 2020) This issue will only become more common as more businesses take on remote work for their employees , especially after Covid - 19 , as discussed previously. This exponential growth is observed in graph 1. 1 – where Microsoft teams ha d 145 activate users in April 2021 , a massive increase f rom 2019 when there were only 13 million in July and 20 million in November. It’s not only Microsoft teams that have seen this increase ; zoom had “300 million daily active” participants in November 2020 , and “ Cisco Webex had 25 billion meeting minutes in a single month ” (www.modalitysystems.com, n.d.) 1924445 – Final Year Project Dissertation 7 Figure 1: Active users in Microsoft teams (www.modalitysystems.com, n.d.) 2.2 Existing solutions The current existing solutions organisat ional apps such as Focus, Trello and calendars apps. They allow their users to organise their events and add notes, such as descriptions, group them into groups and other functionalities. For example, Trello uses “notes” as shown in the screenshot below. Figu re 2: Note view in Trello It has other features to view the notes differently, such as a timeline, calendar, and map. However , these are locked behind a paywall The Microsoft calendar app is the closest alternative to my solution as it allow s you to crea te events within its calendar and is reminded of this event ; however , these events can’t be automatically generated from zoom meetings or linked to them. T he user would need to input the zoom meeting into this event manually As shown below: 1924445 – Final Year Project Dissertation 8 Figure 3: View of an event within Microsoft Calendar The shortcomings of the current solutions are that they aren’t linked to online meetings. Therefore, my solution will fill this gap by allowing users to schedule their online meetings easily , change them, delete them, and do general management with them. 2.3 Solution My solution’s primary difference from the existing solutions is the direct implementation of online meetings into the organisational software. As well as automating the creating of ev ents within the event calendar and relating them to scheduled zoom meetings. The application will additionally provide statistics to the user explicitly catered from these online meetings and automate manual work the user would need to do otherwise in the calendar. 3 Methodology 3.1 Software Development Life Cycle For my project , I used the waterfall method fo r my SDLC . As it’s the best suited SDLC for my project , it allows me to set clear objectives with stable requirements and is very easy to manage as someone tackling a solo project. It gives me a clear structure to follow, with simple goals which closely resemble the form of my dissertation . A drawback is it al so excludes the users from the design and implementation steps , and it delays the testing until the solution is finished. The waterfall methodology is split into five stages: requirements , design, implementation, verification , and maintenance 1924445 – Final Year Project Dissertation 9 Figure 4: Waterfall method (Hughey, 2009) Requirements/Analysis: This is the stage where I set tasks that determine the needs & conditions to meet the completion of my project while considering the interests of my target audience. These were identified earlier in s ection 1.1 The primary purpose is to provide a checklist of requirements to track my implementation’s progress and form a basis for approaching my design stage. Design: In the design stage , I design ed a technical solution to the problems set out by the product requirements, including scenarios, layouts, and data models. These are the entity - relationship diagrams, flowcharts, prototypes, and UI designs are created in section 4. It allows me to go into t he implementation stage with the required knowledge, skills, and preparation to build the solution successfully Implementation: This is the construction of the solution, putting the designs and techniques from the design stage into practice and creating a web application . This is through coding, debugging, verification, unit testing and integration testing. This stage is completed once all the application’s functional requirements are met. The results of the implementation are in section 5 of the disserta tion. Verification: This is the testing stage of the software development process. Ensuring that the solution align s with the target audience’s interests , solves the problem, and works as intended I used user testing for gathering data and software testing , where I tested specific methods/features of the program to make sure they worked as intended. These tests are done manually, and the results can be viewed in section 6. 1924445 – Final Year Project Dissertation 10 Maintenance: Maintenance is the constant updating and bug fixing o f the software once deployed. This will be explored in section 7 , as the point of the dissertation is to create a solution , not necessarily deploy it. 3.2 Time management Below is the Gantt chart I produced to organise my time working on this solution from the start date of 1st January and the end date of 31 st March With the 1 st of April to hand in my dissertation. As shown in the Gantt chart , I planned three weeks into analysing the requirements for the solution . With a week to establish a list of requirements I need to complete to create a successful solution – as defined in section 4. With two weeks of background research and a week in the project approa ch (this being how I was going to create my solution). For the design stage of my dissertation, I planned a total of 4 weeks for this stage. I would work on prototypes for the entire four weeks , build my front - end designs, and apply some usability principles . I wanted to create a prototype of the app , so I knew my limitations on front - end development before I started to design them. This prevented me from overestimating my ability and grasp my capabilities before planning Another four weeks are then organised for the implementation of the w eb application In comparison, this might seem like an underestimation because implementation is considered the most time - consuming task in the dissertation. However, I considered that the prototypes I developed would include a lot of the code I needed to create the software. Meaning a lot of the heavy work was already done beforehand. Lastly , I put my application testing and user testing in the two weeks before the deadline, as it lined up with my ethics approval time , and out of all the steps , I predicted this would be the simplest to do as I’m simply collecting data /conducting tests and then drawing conclusions from th em. The methodology of my data collection is explained in se ction 3.3. 1924445 – Final Year Project Dissertation 11 Figure 4.1: Gantt chart 3.3 Research data methodology I utilised a System Usability Scale form to know whether the users could use the solution I created This allows me to capture essential data on the users' usability, simplicity, and thoughts while using my solution. Its format is as follows: Participant ID: Project: Online Meeting Manager Date: Instructions: For each of the following statements, mark one box that best describes your reactions to the website today. Strongly Disagree Disagree Neutral Disagree Agree Strongly Agree 1. I think that I would like to use this website frequently ☐ ☐ ☐ ☐ ☐ 2. I found this website unnecessarily complex ☐ ☐ ☐ ☐ ☐ 3. I thought this website was easy to use ☐ ☐ ☐ ☐ ☐ 1924445 – Final Year Project Dissertation 12 4. I think I would need assistance to use this website ☐ ☐ ☐ ☐ ☐ 5. I found the various functions of the website well integrated ☐ ☐ ☐ ☐ ☐ 6. I thought there was too much inconsistency on the website ☐ ☐ ☐ ☐ ☐ 7. I could imagine most people would learn how to use this website quickly. ☐ ☐ ☐ ☐ ☐ 8. I feel very confident using this website ☐ ☐ ☐ ☐ ☐ 9. I needed to learn a lot of things before I could use this website ☐ ☐ ☐ ☐ ☐ 10. I found this website cumbersome/awkward to use ☐ ☐ ☐ ☐ ☐ I have also made a simple questionnaire on top of the SUS , which will gather the participant’s general thoughts on the application , which is as follows: Question: Answer: On a scale of 1 - 5 , did Online Meeting Manager provide you with an easier means of organising your meetings? 1 being yes completely and 10 being not at all. Justify the answer you’ve given above. What did you like about using Online Meeting Manager? Would you use Online Meeting Manager on a regular basis? Is there any feature/process that is not in the application that you would add? Did you encounte r any crashes/bugs or anything unexpected while using Online Meeting Manager? Was the application slow/unresponsive at any time? What would be your suggestion to improve Online Meeting Manager? If you have any thoughts that you couldn’t say in the previous questions, please leave them here. 1924445 – Final Year Project Dissertation 13 These questions cover the users’ thoughts on the application's utility and, most impor tantly, whether it’s a valuable resource to them. They also cover the robustness of the solution – through the question of whether they encountered bugs , which I can use to justify if my implementation was effective or not – alongside my application testin g. I will be testing with my target audience, remote workers/people who use online meetings regularly and people not from my target audience. To avoid bias. Both forms will be anonymous for the user, so I will not be able to identify specific participants T hey will be collected via Microsoft Forms , as stated in my BREO. The results of the user testing will be shown in section 6 and discussed in section 7. The view of the form can be viewed here: https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAA AAAAAAYAAMmEDFFUMTRYUkU5UjlDS zZJSEFFMFNLVUxGTkZMRy4u 4 Design /Analysis To start , I needed to create functional requirements for the application. I referenced my background research and current solutions to develop these to see what they do and what they lack. Resulting in these req uirements: • The application should use a calendar to show all the online meetings • Users need the ability to create a new meeting, which is both scheduled on a meeting platform and then added to the calendar • Meetings the user creates need to be joined when they occur, and the user must be reminded of them before they occur. • Users can edit the meetings if they make a mistake or want to change them • Users can delete meetings Shown in figure 2 is the flowchart that I created to highlight the methodology of a user interacting with the app. I wanted to define the different routes/ways the user could do this and display how the process is conducted in a simple and effective way so that I could ref erence those interactions during implementation and prototyping It highlights important aspects of the project, like what tasks the user will conduct with the application, the objects that work and their relationships, the actions the users can do and wha t objects these actions use. 1924445 – Final Year Project Dissertation 14 Figure 2 : Flowchart of the software I also created an entity - relationship diagram , as shown in figure 1.6 , to offer more specific information on the relationships between the different components and the values/keys within them. For example, as shown in Figure 2.1 , the id field is the primary key for each entity Creating this was particularly important to achieving a good initial design, as it allowed me to translate the requirements into their objects, with the functions and relations between them. This preparation was beneficial for preparing me to create my models for my prototypes which were later repurposed for my implementation. 1924445 – Final Year Project Dissertation 15 Figure 2.1: Entity relationship diagram 4.1 Prototyping Before I began implementing my project, I created multiple prototypes/scripts to scope out the difficulty, issues, and time needed for my project. These prototypes ranged from making a full - stack app to learning how to route my pages, scripts for creating the meetings and trying out different solutions to the same problem. Figure 2.3 Screenshot of prototype function Figure 2.3 displays code that would create a zoom meeting and then pr int out the response received from the request. Doing this beforehand allowed me to know the input fields that I would need to create a zoom meeting, the fields I wanted to give the user the ability to change, and the knowledge of knowing I needed to make my token for the request within the function. I also created a few prototype methods for the calendar. Such as this function that creates a google calendar called ‘San Francisco Events ’ for the user. As events could be added to an event calendar, no t just a user’s calendar. 1924445 – Final Year Project Dissertation 16 Figure 2.4 Create a calendar prototype snippet My prototypes also included a full - stack application, where I went through setting it up, learning the interactions between front end, backend, and databases. As well as the gene ral knowledge I needed for my final implementation. One prototype was significant for my work as it used a newer version of react - router - dom (version 5.6) , which is a tool I used in my final implementation However, the last version was version 5.2 inste ad of the latest. The reason for downgrading was that the syntax for react - router - dom had changed entirely in the updated version , scrapping the components I was planning on using and replacing them with a different component. When developing this protot ype, I struggled with using the navigation keyword as it would always produce an error. Since it was a new update, I didn’t know how to fix this issue. I decided to move to another prototype, using the older version , which yielded better results than the latter. Figure 2.5 Code of react - router 5.6 1924445 – Final Year Project Dissertation 17 Figure 2.6 Figure of code fix attempt. 4.2 UI Design Since I am using react for my frontend, I’ve decided to use Material UI ( https://mui.com ) for creating the frontend. Material UI is an open - source front - end framework for react components based on Google’s “Material Design .” Which focuses on bold, minimal, and modern designs. As state d by the I nteraction Design Foundation: “ Material Design is an Android - oriented design language created by Google, supporting onscreen touch experiences via cue - rich features and natural motions that mimic real - world objects. Designers optimize users’ experience wit h 3D effects, realistic lighting and animation features in immersive, platform - consistent GUIs. ” (The Interaction Design Foundation, 2014) MUI provides components to my project that I can easily add to my endpoint views to achieve an interactive and intuitive frontend. It has built - in icons that I took advantage of that are already proven to be recognisable to users – as shown in figure 1.4. The icons also make my project use the usability principle of consistency. Figure 3: Material UI Icons 1924445 – Final Year Project Dissertation 18 Usability Principles: Consistency: Consistency with real - world conventions , as explained “Use commonly understood concepts, terms, and metaphors, follo w real - world conventions (when appropriate), and present information in a natural and logical order.” (Principles for Usable Design | Usability Body of Knowledge, 2012) is applied to material UI’s icons My target audience: freelancers/remote workers woul d typically be people already familiar with technology and the icons associated with specific actions. On top of that , some of the icons also relate to their real - world counterparts, such as the Material UI music , as shown in figure 3 On the other hand, some icons such as the fill icon are more symbolic than resemblance. Simplicity: Simplicity is defined as “to strive to simplify users’ lives. That often requires a delicate balance between our effort to make installation of a product easier a nd subsequent use of that product easier or better.” (Tognazzini, 2014). As my project is about making organising online meetings easier, I want to emphasi se the simplicity of my UI to make sure that the application is as easy to use as possible. I’ll need to avoid cluttering the screen with unnecessary items and keep the design consistent throughout the application. For example, as shown below in the screenshot of an old design, the screen was highly clustered due to the calendar view's multiple prompts a nd the other sidebar buttons . I significantly reduced this effect by removing the calendar view and leaving the page to simply the buttons , as observed in section 4.4 Figure 3.1: Old design of the homepage 1924445 – Final Year Project Dissertation 19 4.3 Results of design In this section , I will be going over each view I made for my application . It’s worth noting that I centred all my components/pages to the centre of the screen to keep the positioning of the items consistent so that the user can easily and quickly read the contents of each page , as it’s not easy to see this effect within the screenshots. Home page of my application: Figure 3.2: Home page design This is the final design iteration of the homepage . I t features five buttons that are named accordingly to the ir purposes. They all reroute the page to the specified page. The app lication name is also there to indicate to the user that they are on the default/home page of the software. As well as the “Meeting” icon material UI pro vides, making use of consistency as mentioned beforehand. Figure 3.3: Join meeting page