FYP Mid Term 21 February 2019 Agenda 1

FYP Mid Term ( 21 February 2019)

Agenda 1. Project Management • • • Our Team, Sponsor, Supervisor Meeting Minutes Scrum Framework Scope Changes Schedule (Plan vs Actual) Sprint Velocity Bug Metrics Customer Journey Change Management Risk Management Value to Sponsor 2. Demonstration • Persona & Scenario 3. Quality Of Product • • Architecture Diagram Technical Complexity Technology Used User Testing 4. Others • • • X- Factor Client Testimonial Reflection / Learning Outcomes

Our Team Project Manager Deputy Front-End Developer Back-End Developer System Architect Project Quality Assurance Deputy Project Manager Back-End Developer Integration Developer Demonstration Lead Front-End Developer UI/UX Designer Quality Of Product Others

Our Client Samaritern is a career discovery and development platform to help prepare today’s talents for tomorrow’s businesses. They seek to help talents identify their career goals and provide them with the resources needed (for e. g. coaching, relevant internships or career planning etc) to get there. Project Demonstration Quality Of Product Others

Our Supervisor David Lo Full-time Faculty, School of Information Systems Associate Professor of Information Systems Lee Kong Chian Fellow Project Demonstration Quality Of Product Others

Meeting Minutes Internal: xx Meeting Sponsor: xx Meeting Supervisor: xx Meeting This number of meeting is of as at xx Date Project Demonstration Quality Of Product Others

Scrum Team PRODUCT OWNER SCRUM MASTER Responsible to deliver business value to the client and manages product backlog. Responsible to ensure the team adhering to the SCRUM practices and manages Sprint backlog. SCRUM TEAM Responsible to execute and develop the product. Give feedback to SCRUM MASTER on what tasks they can manage for future iterations. Project Demonstration Quality Of Product Others

Scrum Events PRODUCT BACKLOG SPRINT PLANNING 2 WEEKS SPRINT WITH DAILY SCRUM Project Demonstration SPRINT REVIEW Quality Of Product RESTROSPECTIVE Others

Changes Scope (Core) Version 1 Project Version 3: Acceptance Demonstration Version 6: Midterms Quality Of Product Others

Scope Plan (Secondary Module) Scope Actual (Secondary Module) SECONDARY MODULES 1. Admin Module 2 (Forum) • Create advertisement • Monitor reported posts and comments • View list posts & comments 2. Analytics Module • Coach's popularity • Talent - Coach Industry Match • Users activity (include forum activity too) • Popular page & features • Text analytics: Trending • Popular coach, industry & skills • Coach recommendation • Feedback loop 3. Notification Module • Coach notifications • Talent notifications • Forum Post & Comment Reply notifications 4. Talent Advanced Module • Upload Resume & Cover Letter • Payment methods Project Demonstration Quality Of Product Others

Scope Plan (Good to have) Scope Actual (Good to have) GOOD TO HAVE MODULES 1. Chat Module • Talent & Coach • Talent & Employer 2. Talent - Course Module • Apply for Course • Add to Favorite (Course) • Search Engine (Course) 3. Additional Module • User follow • Sync login details with FB/Linked. In Project Demonstration Quality Of Product Others

