1. Pradeep Muruganandam - Prototyper and Quality Focal Point

Prototype Report

Construction Meeting Minutes Application

Team number 6

1.  Pradeep Muruganandam - Prototyper and Quality Focal Point

2.  Dennis Evans - System Architect, Project Manager

3.  Pavan Lingambudhi Seshadri Vasan - Requirements Engineer

4.  Sideok You - Feasibility Analyst

5.  Shengyi Chen - Operational Concept Engineer

6.  Nguyen Tran - IIV & V

7.  Qichen Gu - Life Cycle Planner

12/02/2015

v

Version History

/ Date / Author / Version / Changes made / Rationale /
10/14/15 / PM / 1.0 / •  Original for CSCI577a; Tailored from ICSM OCD Template / •  To fit CS577a course content
10/15/15 / PM / 1.1 / •  Added images and other community feats / •  To add more benefit chain and deign new systems.
10/15/15 / PM / 1.2 / •  Added new details about the changed prototype / •  Fixed the suggestions given by client and the changes told by Faculty.
11/30/15 / DE / 1.3 / •  Changed format of the document and added prototype status in section 1.2 / •  Format changed needed to incorporate other prototypes into the document.
12/2/15 / DE / 2.0 / •  Added sections 2.2 through 4 / •  Incorporated additional prototypes since FCR

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 Prototype Report: 1

1.2 Prototype Status: 1

2. UI Prototypes 2

2.1 Balsamiq UI Prototype 2

2.2 Android Screen UI Prototype 8

3. Google Cloud Datastore Prototypes 19

3.1 Google App Engine Standalone Datastore Prototype 19

3.2 Android Client Interfacing with Google App Engine Datastore Prototype 19

4. Notification Prototype 21

4.1 Parse Push Notifications 21

v

Table of Tables

Table 1: Login Page 3

Table 2: Dashboard Page 4

Table 3: New Meeting Page 5

Table 4: New Task Page 6

Table 5: Notification 7

Table 6: Login Screen 9

Table 7: Signup Screen 10

Table 8: Select Project Screen 11

Table 9: Administrator Dashboard Screen 12

Table 10: Select Meeting Category Screen 13

Table 11: New Meeting Screen 14

Table 12: Edit Meeting Screen 15

Table 13: Publish Meeting Screen 16

Table 14: Edit Profile Screen 17

Table of Figures

Figure 1: Navigation Flow of the Prototype System 3

Figure 2: Login Page 4

Figure 3: Dashboard Page 5

Figure 4: New Meeting Page 6

Figure 5: New Task Page 7

Figure 6: Notification 8

Figure 7: Navigation Flow of the Proposed System 9

Figure 8: Login Screen 10

Figure 9: Signup Screen 11

Figure 10: Select Project Screen 12

Figure 11: Administrator Dashboard Screen 13

Figure 12: Select Meeting Category Screen 14

Figure 13: New Meeting Screen 15

Figure 14: Edit Meeting Screen 16

Figure 15: Publish Meeting Screen 17

Figure 16: Edit Profile Screen 18

Figure 17: First Google App Engine Prototype 19

Figure 18: Google App Engine Prototype, Complete Datastore Chain 20

Figure 19: Parse Notification Prototype 21

v

1.  Introduction

1.1  Prototype Report:

A prototype is an early sample, a working model or small release of a product built to test a concept or process and get feedback from user about it.

It gives the client an idea about how the application is going to look when it is developed. It also gives the development team an opportunity to experiment on new technology stack by developing a working sample to see the compatibility and usability for the given use case.

Eg. A new database technology, a new device driver compatibility, a cloud solution could all be factors for compatibility issues. So, a prototype of a working model using them could be beneficial to understand the working of the technology as well as a good reusable module code for the software during development.

This report details the progress we have made with respect to the Prototype. We can do incremental prototyping to steer clear of bigger problems in the product in later stages of development. So, we keep track of the changes we make in the Prototypes soon after getting feedback from client and maintain it up to date.

