ModuleCS104 – WEB DESIGN PROJECT

Chapter 2
Project Planning and Management for Web Design
2.1 Project Planning, Scheduling, and Management Techniques
Objective: To equip students with fundamental techniques and tools for effective project planning, scheduling, and
management. This includes understanding and applying Work Breakdown Structure (WBS), Gantt Charts, and Agile
Methodologies in project management.

Introduction to Project Planning and Scheduling

Importance of Project Planning

➢ Definition: The process of defining project goals, determining the steps to achieve them, and allocating
resources.

➢ Benefits: Helps in setting clear objectives, managing resources effectively, and tracking progress.

Overview of Project Scheduling

➢ Definition: The process of organizing tasks and activities within a timeline.

➢ Purpose: Ensures timely completion of project milestones and deliverables.

1. Work Breakdown Structure (WBS)

Definition and Purpose

➢ What is WBS?

✓ A hierarchical decomposition of a project into smaller, more manageable components or work

packages.

✓ Helps in organizing and defining the total scope of the project.

➢ Benefits of WBS:

✓ Clarity: Provides a clear outline of what needs to be done.

✓ Responsibility: Assigns specific tasks to team members or departments.

✓ Control: Helps in monitoring and controlling project progress.

Creating a WBS
Steps:
1. Define Major Deliverables: Identify the main outcomes or deliverables of the project.
2. Decompose Deliverables: Break down each deliverable into smaller, manageable components.

3. Assign Work Packages: Define the tasks required to complete each component.

4. Verify and Refine: Ensure completeness and accuracy of the WBS.

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLLEGE, COLLEGE OF COMPUTER STUDIES
1
 ModuleCS104 – WEB DESIGN PROJECT
Example:

Project: Website Redesign

1. Planning

1.1. Requirements Gathering

1.2. Project Charter

2. Design

2.1. Wireframes

2.2. Mockups

3. Development

3.1. Front-End Development

3.2. Back-End Development

4. Testing

4.1. Quality Assurance

4.2. User Acceptance Testing

5. Deployment

5.1. Launch

5.2. Post-Launch Support

● Resource: Work Breakdown Structure (WBS) Guide

2. Gantt Charts
Definition and Purpose

● What is a Gantt Chart?

o A visual tool for planning and scheduling projects, showing tasks, durations, and dependencies on a
timeline.

● Benefits of Gantt Charts:

o Visualization: Provides a clear visual representation of project timelines and task dependencies.
o Tracking: Helps track progress and identify potential delays.
o Coordination: Facilitates better coordination among team members.
Creating a Gantt Chart

Steps:

1. List Tasks: Identify all tasks required to complete the project.

2. Determine Durations: Estimate the time required for each task.

3. Define Dependencies: Identify relationships between tasks (e.g., Task A must be completed before
Task B).

4. Plot on Timeline: Create a visual timeline with tasks, durations, and dependencies.

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLLEGE, COLLEGE OF COMPUTER STUDIES
2
 ModuleCS104 – WEB DESIGN PROJECT
Example Layout:

Task Start Date End Date Duration Dependencies

Planning 01/08/2024 15/08/2024 2 weeks -
Design 16/08/2024 30/09/2024 6 weeks Planning
Development 01/10/2024 15/11/2024 6 weeks Design
Testing 16/11/2024 30/11/2024 2 weeks Development
Deployment 01/12/2024 05/12/2024 1 week Testing

● Resource: Gantt Chart Tutorial

3. Agile Methodologies
Definition and Purpose

➢ What is Agile?

o A set of principles for project management that emphasizes iterative development, collaboration, and
flexibility.

➢ Benefits of Agile Methodologies:

o Flexibility: Adapts to changing requirements and feedback.

o Collaboration: Promotes teamwork and communication.

o Incremental Progress: Delivers work in small, manageable increments.

Key Agile Methodologies

➢ Scrum:

o Sprints: Time-boxed iterations where work is completed and reviewed.

o Roles: Scrum Master, Product Owner, and Development Team.