SCHEDULE (PLAN) SCHEDULE (ACTUAL) Legend Milestone UAT General Preparation 3 Dec – 16 Dec Ø Admin Module 1 (Coaching platform) • Post Course • Post Upcoming Events Ø Talent Course Module • Apply for Course • Add to Favourite (Course) • Search Engine (Course) Ø Talent Advanced Module • Assessment Test • Upload Resume & Cover Letter • Payment Methods 3 Sep – 16 Sep Ø Preparation I • Scope Discussion Tech Architecture Research • Proposal Draft • Diagram • 2 4 5 NA and comments • View list posts & comments Ø Analytics Module • Coach's popularity • Talent - Coach Industry Match 23 Oct Proposal 17 Mar – 24 Mar Ø UAT 3 • Basic functions: 6 7 8 9 10 Project Export actor’s data to Excel or PDF Format • CRUD on all actors Ø Talent – Coach Module • Search Engine (Coach) Ø Deployment 8 Apr – 16 Apr Final Presentatio n 11 12 13 12 Feb – 18 Feb Ø UAT 2 Ø Analytics Module • Users activity (include forum activity too) 15 Oct – 28 Oct • APIs Documentation 19 Mar Poster 21 Feb Midterm Post, Comment, Reply, Vote 14 Jan – 27 Jan Ø Forum Module • Search & Sort Ø Admin Module 1 (Coaching platform) • View paying talents • View talent to coach ratio Demonstration 14 15 11 Mar – 24 Mar • Popular page & features Ø Admin Basic Module Ø Final Preparation Ø Handover Ø Update diagrams Ø User manual Ø Generation of Ø Forum Module 17 Dec – 30 Dec 25 Sep – 30 Sep Ø UAT 1 (Wireframe) 25 Mar – 7 Apr 31 Dec – 13 Jan 6 Nov – 10 Nov Acceptanc e 3 17 Sep – 30 Sep Ø Preparation II • Hi-Fi Prototype Design (Axure) • Diagram Ø Account Module • Registration for all actors • Login + Logout General Functions LATEST SCHEDULE AFTER ACCEPTANCE 29 Oct – 11 Nov Ø Debugging Ø Chat Module • Talent & Coach • Talent & Employer Ø Preparing for Acceptance • Slides & Demo 1 Oct – 14 Oct Ø Coach Module • Update profile (Coach) • Create Coaching session Ø Talent – Coach Module • Update profile (Talent) • Join Coaching session • Add to Favourite Coachs Ø Feedback Module • Talent to Coach • Coach to Talent • Coach’s Rating 1 28 Jan – 10 Feb Ø Admin Module 2 (Forum) • Create advertisement • Monitor reported posts 25 Feb – 10 Mar Ø Notification Module • Coach notifications • Talent notifications • Forum Post & Comment Reply notifications Ø Talent Advanced Module • Upload Resume & Cover Letter • Payment Methods Ø Talent-Coach Module • Approve skill Ø Analytics Module 11 Feb - 24 Feb Ø Mid Term Preparation • Slides & Demo • • • Text analytics: Trending Popular coach, industry & skills Coach recommendation • Feedback loop Quality Of Product Others

Velocity Chart Project Demonstration Quality Of Product Others

Bug Metric Project Demonstration Quality Of Product Others

Customer Journey - Talent PO Data Collection Linked. In/Face book (G) Form Start Signup Start Log In/Log Out Forum Homepage Guests Delete Edit Dashboard (profile) with CV/Resume upload Coaching Homepage Search Browse + Filter Report Edit Favourite View profile Reply Follow (G) Schedule Feedback 20% Commission Share Vote Located at footer Systems (S) 1. Are these answers beneficial to you? OR 2. Does this answer your question? Review Notify daily at 7 am Payment Coach Project Management Feedback loop Prompt to A/B Test of Value Coaching S Delete Bookmark Post Notify immediately Question Exists Message (G) 7 days Question (or reply) does not exist Advertisements Send email/message to check on usefulness of platform Demonstration Quality Of Product Legend: • Community platform • Coaching platform • Both • Samaritern • Guests Others

Customer Journey - Coach PO Data Collection Linked. In/Face book (G) Form Start Signup Log In/Log Out Forum Homepage Guests Delete Edit Coaching Homepage Search Browse + Filter Dashboard (profile) Search Browse + Filter Report Edit View session Favourite Bookmark Feedback 20% Commission Reply Share Vote Located at footer Systems (S) 1. Are these answers beneficial to you? OR 2. Does this answer your question? Review Notify daily at 7 am Payment Coach Project Management Feedback loop Prompt to A/B Test of Value Coaching S Delete Create Schedule Post Notify immediately Question Exists Message (G) 7 days Question (or reply) does not exist Advertisements Send email/message to check on usefulness of platform Demonstration Quality Of Product Legend: • Community platform • Coaching platform • Both • Samaritern • Guests Others

Change Management 1 5 a Client makes a change request Stop current sprint. Arrange internal meeting, update product backlog and sprint backlog 2 6 Implement changes. Update change log 5 b CRITICAL NON-CRITICAL Update change log Update product backlog and sprint backlog ACCEPT 3 4 Team evaluates the change request Project REJECT Demonstration Quality Of Product Inform client regarding reason for rejection Others

Project Demonstration Quality Of Product Others

Summary of changes 1. Addition of forum module 2. Change from “Mentor” to “Coach” 3. Removal of “Assessment Test” Project Demonstration Quality Of Product Others

