Prototype Report. Team 02. Member Name Role . Rajat Verma Project Manager, Lifecycle Planner, Dev

Transcription

1 Prototype Report Team 02 Member Name Role Rajat Verma Project Manager, Lifecycle Planner, Dev Preksha Gupta Software Architect, Operational Concept Engineer Mangalore Rakesh Shenoy Software Developer, Prototyper Ankit Gupta Requirements Engineer, Tester Snehal Surendra Desai Prototyper, Software Developer Lu Wu Quality Focal Point, Tester Heidi Negron-Arroyo IIV and V, Feasibility Analyst i 10/15/2016

2 Version History Date Author Version Changes Made Rationale 10/13/2016 MRS, SSD 1.0 Integrated registration with payments. To understand registration system s generated using MailChimp every day a new announcement is made. implementation in SquareSpace. To understand how MailChimp generates Public calendar with partial event information. mails using RSS feed. To understand Private events page with complete event information. integration of Stripe with SquareSpace for payments. 10/15/2016 MRS, SSD Private page to download music notes 1.1 Completed draft version with all screenshots and description. To understand integration of MailChimp with SquareSpace. To understand implementation of public calendar with partial information from a password protected events page. To understand how files will be hosted by SquareSpace for downloading. Completed the prototype for final FCP package. 12/05/2016 Rajat 1.2 Added clear snapshot of registration Made changes as per review comments from TA for this report.

3 Table of Contents Prototype Report... i Version History... i Table of Contents... iii Table of Tables... iv Table of Figures... v 1. Introduction Purpose of the prototype report Status of the prototype Navigation Flow Prototypes Prototype 1 - Online registration and payment system Prototype 2 - Announcements with notifications Prototype 3 - Calendar of events Prototype 4 - Downloading music notes.13

4 Table of Tables Table 1: Risks and Prototypes...1 Table 2: Workflow for registration and payment system.3 Table 3: Courses page 4 Table 4: Specific course page...4 Table 5: Course-specific form..5 Table 6: Checkout page.6 Table 7: Orders page on SquareSpace..6 Table 8: Config page for announcements.7 Table 9: Campaigns page on MailChimp.9 Table 10: Announcements page.10 Table 11: triggered by MailChimp 10 Table 12: Members password page..11 Table 13: Password-protected events page.12 Table 14: Calendar of events.13 Table 15: Music notes page 14

5 Table of Figures Figure 1: Navigation flow of VYMA....2 Figure 2: Workflow of registration and payment system 3 Figure 3: Courses page..4 Figure 4: Course details page..5 Figure 5: Course-specific form...5 Figure 6: Checkout page 6 Figure 7: Orders page on SquareSpace.7 Figure 8: Config page for announcements.8 Figure 9: Add a new announcement 8 Figure 10: Campaigns page on MailChimp..9 Figure 11: Configuring RSS campaign on MailChimp..9 Figure 12: Announcements page..10 Figure 13: triggered by MailChimp.11 Figure 14: Members password page...12 Figure 15: Password-protected events page.12 Figure 16: Calendar of events on home page..13 Figure 17: Music notes page..14

6 1. Introduction 1.1.Purpose of the prototype The prototype report provides all the information about the prototypes which we used to mitigate the risks. We used the Buying Information strategy in order to mitigate the various risks. We built the prototypes to understand integration of the different COTS involved in the project, understand implementation of features requested by the client, and test workflow of particular features. Table 1: Risks and prototypes No. Risk Prototype 1 Not sure how to implement online registration and payment system. Implemented online registration system with SquareSpace, and integrated it with Stripe for online 2 Not sure how notifications can be sent every time an announcement is posted. 3 Not sure about storage options provided by SquareSpace to host music notes files. 4 Not sure how to show different views of events to the public and to the members. payments. Created RSS campaign on MailChimp and integrated it with SquareSpace to generate s. Created a passwordprotected page with PDFs for the music notes, that can be downloaded only by members. Created calendar on home page with partial information and a password-protected page for members with full event information. 1.2.Status of the prototype Since we did the prototype presentation, we have made the following improvements: Payment option along with online registration. RSS campaign on MailChimp, so now s are sent every day a new announcement post is made. Password-protected page for downloading music notes. Calendar on home page for the public to view events. Password-protected page for viewing complete event information. 1

7 2. Navigation Flow Figure 1: Navigation Flow of VYMA website. 2

8 3. Prototypes 3.1. Online registration and payment system Purpose of the prototype The team did not know how to create an online registration form with SquareSpace. Also, SquareSpace uses Stripe integration for processing payments. So, we also needed to research how to use Stripe and how to integrate it with SquareSpace to accept payments Result After we created the prototype, we realized how to use the commerce section of SquareSpace for implementing the registration and payment process. It also helped us understand how Stripe is integrated with SquareSpace to complete and process payments. Table 2: Workflow for registration and payment system Workflow diagram for online registration and payment system. WC_ As a student/parent, I can register and pay for music courses online, so that it becomes easier for me to signup, instead of printing and submitting form. The user chooses a course. The user is registered for the course after completing payment. Figure 2: Workflow diagram for online registration system. 3