o Artifacts: Product Backlog, Sprint Backlog, and Increment.

o Events: Sprint Planning, Daily Stand-ups, Sprint Review, and Sprint Retrospective.

➢ Kanban:

o Visual Boards: Uses visual boards to manage and track work.

o Workflow: Focuses on continuous delivery and optimizing workflow.

o Limits: Sets limits on work in progress to improve efficiency.

➢ Resource: Scrum Guide | Kanban Guide

Hands-On Lab

Lab Activity: Creating Project Artifacts

➢ Objective: Apply WBS, Gantt Charts, and Agile methodologies to a sample project.

➢ Tasks:

1. Create a WBS for a given project scenario.

2. Develop a Gantt Chart to visualize the project schedule.

3. Outline a basic Agile framework (e.g., Scrum) for the project.

Discussion and Q&A

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLLEGE, COLLEGE OF COMPUTER STUDIES
3
 ModuleCS104 – WEB DESIGN PROJECT
➢ Topics: Challenges faced during the lab, tool preferences, and additional resources.

Summary and Key Takeaways

➢ Work Breakdown Structure (WBS): A hierarchical breakdown of project tasks and deliverables.

➢ Gantt Charts: Visual tools for scheduling and tracking project progress.

➢ Agile Methodologies: Flexible and collaborative approaches to project management.

Homework/Assignment:
➢ Develop a WBS and Gantt Chart for a project of your choice. Outline how you would apply Agile methodologies
to manage this project. Submit the WBS, Gantt Chart, and Agile framework description.

Project Planning and Scheduling Example

Project: Roxas Beach Resort Website

Objective: Develop a new website for Roxas Beach Resort to enhance its online presence, provide information about
the resort, and facilitate online bookings.

1. Work Breakdown Structure (WBS) 3.2. Back-End Development

W WBS Level 1: Website Development - 3.2.1. Database Setup

Planning - 3.2.2. Booking System Integration

1.1. Requirements Gathering - 3.2.3. Content Management System (CMS) Setup

1.2. Project Scope Definition Testing

1.3. Stakeholder Meetings 4.1. Functional Testing

Design 4.2. Usability Testing

2.1. Wireframing 4.3. Performance Testing

2.2. Mockups 4.4. Security Testing

2.3. Design Approval Deployment

Development 5.1. Final Review

3.1. Front-End Development 5.2. Go Live

- 3.1.1. Home Page 5.3. Post-Launch Monitoring

- 3.1.2. About Us Page Maintenance

- 3.1.3. Rooms and Rates Page 6.1. Bug Fixes

- 3.1.4. Booking Page 6.2. Content Updates

- 3.1.5. Contact Us Page 6.3. Regular Backups BS Level 1: Website Development

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLLEGE, COLLEGE OF COMPUTER STUDIES
4
 ModuleCS104 – WEB DESIGN PROJECT
2. Gantt Chart

Gantt Chart for Roxas Beach Resort Website

Task Start Date End Date Duration Dependencies

Planning 01/08/2024 07/08/2024 1 week -

Requirements Gathering 01/08/2024 03/08/2024 3 days -

Project Scope Definition 04/08/2024 05/08/2024 2 days Requirements Gathering

Stakeholder Meetings 06/08/2024 07/08/2024 2 days Project Scope Definition

Design 08/08/2024 21/08/2024 2 weeks Planning

Wireframing 08/08/2024 11/08/2024 4 days -

Mockups 12/08/2024 16/08/2024 5 days Wireframing

Design Approval 17/08/2024 21/08/2024 5 days Mockups

Development 22/08/2024 25/09/2024 5 weeks Design

Front-End Development 22/08/2024 12/09/2024 3 weeks -

Home Page 22/08/2024 26/08/2024 5 days -

About Us Page 27/08/2024 31/08/2024 5 days Home Page

Rooms and Rates Page 01/09/2024 05/09/2024 5 days About Us Page

Booking Page 06/09/2024 10/09/2024 5 days Rooms and Rates Page

Contact Us Page 11/09/2024 12/09/2024 2 days Booking Page

