Project Brief

Project title Design & Develop Front End of Community Portal

Module Name UI Frameworks

Course Name

Project Start date

Project Submission Date

Index
1. Purpose of this Project
2. Project Pre-requisites
3. Project Outcomes
4. Project Definition
5. Project Task List
6. Project Evidences & Outcomes
7. Project Guidelines
8. Project Assumptions
9. Project Technical Environment
10. Sample Questions for Assessor
1. Purpose of this Project
This Project is used for Summative Assessment of student in the Module ‘UI
Frameworks’ of the ITSF Course ‘Advanced Certificate in Web Development”
This Project considers the skills required to design, develop, implement &
document Angular based community portal website using JEE.
The backend section of the website will be developed in Module 5 using JEE. For this
project, students have to develop the front end using angular framework.

2. Project Pre-requisites
You should have completed the following activities before
• Viewed and understood all the e-content related to the module
• Completed all the MCQ tests related to the module
• Completed all the Assignment / Lab Exercises of the module
You should have access to the Project Brief, Project Report template and Project
Presentation template and should understand how to use the templates
You have access to the Project Technical Environment
You should understand the number of milestones and what are the milestones to be
presented for each of the Tutoring Session
To implement the project, you will need a
a. Angular Framework Installed
b. Visual Studio Code
c. Microsoft Word
d. Microsoft PowerPoint

3. Project Outcomes & Deliverables

You should perform all the tasks in the Project Task List and prepare the following
during the project:
• Implement the project on the project technical environment and prepare
Angular Components, Javascript, Images & Styles.
• Prepare a Project Report as per pre-defined template
• Prepare a Project Presentation as per pre-defined template

4. Project Definition
You have been approached by ‘ABC Jobs Pte Ltd’ as a website developer to develop
a community portal for Software Developers. The project will be carried over
through Module 3, Module 4, Module 5 and Capstone project. For this module the
scope is to Design, Develop, Implement Front End RIA Application.

The Scope of the Project is to design a Community Portal Similar to Linkedin.com.

Users will be able to register in the portal using the Registration Page. Users of the
 portal can search for other users using various parameters such as First Name,
Last Name, Company Name, City & Country. Users will be able to view the Public
Profile of users after searching them. The portal allow users to login, request for
forgotten password and Update their profile information

The scope of the project in this modules is for development of GUI front end using
HTML, Javascript, CSS & Angular.

4.1 The overview of the project is as below

There are 2 types of users in this Community portal. They are
1. Software Programmer
2. Administrator

Software Programmer should be able to perform following functions in the portal

1. Allow the programmers to register in the portal, show a thank you page & send a
registration confirmation email.
2. Search & Find Other Programmers after login and view their profile.
3. Provide Login Page
4. Provide password retrieval functionality.
5. Update their Profile after logging in.

Following Functionality is part of Database Design & Will be enhanced as features as

required in the Capstone Project, Depending on time availability.

6. Send Messages to Each Other on the Portal

7. Create Threads & Post Replies to a Thread
8. Post Job Opportunities in the Portal

Administrator should be able to perform following functions in the portal

1. Administer user data.
2. Send bulk email inviting programmers to register on the community portal

The portal consist of the following Key pages (For Reference)

1. Community Portal Home Page
2. Registration Page
3. Registration Confirmation Page
4. Update Profile Page
5. Search Users Page
6. List Search Results
7. Public Profile Page
8. Registration Confirmation Email
9. Login Page
10. Forget Password Page
11. Design the Forget Password Confirmation Page

Following Functionality is part of Database Design & Will be enhanced as features as

required in the Capstone Project, Depending on time availability.
12. Send Messages
 13. Read Messages
14. Post in Message Board
15. List Message Board
16. Read A Thread
17. Post Job Opportunities
18. List Job Opportunities & Responses

5. Project Task List

You should perform the following tasks as part of the Project:

Task 1 (A1, K1)

1. Briefly explain techniques and methods for gathering and analysing user feedback.
2. Find at least 2 websites which are similar to community portal and visit and use them
and record your experiences.
3. Include it as part of Project Presentation

Task 2 (A2, K2)

1. Discuss, study and analyse the user experience based on the observations done in Task
1.
2. Study the experience for 2 to 3 scenarios
3. Include it as part of Project Report

Task 3 (A3)
1. Identify the performance levels and gaps between user experience in the study & desired
user experience.
2. Measure the level of user engagement & stickiness with the product.
3. Document it as part of Project Report

Task 4 (A4)
1. Develop & document 3 metrics to measure the user experience.
2. Create Bootstrap HTML along with angular pages for the proposed pages and get
feedback from mentor and document them.
3. Document it as part of Project Presentation

Task 5 (K3, K4)

1. Create the steps in User Interaction process for various scenario.
2. Create a flow chart for user interaction.
3. Document it as part of Project Presentation.

Task 6 (A5)
1. In the Websites study’s get the general user response from one other user.
2. Document the general user response to the product as part of Project Presentation.
Task 7 (A6)
1. Create a Prototype for the proposed system, with at least 5 screens
2. Get the user response and classify them to various types.
3. Screen capture the prototype and include it as part of Project Presentation

Task 8 (A7)
1. Demonstrate and let the users give feedback on prototype and document them
2. Make suggestions to improve the user experience and implement them in the prototype
3. Include it as part of Project Presentation

Task 9 (K5, K6, A8)

1. Create 3 Usability tests and execute the usability tests with a user
2. Get the users use the modified prototype
3. Gather feedback and measure its technical viability and effectiveness
4. Include it as part of Project Report

6. Project Evidences

Knowledge / Ability
Evidence Summary of evidence required by student which has to be
checklist incorporated in the Project Report or Project Presentation

Provide a brief writeup on analyzing & gathering user A1, K1

Task 1 feedback, Gather feedback from user. Document them in
Project Presentation
A2, K2
Study the user experience & document them in Project
Task 2
Report.

Identify the performance level & gaps between user A3

Task 3 experience & desired user experience along with level of
user engagement and document it in Project Report
A4
Develop & document 3 UX metrics and document them in
Task 4 Project Presentation.

K3, K 4
Create the steps in User Interaction Process along with the
Task 5
flow chart and document them in Project Presentation.

A5
Get the user response & document them in Project
Task 6
Presentation.

Create Prototype of the proposed system with at least 5 A6

Task 7 screens, screen capture and document them in Project
Presentation
 Gather feedback for the prototypes and document, make A7
Task 8 suggestions for improvement and document them in
Project Presentation.
K5, K6, A8
Create 3 usability tests and test them with users and
Task 9
document them in Project Report

7. Project Guidelines
You should follow the below guidelines while implementing the Project:
• Implement the project in the technical environment specified in the Project
brief
• Follow the format specified for Project Report and Project Presentation
• The project report and presentation should be submitted at least 2 days before
the date of Summative Assessment date
• Present the Milestones in every Tutoring Session and seek the Tutor’s
feedback and review. Incorporate the feedback in your project.
• Attach all project evidences for each milestone as part of your Project report

8. Project Assumptions
You can make following assumptions while implementing the project:
o Create Angular Project & Develop Community Portal Dynamic Website
Front End.
o Use the HTML Pages Developed

9. Project Technical Environment

The student should perform the project in the following environment
o Angular
o HTML, CSS & Javascript
o Apache Web Server
o Visual Studio Code
o Microsoft Word
o Microsoft Powerpoint