9 Table 3: Courses page on the website Courses page that shows all the current available courses. WC_ As a student/parent, I can register and pay for music courses online, so that it becomes easier for me to signup, instead of printing and submitting form. The user clicks on the Courses tab of the website. The user selects a course. Figure 3: Courses page Table 4: Specific course page Course page showing course details for the particular course. WC_ As a student/parent, I can register and pay for music courses online, so that it becomes easier for me to signup, instead of printing and submitting form. The user selects a course. The user clicks on Register. 4

10 Figure 4: Course details page Table 5: Course-specific form Course-specific form to be filled before making payment. WC_ As a student/parent, I can register and pay for music courses online, so that it becomes easier for me to signup, instead of printing and submitting form. The user clicks on the Register button. The user fills and submits the form. Figure 5: Course-specific form 5

11 Table 6: Checkout page Checkout page to make payment. WC_ As a student/parent, I can register and pay for music courses online, so that it becomes easier for me to signup, instead of printing and submitting form. The user clicks on Checkout button. The user makes the payment. Figure 6: Checkout page Table 7: Orders page on SquareSpace Orders page under the commerce section of SquareSpace for admin to maintain and view orders. WC_ As a student/parent, I can register and pay for music courses online, so that it becomes easier for me to signup, instead of printing and submitting form. The admin goes to the Orders section on SquareSpace. The admin views and maintains the orders. 6

12 Figure 7: Orders page notifications for announcements Purpose of the prototype The admin of the website uses MailChimp to store lists of members and send s to them. So, the main purpose of the prototype is that the team was unsure how MailChimp can be used to send notifications to all the members every time an announcement is posted on the website. Also, we wanted to know whether MailChimp and SquareSpace can be integrated with each other Result After building the prototype, the team was able to figure out how to create an RSS campaign on MailChimp, in order to trigger s every day at a particular time if a new post was made on that particular day. It also helped us understand that MailChimp and SquareSpace work well together. Table 8: Config page for Announcements Config page for adding and managing announcements on SquareSpace WC_ As an admin I can update information at news section of the website, which also triggers notification to all members about it. The admin goes to the config page for announcements. The admin posts a new announcement. 7

13 Figure 8: Config page for Announcements Figure 9: Adding a new announcement 8

14 Table 9: Campaigns page on MailChimp Campaigns page on MailChimp to configure them. WC_ As an admin I can update information at news section of the website, which also triggers notification to all members about it. The admin logs in to MailChimp and goes to the campaigns page. The admin creates, edits or manages campaigns. Figure 10: Campaigns page on MailChimp Figure 11: Configuring an RSS campaign on MailChimp 9

15 Table 10: Announcements page Announcements page on the new website. WC_ As an admin I can update information at news section of the website, which also triggers notification to all members about it. A user goes to the announcements page of the website. The user views the announcements. Figure 12: Announcements page on website. Table 11: triggered by MailChimp sent by MailChimp for new announcement. WC_ As an admin I can update information at news section of the website, which also triggers notification to all members about it. The user checks their . The user goes to the announcements section to check the announcement. 10

16 Figure 13: triggered by MailChimp Calendar of events Purpose of the prototype We wanted to provide two different views to the events calendar. A public view which shows only partial information about every event, and another private view for members only which includes all the information about every event. The team did not know how a particular view could be shown only to the members Result After creating the prototype, we realized that SquareSpace provides an option for password-protected pages. Using this, we created a private page only for members that can be accessed only if they have the password. The general public can see a calendar on the home page, which only shows partial information about all events. Table 12: Members password page Page to enter password for members. WC_ As a member, I can view the detailed information of events in a calendar on a password protected page. A member clicks on events in members menu on the website. The member enters the password and goes to the events page. 11

17 Figure 14: Members password page Table 13: Password-protected events page Password-protected page where members can see all the events information. WC_ As a member, I can view the detailed information of events in a calendar on a password protected page. The member enters password and comes to this page. The member views all the information about all the events. Figure 15: Password-protected events page 12

18 Table 14: Calendar of events on home page Calendar of events on home page that all users of the website can view. WC_ As a member, I can view the detailed information of events in a calendar on a password protected page. A user comes to the website. The user views the partial information about all the events. Figure 16: Calendar of events on the home page Downloading music notes Purpose of the prototype The team did not know if SquareSpace lets us host files on the website for users to download, and we did not know how to do it Result After creating the prototype, we realized that SquareSpace provides an option to add files and also lets users download them from the website. So we put up the files in a password-protected page, so that only members can download the music notes. 13

19 Table 15: Music notes page Password-protected page for music notes. WC_ As a student, I can download music notes from the private/password protected page on the website, so that I can practice well for rehearsals and concerts. The member enters the password and reaches the music notes page. The member downloads music notes from the page. Figure 17: Music notes page 14