Back-End Development 13/09/2024 25/09/2024 2 weeks Front-End Development

Database Setup 13/09/2024 17/09/2024 5 days -

Booking System Integration 18/09/2024 21/09/2024 4 days Database Setup

CMS Setup 22/09/2024 25/09/2024 4 days Booking System Integration

Testing 26/09/2024 02/10/2024 1 week Development

Functional Testing 26/09/2024 27/09/2024 2 days -

Usability Testing 28/09/2024 29/09/2024 2 days Functional Testing

Performance Testing 30/09/2024 01/10/2024 2 days Usability Testing

Security Testing 02/10/2024 02/10/2024 1 day Performance Testing

Deployment 03/10/2024 05/10/2024 3 days Testing

Final Review 03/10/2024 04/10/2024 2 days -

Go Live 05/10/2024 05/10/2024 1 day Final Review

Post-Launch Monitoring 06/10/2024 13/10/2024 1 week Go Live

Maintenance 14/10/2024 Ongoing Ongoing Post-Launch Monitoring

Bug Fixes 14/10/2024 Ongoing Ongoing -

Content Updates 14/10/2024 Ongoing Ongoing -

Regular Backups 14/10/2024 Ongoing Ongoing -

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLLEGE, COLLEGE OF COMPUTER STUDIES
5
 ModuleCS104 – WEB DESIGN PROJECT
3. Applying Agile Methodologies

Agile Framework: Scrum

3.1 Agile Framework Description:

1. Roles:

● Product Owner (PO): Defines and prioritizes the Product Backlog. Ensures the website meets stakeholder
requirements.

● Scrum Master: Facilitates Scrum processes, removes impediments, and ensures the team follows Scrum
practices.

● Development Team: Works on website features and functionalities, including front-end and back-end
development.

2. Events:

● Sprint Planning: At the beginning of each Sprint, the team selects Product Backlog items (features) to work
on during the Sprint. For the Roxas Beach Resort Website, each Sprint focuses on a specific aspect of
development.

● Daily Scrum: A 15-minute daily meeting where team members discuss progress, plans for the day, and any
blockers. Helps keep the project on track and ensures quick resolution of issues.

● Sprint Review: Held at the end of each Sprint to demonstrate completed work to stakeholders and gather
feedback. For example, after completing the Profile Creation and Viewing functionalities, the team showcases
these features.

● Sprint Retrospective: A meeting after the Sprint Review where the team reflects on the Sprint, discusses what
went well, what could be improved, and identifies actions for improvement in the next Sprint.

3.3 Implementation in Project:

● Sprints: The project is divided into Sprints, each lasting 2 weeks. For example, Sprint 1 focuses on "Profile
Creation" and "Profile Viewing," while Sprint 2 focuses on "Profile Editing" and other tasks.

● Backlog Management: The Product Owner maintains and prioritizes the Product Backlog based on
stakeholder feedback and project needs.

● Incremental Delivery: The team delivers incremental features at the end of each Sprint, allowing for ongoing
feedback and adjustments.

Submission:

● Work Breakdown Structure (WBS): [Provided Above]

● Gantt Chart: [Provided Above]

● Agile Framework Description: [Provided Above]

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLLEGE, COLLEGE OF COMPUTER STUDIES
6
 ModuleCS104 – WEB DESIGN PROJECT
2.2 Team Roles and Responsibilities
In a web design project, various team roles are essential
to ensure the project's success. Each role contributes
unique skills and responsibilities, working together to
achieve the project goals. Here’s an overview of typical
roles and their responsibilities, including a
documentation role:

1. Project Manager (PM)

Responsibilities:

➢ Project Planning: Develops the project plan,

including timelines, milestones, and
deliverables.

➢ Resource Management: Allocates resources and manages the budget.

➢ stakeholder Communication: Acts as the primary contact for stakeholders and ensures their requirements are
met.

➢ Risk Management: Identifies and mitigates potential risks to the project.

➢ Monitoring and Reporting: Tracks project progress, prepares status reports, and ensures adherence to the
project plan.

