Prototype Report (PRO) Version 1.2

Prototype Report (PRO) Version 1.2 Prototype Report

Women at Work

Team No: 14

Sr no Name Role 1 Srikant Madhava Project Manager

2 Sanath Bhandary Operational Concept Engineer

3 Rohit Kudva Feasibility Analyst

4 Varma Maryala Life Cycle Planner

5 Praneet Surana Requirements Engineer

6 Dinesh Yeduguru Software Architect

7 Nishant Jani Prototyper

8 Brian Bousman IIV&V

9/27/2014

i Prototype Report (PRO) Version 1.2 Version History Date Author Version Changes made Rationale

10/11/14 NJ 1.0 ● Original for CSCI577a; Tailored from ● To fit CS577a course ICSM PRO Template content ● Added new prototypes to demonstrate ● To mitigate risks and 10/19 NJ 1.1 working of NeonCRM Rest API prepare the FCP for valuation phase 11/24 NJ 1.2 ● Added new prototypes for upgraded ● To fit CS577a course registration form, feedback form and content new photo gallery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

ii Prototype Report (PRO) Version 1.2 Table of Contents

Prototype Report …………………………………………………………………………………………… i

Version History …………………………………………………………………………………………… ii

Table of Contents …………………………………………………………………………………………… iii

Table of Tables ………………………………………………………………………………………………. iv

Table of Figures ……………………………………………………………………………………………... v

1. Introduction ………………………………………………………………………………………... 1

1.1 Purpose of the prototype report ………………………………………………………………... 1

1.2 Status of the prototype ………………………………………………………………………… 1

2. Prototype …………………………………………………………………………………………... 2

2.1 Prototype #1: User Interface ………………………………………………………………….... 2

2.1.1 Purpose of the Prototype ……………………………………………………………….. 2

2.2 Prototype #2: Demonstrating NeonCRM REST API……………………………………………. 4

2.1.1 Purpose of the Prototype ……………………………………………………………….. 4

iii Prototype Report (PRO) Version 1.2

Table of Tables 17 Demonstrate NeonCRM REST API 2 ………………………………………………………………………………….

Prototype for updated registration form ……………………………………………………………………………. 4

Prototype for updated feedback form ………………………………………………………………………………. 6

Prototype for photo gallery …………………………………………………………………………………………… 8

Prototype for social media integration with blogs 10 …………………………………………………………………. 18

iv Prototype Report (PRO) Version 1.2

Table of Figures

Figure (a): Demonstrating Neon CRM REST API to Save Data ………………………………………... 2

Figure (b): Success message to confirm data is saved ………………………………………………….. 3

Figure (c): Demonstrating NeonCRM REST API to Fetch Data by Account Id ………………………. 3

Figure (d): Updated overview of the online registration form ………………………………………………. 4

Figure (e): Demonstrating the components of updated online registration form …………………………….. 5

Figure (g): Updated overview of the online feedback form ……………………………………………….... 6

Figure (h): Demonstrating the components of updated online feedback form ………………………………... 7

Figure (i): Demonstrating the photo gallery 8 …………………………………………………………......

Figure (j): Demonstrating the photo gallery ……………………………………………………………………… 9

Figure (k) Demonstrating the integration of social media with blogs 10 ……………………………………………

v Prototype Report (PRO) Version 1.2

1 Introduction

1.1 Purpose of the prototype report

The purpose of the prototype report is to provide project specification for client (Women at Work) according to the requirements discussed during the win-win negotiation sessions. The prototypes aim to provide the client a visual view of the requirements, so that we can reduce ambiguous requirements and mitigate risks identified in the project.

1.2 Status of prototype

This is the updated version of the prototype report which includes the following: - Demonstration of the REST API (in beta phase), to interact with NeonCRM. - Screenshots of the online registration and feedback form so that the client have a clear understanding of the UI. The mock up forms are designed using HTML5, JavaScript and twitter bootstrap.

vi Prototype Report (PRO) Version 1.2 2 Prototype

2.1 Prototype #1: Demonstrating NeonCRM REST API

2.1.1 Purpose of the prototype Among the primary requirements from the client, one of them includes the ability of a user to register online and save the registration data into NeonCRM. However, currently the REST API for NeonCRM is in the beta stage. This puts the project at a major risk.

We hence prototyped a simple functionality to use the NeonCRM REST API to save data into the CRM and fetch the corresponding data back from it. This helps us mitigate the risk associated with the uncertainty of the REST API and enable us to understand the working of the REST API in more detail.

Table 1: Demonstrate NeonCRM REST API

Description This is a screen shot to demonstrate the GET and POST functionality of the NeonCRM REST API. Related The REST API should be able to save and get data from the NeonCRM. Capability Pre-condition A valid API key with previlege to save and fetch data.

Post condition Save data into NeonCRM and fetch data from the NeonCRM using the API.

Figure (a): Demonstrating Neon CRM REST API to Save Data

vii Prototype Report (PRO) Version 1.2

Figure (b): Success message to confirm data is saved

Figure (c): Demonstrating NeonCRM REST API to Fetch Data by Account Id

viii Prototype Report (PRO) Version 1.2 2.2 Prototype #2: User Interface

2.2.1 Purpose of the prototype The client have specified for a requirement of an online feedback, registration form, photo gallery among others. However, client has provided no UI specification or mock ups for these requirements.

By prototyping the UI for the registration and feedback form we intend to mitigate the risk of unsatisfactory user experience by the client, through buying information technique. By frequent feedback from the client we will be able to improve the user interface in order to meet the clients’ expectations.

Table 2: Prototype for Updated Registration form Description This is the screen shot for registration page of the women at work website. Related The registration page will capture all personal and demographic information of Capability the user. Pre-condition User will click on the registration link on the www.womenatwork.org or directly enter the URL. Post condition User can easily navigate through the registration form. Enter the details for each field and post a request to register.

Figure (d): Updated overview of the online registration form

ix Prototype Report (PRO) Version 1.2

Figure (e): Demonstrating the components of updated online registration form

x Prototype Report (PRO) Version 1.2

Table 3: Prototype for Updated Feedback form Description This is the screenshot for the online feedback form Related Capability Allow the user to fill the feedback form and submit it online.

Pre-condition User will click the feedback form link in the email sent to the user. Post condition The feedback of the user can be captured online.

Figure (g): Updated overview of the online feedback form

xi Prototype Report (PRO) Version 1.2

Figure (h) Demonstrating the components of updated online feedback form

xii Prototype Report (PRO) Version 1.2

Table 4: Prototype for Photo Gallery Description This is the screenshot for the photo gallery. Related Capability Visitors can see the most wonderful photos of most recent events that Women at Work was a part of, on this gallery page Pre-condition Any page in which users can access the main navigation bar Post condition After clicking a picture, the user should see the full scale image, as a pop up on the same page.

Figure (i) Demonstrating the photo gallery

1 Prototype Report (PRO) Version 1.2

Figure (j) Demonstrating the photo gallery

2 Prototype Report (PRO) Version 1.2

Prototype for social media integration with blogs This page adds the social media share buttons for the blogs. Users can click Description on social media share buttons to share the related blogs on their social media websites to introduce these blogs to their friends. Related Capability Social media share function of the blogs in the webpage.

Pre-condition This social media share buttons will display on the blogs page when the users click on the any blog. Post condition After users clicking on these share buttons, then the related event information Will display on the users’ own social media pages.

Figure (k) Demonstrating the integration of social media with blogs