Using Docz To Create Project Charters

Using Docz To Create Project Charters

Documentation

Product managers can be project managers depending on the setup of the organization. For fast-paced organizations, the roles may be similar and can be done by the same person, while in relatively large organizations, the roles may be held by different people.

The main difference between a product manager and a project manager is that a product manager has a strategic responsibility to drive the development of products. In contrast, a project manager is responsible for overseeing the execution of those development plans with the teams.

Projects can range from creating a new feature for an existing product or coming up with fresh ideas to building from the ground up. One of the roles of project managers includes documentation. Documentation plays a vital role since it sets the stage for the project being worked on as well as provides answers to critical questions like:

  • Why is the project necessary for the business?
  • What are the project goals?
  • What are the deliverables?
  • Who are the stakeholders involved?
  • What resources are needed?

The project manager ensures transparency and clear communication through concise documentation. Two types of documentation used to track details of the project include:

  • Project proposals
  • Project charters

Project Proposals

A project proposal is a form of documentation created at the beginning of the project. Its purpose is to buy in all the stakeholders to start the project. A senior organizational leader creates the project proposal. The PM's role in the proposal is a follow-up to track the progress. Proposals may be presentations or simple emails.

Project Charters

A well-documented charter is a project manager's secret weapon to success because it outlines all the details for the project to accomplish its goals. The charter is a collaborative document that includes the views of all stakeholders while addressing concerns and keeps the team focused on the project goal.

Project charters vary in different organizations, which include combinations of the following:

  • Introduction/project summary
  • Goals/objectives
  • Business case/benefits and costs
  • Project team
  • Scope
  • Success criteria
  • Major requirements or key deliverables
  • Budget
  • Schedule/timeline or milestones
  • Constraints and assumptions
  • Risks
  • Objectives and key results
  • Approvals

Difference Between Project Proposals and Project Charters

Project proposals kick starts the project by buying in the stakeholders to move forward with the project while the project charters define the details of the project. The other difference is that charters serve as reference points throughout the project's development, while the proposal is used only at the earlier stages of the project.

DOCZ Use Case: Project Charter

Prerequisites

Install Node JS

Install NPM

npm init react-app project-charter
⚠️ If you run into any bugs while installing your create react app run the following commands, then create the app again
npm cache clean --force
npm install -g npm@latest
npm install -g create-react-app

step 2: Change into the directory of the charter

cd project-charter

step 3: install docz

npm install docz
⚠️ If you run into any EREOSLVE issue, run the following command, then install docz once more:
npm config set legacy-peer-deps true

Step 4: Creating our index files and adding content. Add an index.mdx file in src and clear all the other files since we will not use them.

Add the following code to your index.mdx

---
name: Hello World
route: /
---

# Hello peeps from Vee using  Docz!

Run the development server to see what we have created

npm run docz dev

Screenshot_2022-03-30_at_21.44.07.png

One of the files we have is a readme which we do not need. We will add a doczrc.js file to ignore files we do not need and add the title of the company we are preparing the charter for. We will add doczrc.js to the root of your folder.

This is what the doczrc.js will contain:

export default {
  title: "Athena Company Project Charter",
  description: "Mobile Application Interface Upgrade",
  ignore: ["README.md"],
};

The first item in project charters includes having the executive summary, which contains the objectives of what we want to achieve.