Skills Required:

➢ Strong leadership and organizational skills.

➢ Proficiency in project management tools (e.g., MS Project, Asana)

➢ Excellent communication and negotiation skills

2. Product Owner (PO)

Responsibilities:

➢ Requirement Gathering: Defines and prioritizes the product backlog based on stakeholder requirements and
market needs.

➢ Vision and Strategy: Communicates the project vision and goals to the team.

➢ Backlog Management: Maintains and prioritizes the backlog, ensuring that the most valuable features are
developed first.

➢ Stakeholder Liaison: Acts as the liaison between stakeholders and the development team.

Skills Required:

➢ Deep understanding of the product and market.

➢ Strong prioritization and decision-making skills

➢ Effective communication and negotiation skills

3. UX/UI Designer

Responsibilities:

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLLEGE, COLLEGE OF COMPUTER STUDIES
7
 ModuleCS104 – WEB DESIGN PROJECT
➢ User Research: Conducts research to understand user needs, behaviors, and pain points.

➢ Wireframing and Prototyping: Creates wireframes, mockups, and prototypes to visualize design concepts.

➢ UI Design: Develops the user interface design, ensuring a visually appealing and user-friendly experience.

➢ Usability Testing: Conducts usability testing to validate design decisions and gather user feedback.

Skills Required:

➢ Proficiency in design tools (e.g., Adobe XD, Sketch, Figma)

➢ Knowledge of design principles and best practices

➢ Experience with user research and usability testing

4. Front-End Developer

Responsibilities:

➢ Implementation of Design: Converts design mockups into functional HTML, CSS, and JavaScript code.

➢ Responsive Design: Ensures the website is responsive and works well on different devices and screen sizes.

➢ Performance Optimization: Optimizes website performance, including load times and responsiveness.

➢ Cross-Browser Compatibility: Ensures the website functions correctly across various web browsers.

Skills Required:

➢ Proficiency in HTML, CSS, and JavaScript

➢ Experience with front-end frameworks (e.g., React, Angular)

➢ Knowledge of responsive design techniques

5. Back-End Developer

Responsibilities:

➢ Server-Side Development: Develops and maintains the server-side logic, database interactions, and server
configuration.

➢ Integration: Integrates the front-end with the back-end, including APIs and third-party services.

➢ Database Management: Designs and manages the database schema and performs data operations.

➢ Security: Ensures that the website is secure from vulnerabilities and data breaches.

Skills Required:

➢ Proficiency in server-side programming languages (e.g., PHP, Python, Node.js)

➢ Experience with databases (e.g., MySQL, MongoDB)

➢ Knowledge of security best practices

6. Quality Assurance (QA) Tester

Responsibilities:

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLLEGE, COLLEGE OF COMPUTER STUDIES
8
 ModuleCS104 – WEB DESIGN PROJECT
➢ Testing: Develops and executes test cases to identify bugs and issues in the website.

➢ Bug Reporting: Logs and tracks defect and ensures they are addressed by the development team.

➢ Regression Testing: Performs regression testing to ensure new changes do not break existing functionality.

➢ Performance Testing: Tests website performance, including load times and responsiveness.

Skills Required:

➢ Experience with testing tools (e.g., Selenium, JIRA)

➢ Strong analytical and problem-solving skills

➢ Attention to detail and thoroughness

7. Documentation Specialist

Responsibilities:

➢ Documentation Creation: Develops and maintains project documentation, including requirements, design
specifications, user guides, and technical manuals.

➢ Version Control: Manages and updates documentation as the project progresses, ensuring it reflects the
current state of the project.

➢ Knowledge Management: Organizes and stores documentation in a structured manner, making it accessible
to all team members.

➢ Compliance: Ensures that documentation complies with relevant standards and regulations.

Skills Required:

➢ Strong writing and editing skills

➢ Proficiency in documentation tools (e.g., Microsoft Word, Confluence)

➢ Attention to detail and accuracy.

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLLEGE, COLLEGE OF COMPUTER STUDIES
9