Technical Risk Management TECHNICAL MANAGEMENT RISK EVENT LIKELIHOOD IMPACT CATEGORY MITIGATION Team have little experience coding for analytics HIGH MEDIUM A Three out of five members are taking analytics module. Additionally, analytics related coding will be done after December. Tap on analytics industry mentors. Team is unfamiliar with Java. Script libraries such as REACT, and its integration to the Net. Beans IDE HIGH MEDIUM A Currently, HTML and CSS is temporarily used for acceptance. Team will learn and implement REACT starting December Project Demonstration Quality Of Product Others

Client Risk Management TECHNICAL MANAGEMENT RISK EVENT Sponsor potentially change project requirements due to the nature of startup companies Project LIKELIHOO D IMPACT CATEGORY MITIGATION HIGH MEDIUM A Demonstration Consistent meeting with sponsor. Additionally, we also planned for prototype user testing to test the business idea Quality Of Product Others

PM Risk Management TECHNICAL MANAGEMENT RISK EVENT LIKELIHOOD IMPACT CATEGORY MITIGATION All team members are juggling with other modules in this semester. Potential delay to some of the FYP work MEDIUM B Consistent weekly internal meetings. Allocate tasks based on member’s availability Unsure of architecture and what software to use HIGH MEDIUM A Research online and try some of them Project Demonstration Quality Of Product Others

Value Added to Sponsor Include explanation for analytics & what charts we have Project Demonstration Quality Of Product Others

Persona 1: Talent Details Challenges • Andy is a year 4 undergraduate student from SMU Information Systems • Andy is unsure of his career options. He is in a dilemma between backend development and project management • Andy went to consult SMU’s career coach but turns out his coach has minimal understanding of the IT industry • Andy also asked his SMU SIS seniors but they have minimal working experience • Andy is able to clarify any of his career concerns in our Community Platform where a pool of suggestions and insights can be found to address his questions Opportunities • Andy is able to browse through a wide option of coaches and arrange a meetup session with any of them through our Coaching Platform Project Demonstration Quality Of Product Others

Persona 2: Coach Details • John is the CTO of a medium sized IT company with 10 years of experience • John wants to share his skills and experience to these young talents and aspires to be a mentor Challenges • John realised that many of his interns have do not have a basic understanding on their career path • John is unsure on the right platform to outreach a greater number of young talents • John is able to share his knowledge of his specialized industry in our Community Platform Opportunities • John is able to create a coaching session in our Coaching Platform based on his desired schedule Project Demonstration Quality Of Product Others

DEMONSTRATION Project Demonstration Quality Of Product Others

Architecture Diagram User Clien t Intermediar y Backen d PC Administrator Project Demonstration Quality Of Product Others

Technologies Used FRONTEND BACKEND OTHER TECHNOLOGIES Project Demonstration Quality Of Product Others

Technical Complexity 1. Backend & Analytics 2. Frontend (React. JS) 3. Integration Project Demonstration Quality Of Product Others

Technical Complexity (Back-end & Analytics) 1. Descriptive-level analytic data and basic CRUD functions: a. Access to actors such as talents, logs, feedbacks, payments, and coaches b. Forums threads and comments c. Talent and coach ratio 2. Diagnostic-level analytic data, consisting of but not limited to: a. Coach Popularity & Quality b. Users Interest in Activities c. Popular features d. Profitable features e. Talent’s Interest Industry Project Demonstration Quality Of Product Others

Technical Complexity (Back-end & Analytics) The biggest challenge in this journey is to provide data of interest with the least additional cost to client which are loading of data and storing of data. Hence after research and balancing client’s interest, we arrived at the current solution: 1. Implement user logs separated into talents and coaches for analytics, and record purposes 2. Store only the very minimum of information to minimize the cost 3. Processing the data with dictionary or map to reduce loading time a. O(1) complexity for map instead of O(N) complexity for list 4. Creation of temporary class when map is unable to serve purposes such as the processing and displaying of data Project Demonstration Quality Of Product Others

Technical Complexity (Back-end & Analytics) Project Demonstration Quality Of Product Others

Technical Complexity (Front-end) ● ● Problem: Poor scalability since there are same objects that need to be reuse in multiple pages. Result: A lot of copy pasting of the same code and it makes the jsp page become really long and hard to debug and integrate.

Technical Complexity (Front-end) ● Sol: implement React and re-use the component by using component. It becomes easier to develop and maintain apps and to implement a consistent look and feel across the whole application project.

