Design Document Team: TexProtects Tutorials Project: TexProtects Data Dashboard Date: 05/05/17 Last revised: 05/05/2017 1
1. Table of Contents 1. Table of Contents... 2 2. Revision History... 3 3. Design Status... 4 4. Project Overview... 5 4.1 Description of the Community Partner... 5 4.2 Stakeholders... 5 4.3 Project Objectives... 6 4.4 Outcomes/Deliverables... 6 4.5 Expected Semester Timeline... 7 5. Semester Documentation (Current Semester)... 9 5.1 Team Members... 9 5.2 Status and Location on Overall Project Timeline... 9 5.3 Goals for the Semester... 9 5.4 Semester Timeline... 9 10 5.5 Semester Budget... 10 5.6 Transition Report... 10 5.6.1 Summary of Semester Progress / Comparison of Actual Semester Timeline to Proposed Semester Timeline... 10 5.6.2 Draft Timeline for (Next Semester) and Relationship to Overall Project Timeline 11 6. Current Design... 11 Appendix A: Past Semester Archive... 13 A.1 Spring 2016... 13 A.1.1 Past Team Members... 13 A.1.2 Past Timeline... 13 Appendix B: Overall Project Design... 14 B.1 Project Identification... 15 B.2 Specification Development... 16 B.3 Conceptual Design... 17 B.4 Detailed design... 18 B.5 Delivery... 19 B.6 Service / Maintenance... 20 Last revised: 05/05/2017 2
2. Revision History Date Author Revision 12/15/16 Mai Tran 1 05/05/17 Jacob Lancaster, Mauhib Iqbal, Steven Paisley, Jibin Chirayil 2 Last revised: 05/05/2017 3
3. Design Status Phase 6: Service / Maintenance Status: In Progress Semester: Tutorials will be updated as needed in future semesters to cover additional functionality that may be added. Phase 5: Delivery Status: In Progress Semester: Tutorials were finalized and delivered to TexProtects. Data aggregation will be continued in Fall 2017. Phase 4: Detailed Design Status: Semester: Spring 2017 Phase 3: Conceptual Design Status: Semester: Spring 2017 Phase 2: Specification Development Status: Semester: Spring 2017 Phase 1: Project Identification Status: Semester: Spring 2017 Last revised: 05/05/2017 4
4. Project Overview 4.1 Description of the Community Partner Project Partner: TexProtects Overall Mission: TexProtects goal is to assist lawmakers with the research and tools they need to advocate for legislation to curb child maltreatment and neglect in Texas. TexProtects wants to make Texas a safer environment for all children no matter what situation they are in. The previous team that worked with TexProtects developed a web-based Data Dashboard that collected together all their current child abuse data and placed it in a database. The front end then allowed the employees at TexProtects to generate graphs with several parameters such as region, county, and year using this data. This made it much simpler for them to provide meaningful data to politicians and thus improved the chances of legislation being passed. 4.2 Stakeholders Who will be affected by your project other than your customer? o TexProtects has asked us to develop a series of tutorial videos that will allow employees as well as politicians to understand the usage of the Data Dashboard more easily. Since the Data Dashboard is accessible to any interested party, this should allow for lobbyists, researchers, and public service officials to utilize the data available in the Data Dashboard in an easier and more comprehensive manner. This will ultimately lead to more favorable legislation and policies targeting child abuse, and it will lead to smarter resource allocation of current funds that help abused children. Who has vital interest in the project s success? o TexProtects Advocates o Politicians Last revised: 05/05/2017 5
o Children 4.3 Project Objectives Why are you doing the project (i.e. what is the motivation or need for the project?) o During the prior semester, the previous team finalized the Data Dashboard that was created for TexProtects. The goal of the Dashboard was to give lawmakers access to the research and data they needed to convince the state government to help combat child maltreatment. Unfortunately, the Data Dashboard is not as intuitive to use as one would hope. TexProtects needs tutorial videos to help instruct new employees and lawmakers on how to use the database. Otherwise, the mission of TexProtects is being hampered, and the Data Dashboard is not being utilized to its fullest potential. A secondary goal that was provided to us was to implement a more user-friendly method of adding additional data to the database for the Data Dashboard. This would allow the Dashboard to be more easily updated with current statistics as they are released every year, and it would make the Dashboard an even more powerful tool for TexProtects. How does your project fit within the mission of the project partner and your team? o The primary mission of TexProtects is to further bills that will help to combat child maltreatment as well as keep politicians informed. The Data Dashboard allows them to accomplish this much more efficiently as well as letting the public access the data too. By creating these tutorial videos and working on a data aggregation system, we are furthering their goals and helping our community to become a better place. This entire project will lead to more efficient usage of current and future resources to combat the abuse of children in Texas. 4.4 Outcomes/Deliverables What are going to be the project results? o A series of tutorial videos that will allow the employees at TexProtects, politicians, and the public at large to more easily use the Data Dashboard that was Last revised: 05/05/2017 6
implemented by the previous team in Fall 2016. They will be embedded in the webpage itself, so it is easy for users to access them. o A data aggregation system that allows the team at TexProtects to add new data to the database of the Data Dashboard more easily. This would be implemented in the backend of the website and would not be accessible to the public. When the project is finished, what will be left behind by your team? o We are planning to finish the project this semester, but if that turns out to not be possible, we will be leaving our current research and design in this document. This would include information such as the software we planned to use to accomplish task, and the specific steps we planned on implementing. We will also be leaving behind the information on our project website for the next team to have an idea of where to get started. 4.5 Expected Semester Timeline What is the timeline for completion of the project? o The first goal is to create the series of tutorial videos. We plan to have these finished by the March 23, 2017. o The final goal is to design and implement the data aggregation system. We plan to have this finished by May 5, 2017. What are the major milestones? o Tutorial Videos Create design document and guidelines for videos Research software to create videos Record and edit videos Send videos for approval to the project partner o Data Aggregation Research programming languages and design of backend Research potential sources of data for the Dashboard Last revised: 05/05/2017 7
Assign roles and code different component of system Implement system within the backend of the Dashboard Teach TexProtects how to use the system When is the project intended to be completed? o We intend to complete the project by the end of the spring semester of 2017. Last revised: 05/05/2017 8
5. Semester Documentation (Current Semester) 5.1 Team Members Spring 2017: Jacob Lancaster - Project Leader Mauhib Iqbal - Project Manager Steven Paisley - Project Webmaster Jibin Chirayil - Project Partner Liaison 5.2 Status and Location on Overall Project Timeline The team has finished creating the tutorial videos, and they were sent for approval to the project partner. They were approved and embedded on the Data Dashboard webpage. Our feedback has been great, and TexProtects has already put them to use in training new employees and volunteers. We are currently in the research phase of the data aggregation system. We are on the precipice of entering the planning phase of the system. 5.3 Goals for the Semester A series of tutorial videos teaching new users how to use the Data Dashboard Developing a method of adding data easily to the database of the Dashboard Creating a tutorial on how to use the data aggregation system 5.4 Semester Timeline Last revised: 05/05/2017 9
5.5 Semester Budget Due to the nature of our project a budget was not necessary for it. All tools utilized were free and available for anyone to use. We do not anticipate a budget for any future deliverables either. 5.6 Transition Report 5.6.1 Summary of Semester Progress / Comparison of Actual Semester Timeline to Proposed Semester Timeline What aspects varied the most from the proposed timeline to the actual? The completion of the tutorial videos took about a week longer than we anticipated in our timeline. The biggest difference though was the amount of time it took to research the backend of the Data Dashboard, and the associated programming languages. This was necessary for us to begin the design of a data aggregation system. Unfortunately, due to this change, the team was unable to complete the system and implement it. What practices would you recommend to future teams, what should they avoid? We had weekly meetings amongst our team and bi-weekly meetings with our project partner to go over the project and keep the team on track. This allowed us to make sure every member was aware of their responsibilities and contributing towards the final product. Installing Last revised: 05/05/2017 10
messaging applications on our mobile phones was very helpful. We recommend Slack. We would strongly caution against relying on electronic methods as your main communication method as it can lead to issues and disorganization. A conference call can be useful for making sure everyone is present and hears what the weekly tasks are when an in-person meeting is not possible. 5.6.2 Draft Timeline for (Next Semester) and Relationship to Overall Project Timeline As of now, there is no straightforward way of adding new data to the current database of the Dashboard. Right now, the data, once found, is uploaded to the MongoDB database directly by a specific employee at TexProtects. We would like to develop a better solution for data aggregation. There can be a second internal dashboard for uploading data onto the database. The need for said dashboard arises from the fact that every year more child maltreatment data is available because of extensive research that has been conducted. This dashboard would have to be flexible enough to interpret different forms of data as well. We suggest the starting implementation be designed to deal with CSV (Comma Separated Value) files since they are easy to deal with from a programming point of view, and there are multiple libraries out there for parsing them. The dashboard can be programmed in Node.js since a Node.js server is already configured for hosting the current website. The dashboard will connect to the MongoDB database and add the parsed data to it. The Passport.js library can be used to simplify the authentication process to the dashboard. These languages and applications are free to use and open-source. There are many websites available that can teach them such as Code Academy and Khan Academy. YouTube is also a valuable resource for finding tutorials for specific applications of the software and languages. 6. Current Design The first goal of the team this semester was to create tutorial videos for the Data Dashboard that was built last semester. The Data Dashboard is used to influence lawmakers in TexProtects ongoing mission to combat child abuse. The tutorials will help guide politicians and TexProtects employees in their usage of the website and must be easy for them to follow along. In creating the videos, we used three tools. Microsoft Expression Encoder 4, imovie, and a microphone. Microsoft Expression Encoder 4 was used to record the screen as we demonstrated different functions on the website. The microphone was used to record the audio of the narration describing what actions we were doing and how to accomplish them. imovie was used to Last revised: 05/05/2017 11
combine the audio and video as well as cut unnecessary footage or extend it. These were then embedded into a section of the webpage to allow users to view them whenever necessary. This semester we started out with the Data Dashboard designed by the previous team. It was designed in Node.js and uses MongoDB as its database. The front end is created using the help of a couple of useful JavaScript libraries, including but not limited to, jquery, Highcharts, DataTables, HTML2Canvas, jqmodal, and Underscore.js. These libraries serve different purposes, all of which could be classified in two categories: taking input from the user and outputting the results. Interestingly, we do not need a library to process data because that is accomplished by the Node.js backend without additional help. Underscore.js and jqmodal belong to the first category of tools because they make it easier to get input from the user. Highcharts, DataTables, and HTML2Canvas belong to the second category because they assist with data output both graphically and tabularly. The exact descriptions were highlighted by the previous team as "Highcharts is used for generating graphs, DataTables for table generation, Select2 for the typeahead inputs, Knockout for event binding, Underscore for various utilities, and jquery for general DOM interaction - these libraries give us all the required functionality without excessive code bloat, allowing relatively fast loading of the application". All libraries used are free and open-source. NPM, a packing manager for web applications, is an easy way of gaining access to them. Last revised: 05/05/2017 12
Appendix A: Past Semester Archive A.1 Spring 2016 A.1.1 Past Team Members Spring 2016 o Ben Awad Project Leader o Bao-Tran (Monica) Phan Project Manager o Ira Mascardo Project Webmaster o Hasan Ashqeen Financial Officer o Vraj Mehta Project Partner Liaison Fall 2016 o Joseph Nakonecznyt Project Leader o Pranjal Manchanda Project Manager o Mai Tran Project Webmaster o Afia Tariq Financial Officer o Anuhya Emmandi Project Partner Liaison A.1.2 Past Timeline Spring 2016 o The timeline utilized for Spring 2016 could not be found. Fall 2016 Last revised: 05/05/2017 13
Last revised: 05/05/2017 14
Appendix B: Overall Project Design B.1 Project Identification Phase 1: Project Identification Status: Evidence can be found: Goal is to identify a specific, compelling need to be addressed Conduct needs assessment (if need not already defined) Identify stakeholders (customer, users, person maintaining project, etc.) Understand the Social Context Define basic stakeholder requirements (objectives or goals of projects and constraints) Determine time constraints of the project Need defined by Partner Section 4.2 and Midterm/Final Presentation Section 4.1 and Midterm/Final Presentation Section 4.1 and Midterm/Final Presentation Section 5.4 and Midterm/Final Presentation Summary of Project Identification Phase of Design: We discussed the project with the project partner to clarify the goals, requirements of the project, and its benefits to society. We identified all stakeholders affected by this project accordingly. We also met with a member of the team from the last semester to learn their progress and determine our timeline. Last revised: 05/05/2017 15
B.2 Specification Development Phase 2: Specification Development Status: Evidence can be found: Goal is to understand what is needed by understanding the context, stakeholders, requirements of the project, and why current solutions don t meet the need. We also develop measurable criteria in which design concepts can be evaluated. Understand and describe context (current situation and environment) Discussion with previous team member as well as project partner representative Create stakeholder profiles Create mock-ups and simple prototypes: quick, low-cost, multiple cycles incorporating feedback Develop a task analysis and define how users will interact with project (user scenarios) Identify other solutions to similar needs and identify benchmark products (prior art) Define customer requirements in more detail; get project partner approval Develop specifications document Section 4.2 and Midterm/Final Presentation Team meetings, Meeting Notes in Box, and Midterm Presentation Team meetings and Meeting Notes in Box Team meetings and Written Notes Discussion with project partner representative Meeting Notes in Box and Midterm/Final Establish evaluation criteria Approval from Project Partner Summary of Specification Development Phase of Design: We discussed what needed to be completed amongst the team and the project partner. We also researched similar products and identified any specifications that we want to include in our design. The details can be found in the Box. Last revised: 05/05/2017 16
B.3 Conceptual Design Phase 3: Conceptual Design Status: Evidence can be found: Goal is to expand the design space to include as many solutions as possible. Evaluate different approaches and selecting best one to move forward. Exploring how. Complete functional decomposition Section 6, Midterm Presentation, and Meeting Notes in Box Brainstorm several possible solutions Team meetings Prior Artifacts Research Team meetings Create prototypes of multiple concepts, get feedback from users, refine specifications Evaluate feasibility of potential solutions (proof-of-concept prototypes) Midterm Presentation and Meeting Notes in Box Project Partner Representative approval Choose "best" solution Project Partner approval Summary of Conceptual Design Phase of Design: We showed the project partner representative the prototype we had created, and the team continued from that when we received approval. Last revised: 05/05/2017 17
B.4 Detailed design Phase 4: Detailed Design Status: Evidence can be found: Goal is to design working prototype which meets functional specifications. Bottom-Up Development of component designs Develop Design Specification for components Design/analysis/evaluation of project, sub-modules and/or components (freeze interfaces) Design for Failure Mode Analysis (DFMEA) Prototyping of project, sub-modules and/or components Field test prototype/usability testing In Progress In Progress Midterm/Final Presentation Midterm/Final Presentation Midterm/Final Presentation Midterm/Final Presentation Midterm Presentation Team meeting and Project Partner Representative meeting Summary of Detailed Design Phase of Design: In this phase, we broke the project into small enough tasks that we believed each team member could complete for the project. Design details are discussed during weekly meeting before being assigned to a specific member. Each member is responsible for keeping track of his or her task as approved by the team. In the next meeting, we discuss our work together and provide feedback. We also show preliminary work to our project partner representative to ensure we are on the right track. The data aggregation system still needs to be prototyped and developed. Last revised: 05/05/2017 18
B.5 Delivery Phase 5: Delivery Status: Evidence can be found: Goal is to refine detailed design so as produce a product that is ready to be delivered! Complete deliverable version of project including Bill of Materials Complete usability and reliability testing In Progress In Progress http://texprotects.org/childmaltreatment-data/, Final Presentation, and Project Website http://texprotects.org/childmaltreatment-data/ and Project Partner Approval Complete delivery review Project Partner Approval Project Partner, Advisor, and EPICS Admin Approval Final Presentation and Project Partner Approval Summary of Delivery Phase of Design: In this phase, we finalized our product and submitted it for approval. The team made adjustments as requested, and the tutorials were integrated into the Data Dashboard webpage. The videos have been tested by members and are functioning as expected. The data aggregation system must still be completed by a future team. Last revised: 05/05/2017 19
B.6 Service / Maintenance Phase 6: Service / Maintenance Status: Evidence can be found: Evaluate performance of fielded project Determine what resources are necessary to support and maintain the project In Progress Project Partner Satisfaction In Progress Section 3 Summary of Service/Maintenance Phase of Design: TexProtects seems very satisfied with the tutorial videos, and they have already put them to use in training new employees and volunteers. Maintenance will entail creating additional videos covering new features as they are added to the website. Since the data aggregation system was not completed maintenance and performance will have to be evaluated when a deliverable is presented by a future team. Last revised: 05/05/2017 20