In our index.mdx file edit the name to have the name as `Mobile Application Upgrade'and add information about the project we will be working on.

---
name: Mobile Application Upgrade
route: /
---

Add the Executive Summary

# Executive Summary
 We aim to create a good user experience  using our mobile application to 
 retain our current clients and encourage new clients to use it.

The executive summary is a simple explanation of what the project will entail.

Project Goals are the goals defined as per the SMART metrics for the project, which are Specific, Measureable, Attainable, Relevant, and Time-bound.

## Project Goal
<details>
<summary> Increase number of users by 25%</summary>
Increase number of users by 25% by the end of the year by ensuring high-quality customer experience 
</details>

Deliverables are the intangible and tangible output that should be fulfilled by the end of the project's timeline.

## Deliverables
<li> Roll out the upgrade to all the users</li>
<li> Add feedback forums to provide insights on bugs and issues </li>
<li>Test the aesthetics of the application, check responsiveness and ease of use</li>

Business Case is the reason or purpose the company is undertaking the particular project.

## Business case
 We want to increase sales of our product by providing high-quality customer 
 experience and reduce order cancellations

Benefits, Costs and Budget details the resources needed in terms of costs and benefits of the project.

## Benefits, Costs and Budget
<details> 
<summary> Benefits </summary>
<li> Increase number of users by 25%, improve customer experience and 
reduce order cancellation by 5% .
</li>
</details>
<details> 
<summary> Costs </summary>
<li> Price of software licenses, time spent on hiring software developers
</li>
</details>
<details> 
<summary> Budget </summary>
<li> $200000
</li>
</details>

Scope and Exclusion includes tasks to be included and tasks to be excluded while working on the project.

## Scope and Exclusion 
<details> 
<summary> In-Scope </summary>
<li> Design of the new interface</li>
<li> Design handoff to the developers</li>
</details>
<details> 
<summary> Out-of-Scope </summary>
<li> Renewal of Microsoft office licenses </li>
</details>

Project Team stakeholders of the project

## Project Team
**Project Sponsor**: Director of Operations

**Project Lead**: Project Manager 

**Project Team**: Fulfillment Director, Quality Assurance Tester,  Financial Analyst, Human Resources Specialist,

**Additional Stakeholders**: VP of Customer Success, Account Manager, Investors

Measuring Success how to evaluate whether the project was a success.

## Measuring Success

<li> 25% increase in users by end of the year </li>
<li>Reduce order cancellations by 5% by end of the year</li>

This is how your charter should look like: Screenshot_2022-03-31_at_01.29.53.png

Screenshot_2022-03-31_at_01.30.07.png

Deploying to Netlify

Once you are done building your product charter, you want to be able to share it with your team or other stakeholders.

In this case, we will deploy our charter to Netlify.

Step 5: Build your project charter

npm run docz:build

Optional step add the following lines to your doczrc.js file that you created previously:


export default {
  title: "Athena Company Project Charter",
  description: "Mobile Application Interface Upgrade",
  ignore: ["README.md"],
    dest: '/docs', //docs is the file created after the build
    base: '/docs',
};

Step 6: Create an account on Netlify if you do not already have one.

Screenshot_2022-04-11_at_17.28.18.png

Step 7: After logging in, navigate to the site's page.

Screenshot_2022-04-11_at_17.35.52.png

Step 8: Depending on what you used to sign in between GitHub/GitLab/Bitbucket, the project should have already been on either platform to be able to import it. If not, create it so that you can import it.

This project was on Github; hence click on import an existing project.

Screenshot_2022-04-11_at_17.36.12.png

Step 9: Connect the Git provider

Screenshot_2022-04-11_at_17.36.41.png

Step 10: Pick the repository

Screenshot_2022-04-11_at_17.37.03.png

Step 11: Add the build settings

The base directory is the root folder where your project is, and no need to add anything in that field.

Add the build command npm docz build

Add the publish directory. This directory is the file generated after you built the project locally.

Click on Deploy site.

Screenshot_2022-04-11_at_17.53.21.png

The project if deployed successfully, should be shown. You can change the name settings if you like.

Screenshot_2022-04-11_at_17.38.49.png

You can see the live site here: Mobile Application Upgrade

Documentation is essential to an organization. Project charters are vital as they indicate the scope, milestones, and stakeholders involved. Project charters are prepared by product managers and used by the whole team. We have explored the differences between product and project managers, project proposals, and project charters through this article. The bread and butter is that we have learned how to create a project charter using Docz and deployed it to Netlify.