Technical Complexity (Front-end) ● ● Prob: slow loading time whenever there are changes or updates to html tag require the whole page to be reloaded Result: create an awkward pause and freeze and decrease the pleasant user experience of the website

Technical Complexity (Front-end) ● ● Sol: The feature of Virtual DOM improves the performance by loading only the changes or updates to specific html tag For example, the forum post where there are many actions might be happening every seconds. Using react, when there is an action triggered such as comment or thumbs up, it will only update the specific post only

Technical Complexity (Front-end) ● ● ● Prob: mismatch between the custom css and the predefined style from bootstrap and open source framework like core ui. Result: sometimes display of the ui is not up to our design Sol: find solution from the documentation and learn from it. At the same time, use the inspect function on the browser to figure out the root of the mismatch design

Technical Complexity (Integration) ● ● Prob: React. JS (Front-End) cannot connect with JAVA (Back-End) Sol: JAVA (Back-End) send to Front-End using JSON and React. JS will retrieve by XMLHttp. Request. Before: Controller Send to JSP (HTML Page)

Technical Complexity (Integration) After: Controller. JSON Send XML (Text format)

Technical Complexity (Integration) ● ● JSON text to be retrieved by using XMLHttp. Request by the name of each property. JSON is used because: ○ JSON doesn't use end tag ○ JSON is shorter ○ JSON is quicker to read and write ○ JSON can use arrays

Technical Complexity (Integration) ● ● Prob: When display specific page, it did not auto run initially put all code into Render(). Sol: Use the function Component. Did. Mount() (Method that only called on client and performed after the initial render when client received data from server and right before data paints the browser)

Technical Complexity (Integration) ● ● Prob: Getting information from JSON (e. g. list of forum thread) and loop the list on Render(){Return(); } Sol: Result from JSON, process in function then set it into document. get. Element. By. ID(“<Name of tag>”). inner. HTML = <value>. Called under Render(){Return(<div id=“<Name of tag>”></div>); } Before using document. get. Element. By. ID: When having more than 1 data, need to repeat the whole code more than once (Prob: data is not static)

Technical Complexity (Integration) Looping the data in Function and assign HTML id Call the assigned HTML id

Technical Complexity (Integration) ● ● Prob: What written in Render return tag is different from what need to be written in function document. get. Element. By. ID Ans: Inspect what need to written in document. get. Element. By. ID by using Dev. Tools in Chrome (cross-checking). Display under Render return Display under function Dev. Tools Inspect

Technical Complexity (Integration) ● ● Prob: When getting info from URL, it has URL format where “space” = “%20”. Ans: React. JS have function that will decode. URIcomponent and encode. URIComponent decode. URIComponent – get value from URL and decode it into normal strin encode. URIComponent – encode normal string into URL format and passed as parameter or value in URL

Technical Complexity (Integration) ● ● Prob: Passing info / value to another component and need to be retrieved by another component Ans: assign props value into another component and access by another component by using this. props. parameter

User Testing Project Demonstration Quality Of Product Others

UAT 1 Objectives (Talents) Venue Date Participant # of Participants Duration GSR @ Li Ka Shing Library 25 – 30 Sep 2018 Undergraduate Students 11 Students Test Objective • Acts as MVP (Minimum Viable Product) to gather data in willingness of talent in adopting Samaritern platform • Find out what new features can be introduced or improved to increase retention of talents • To detect any usability challenges based on our current UI • Gather the feedback on the overall UX with our Hi-Fi prototype Project Demonstration 30 mins / user Test Scope • • Talent registration and login Update talent profile Find and join mentoring session Feedback Quality Of Product Others

UAT 1 Objectives (Coach) Venue Date Participant # of Participants Duration GSR @ Li Ka Shing Library 25 – 30 Sep 2018 Potential coaches (invited by Sponsor) 4 Coaches Test Objective • Acts as MVP (Minimum Viable Product) to gather data in willingness of coaches in adopting Samaritern platform • Find out what new features can be introduced or improved to attract more coaches participation • To detect any usability challenges based on our current UI • Gather the feedback on the overall UX with our Hi-Fi prototype Project Demonstration 30 mins / user Test Scope • • • Mentor registration and login Update coach profile Create coaching session Combine coaching session Feedback system Quality Of Product Others

Axure Prototype (Talent) Project Demonstration Quality Of Product Others