Note that this report format varies from the ICSM prototype template. This was intentionally done in order to better incorporate prototypes of different kinds, as well as prototype progress, rather than a single UI prototype as the template suggests.

1.2  Prototype Status:

Week 6:

A.  UI Prototypes - Using Balsamiq - For Administrator view, tasks, and another prototype for Notifications.

B.  Working sample Google App Engine Storage Prototype - To see compatibility of the cloud app deployment and storage for the use case.

Week 11:

C.  UI Prototypes – Android Screen Implementation – Core screens identified and implemented on Android device. Barebones screen implementation meant to act as a placeholder to be built upon in iterations.

D.  Google App Engine Storage Prototype – With two different developers, redid initial backend prototype where a Google App Engine program stores and retrieves data from the Google Cloud Datastore via Objectify API. Implemented cloud endpoints API on Android device to complete chain.

Week 14:

E.  Notification Prototype – Implemented app notification prototype using Parse messaging.

2.  UI Prototypes

Top Risk associated with our project:

•  Clean usable User Interface: Our critical-success stakeholders need the most usable and easier User Interface so that it has to have not only intuitive looking, but also direct understanding how to use it.

2.1  Balsamiq UI Prototype

A prototype using a prototyping tool, which has support for designing mobile UI would be of good help to collect user feedback and incorporate those changes into our UI design when we develop the application. This initial UI prototype was developed in the initial few weeks of the semester for the team’s first prototype presentation.

Clean usable UI => Developed using Balsamiq -

·  Cost: low cost and high quality(providing free trial)

·  It provides tools for designing and developing useful User Experience

·  It provides sketch function that we can easily draw the app design(called Mockup) provides lots of UI components & icons(comminuted generated) gives options to add external mockups and own images.

·  The tool is easy to learn for even non-technical people.

·  Options to drag and drop icons and elements.

·  Created template can be reused for other mockups.

·  Helps us collect valuable feedback from end users without designing a real UI.

We have 2 UI prototypes -

·  The main prototype which shows the Dashboard, meeting creation, task creation, view meeting.

·  One prototype for the user (general user / administrator) for viewing notifications and using the App.

·  Link to Prototype : https://www.youtube.com/watch?v=3dBCVt40bPg

·  Link to Notification Prototype : https://www.youtube.com/watch?v=kZiKFVD49vI

2.1.1  Navigation FlowNote that the navigation flow has changed since the Balsamiq prototype. See section 2.2.1 for an updated navigation flow.

Figure 1: Navigation Flow of the Prototype System

2.1.2  Login Page

Table 1: Login Page

Description / This screenshot shows the Mobile App’s login page to authenticate the users and give the right kind of view, privileges for different stakeholders based on their role.
Related Capability / CR-1 User Management
WC_3516, WC_3513
Pre-condition / Clicking on the Construction Meeting Minutes App icon in the Home Screen takes the user to this screen.
Post condition / The user’s credentials are checked and if correct, user is taken to the Dashboard page.

Figure 2: Login Page

2.1.3  Dashboard Page

Table 2: Dashboard Page

Description / This screenshot shows the different meeting topics the manager has. There is an option to create a new meeting or click on any meeting to view details about it.
Related Capability / CR-2 - Meeting Minutes Management.
Pre-condition / Login by using the right credentials.
Post condition / The user's actions can be either the viewing of meeting details or creation of new meeting.

Figure 3: Dashboard Page

2.1.4  New Meeting Page

Table 3: New Meeting Page

Description / This screenshot shows the page which lets you create a new meeting to add to the list of different meeting topics the manager has. It asks meeting details, and people involved to create the meeting.
Related Capability / CR-2 - Meeting Minutes Management.
Pre-condition / Clicking on the New Meeting button icon in the Dashboard takes the user to this screen.
Post condition / Meeting is added if all the needed details are present in the fields and people involved are notified.

Figure 4: New Meeting Page

2.1.5  New Task Page

Table 4: New Task Page

Description / This screenshot shows the page which lets you create a new task to add to the a specific meeting topics the manager chooses. It asks task details, completion date and people involved to create the task.
Related Capability / CR-2 - Meeting Minutes Management.
Pre-condition / Clicking on the New Task button icon in Meeting task list takes the user to this screen.
Post condition / Task is added if all the needed details are present in the fields and members involved notified.