Axure Prototype (Coach) Project Demonstration Quality Of Product Others

UAT 1 Results (UI/UX) 1 General • The sidebar colour should be different from homepage • The naming convention should be rechecked (e. g. “My Events” to “My Sessions” • Wallet icon to be put beside the profile button to represents credit value 2 Main Page and Landing Page • The option to choose the user type (Talent/ Mentor) is not obvious enough at the Account Module Change needed in Sign up and login page • “Recent uploaded job” should be shown at the dashboard • Inbox notification should be at the dashboard. A separate notification function should be created. Potential to change to chat function instead • Change Project the top right corner icon to “Settings” logo Demonstration Quality Of Product Others

UAT 1 Results (UI/UX) 3 Profile • Successful message should be shown when upload photo is successful • The naming convention should be rechecked (e. g. Change profile to Change Photo) • The system should show the profile completeness percentage (e. g. 75% Complete) 4 Talent – Coach Function • Overview of Industry and View Mentors section should be at one page • Only 1 send message icon should be provided for each mentor • Keep the view of mentors to be short and concise with details being put under subsection • Explanation on what the Feedback questions mean can be provided • Star icon to add to favourite mentor should turn gold instead of disappear Project Demonstration Quality Of Product Others

UAT 1 Results (Talents) Project Demonstration Quality Of Product Others

UAT 1 Results (Coaches) Project Demonstration Quality Of Product Others

UAT 2 Objectives (Talents) Venue Date Participant # of Participants Duration SR / CR @ School Of Economics 12, 14, 15, 18 February 2019 Undergraduate Students 43 Students 30 mins / user Test Objective Test Scope • Acts as MVP (Minimum Viable Product) to gather data in willingness of talent in adopting Samaritern platform • Find out what new features can be introduced or improved to increase retention of talents • To detect any usability challenges based on our current UI • Gather the feedback on the overall UX of our deployed version of website • Talent registration and login • Post, Comment, Upvote, Downvote, Bookmark a forum thread • Find and join coaching session Project Demonstration Quality Of Product Others

UAT 2 Objectives (Coach) Venue Date Participant # of Participants Duration SMU BIG or Coaches’ office 12, 14, 15, 18 February 2019 Potential coaches (invited by Sponsor) 17 Coaches 30 mins / user Test Objective Test Scope • Acts as MVP (Minimum Viable Product) to gather data in willingness of talent in adopting Samaritern platform • Find out what new features can be introduced or improved to increase retention of talents • To detect any usability challenges based on our current UI • Gather the feedback on the overall UX of our deployed version of website • Coach registration and login • Post, Comment, Upvote, Downvote, Bookmark a forum thread • Create coaching session Project Demonstration Quality Of Product Others

X Factor Get 20 people to have a diagnostic test on our system BY ACCEPTANCE Getting 70 active users + 20 forum posts & comments BY MIDTERM Getting 120 active users + 50 forum posts & comments + 10 talent attending coaching sessions BY FINAL Project Demonstration Quality Of Product Others

Others ● Handover process Project Demonstration Quality Of Product Others

Client Testimonial ● Team testimonial from Samaritern Project Demonstration Quality Of Product Others

Reflection Posted by Surya Gunawan Ali Throughout my FYP journey so far, I have realised the challenge of managing a major project while coping with my own studies. However, I believe this experience would greatly help my future career. Posted by Tommy Johnson From acceptance to midterm, I learnt to better manage my own expectations and others' so that it is possible to get a good grasp of current situation. I also gained experienced and learned skills not covered in SE to set up a website. Posted by Tanrio Project Demonstration Quality Of Product Others

Reflection Working on FYP allows to get as much as exposure on the real life project before step in into workforce. However, we must understand that in real life project, it will much more unpredictable situations than school project. Hence, always prepare yourself and manage the changes in calm manner. Posted by Christine Through this journey thus far, I learn how to develop a website application with a new technology, React. It is challenging yet Through this journey thus far, I learn how to develop a website meaningfulwith as Ia am to receive honest constructive feedback application newable technology, React. It isand challenging yet meaningful to. Icontinuously improve. Other that, I learn to manage my time as am able to receive honest andthan constructive feedback to continuously as to meet deadlines in Isome situations. improve. Other than that, learn unexpected to manage my time as to meet deadlines in some unexpected situations. Posted by Fresi Project Demonstration Quality Of Product Others