Figure 5: New Task Page

2.1.6  Notification

Table 5: Notification

Description / This screenshot shows the notification window coming up on the Home Screen of the phone. Users have the option to choose to view the update or choose to Dismiss it.
Related Capability / CR-3 - Notifications
Pre-condition / Have the application installed in the Phone.
Post condition / User can choose to see the notifications regarding the meeting task or choose to ignore it.

Figure 6: Notification

2.2  Android Screen UI Prototype

Following the first prototype presentation and ARB, our client provided useful feedback for our first draft of the Balsamiq mockup UI. The Balsamiq mockup was improved and presented to the client again where further feedback was extracted. Our client requested that UI be developed first. Based on the client’s request and feedback from the initial prototype, we decided to implement the first draft of the Android screens for the second prototype presentation. This draft includes the core screens, set will be completed at a later date. Following feedback from DCR, some core screens will need updates to their fields to match the design presented in the SSAD. Such updates are pending until after the review to minimize the probability of rework.

Project plan is to create drafts of the layout first and then present them to client. With help of the client we will continue to improve UI in iterations throughout the development phase while keeping in mind UX principles. In the later stages of development, we will use Adobe Photoshop to improve the UX and give the application’s UI a polished feel.

2.2.1  Navigation Flow

The following diagram shows the navigation flow of the purposed system. Although there are still pages to be implemented, the Android UI prototype stays true to the navigation flow.

Figure 7: Navigation Flow of the Proposed System

2.2.2  Login Screen

Table 6: Login Screen

Description / The following screenshot shows the app’s login page on the Android device.
Related Capability / CR-1 User Management
WC_3516, WC_3513
Pre-condition / Opening the Construction Meeting Minutes icon from the Android’s app page takes a user to the login screen.
Post condition / The user’s credentials are checked and if correct, user is logged into their profile and taken to their dashboard page if they are a general user. If the user is an administrator, they are taken to the select a project screen in order to select which project that they want to manage.

Figure 8: Login Screen

2.2.3  Signup Screen

Table 7: Signup Screen

Description / The following screenshot shows the Android application signup screen. A user can request to sign up to gain access to the app as either a general or administrative user.
Related Capability / CR-1 User Management
Pre-condition / From the login page, a user without an account selects the signup option.
Post condition / The user’s signup request is submitted and awaits administrator approval. Once an administrator approves the signup request, the user will be able to login to the app.

Figure 9: Signup Screen

2.2.4  Select Project Screen

Table 8: Select Project Screen

Description / The following screenshot shows the Android application select a project screen. The purpose of this screen is so an administrator can select which project they currently want to perform meeting minute actions for.
Related Capability / CR-2 - Meeting Minutes Management
WC_3713, WC_3707
Pre-condition / Logging in to an account with administrative privileges takes the user to this screen.
Post condition / A user is directed to the administrative dashboard for the selected project.

Figure 10: Select Project Screen

2.2.5  Administrator Dashboard Screen

Table 9: Administrator Dashboard Screen

Description / The following screenshot is of the administrator’s dashboard on the Android device. This is the main screen for an administrative user as it provides a list of actions an administrator can perform for the current project.
Related Capability / CR-2 - Meeting Minutes Management
Pre-condition / After an administrator logs in and selects a project they want to manage.
Post condition / The user is taken to the administrator dashboard where they are presented with various options they can perform for the current project.

Figure 11: Administrator Dashboard Screen

2.2.6  Select Meeting Category Screen

Table 10: Select Meeting Category Screen

Description / This screenshot shows the select a meeting category screen on the Android device.
Related Capability / CR-2 - Meeting Minutes Management.
Pre-condition / When an administrator selects to create a new meeting or edit a meeting from the dashboard they must select the type of meeting before proceeding to create or edit a meeting.
Post condition / Administrator is taken to the new meeting or edit meeting screen where they can create or edit a meeting of the selected type for the current project.