NOTE:

This is in document is still being worked on, to comment, click this link to add your comments: https://docs.google.com/document/d/1sTfO8D8ez37a535254dJmMJ5jTgA4eVwsqVGCtUdPjk/edit?ts=5dd50986

Last Updated: 2019-11-25

Abstract

Netfluence will be launching a product called VPB Lite. VPB Lite will be the first product to be released in production this year. VPB Lite will be flexible and easily editable: whereas most website templates are inflexible and difficult to edit (including many templates found on the HubSpot marketplace), our unique development approach dedicates significant time to ensuring a client’s marketing team has an easy-to-use graphic user interface (GUI) for each individual page section, making on-the-fly edits to both content and layout incredibly easy. This allows non-developers to easily edit content or spin up new page designs using just this one, single Visual Page Builder template.

Also, the ability to ‘tweak’ existing modules’s layouts, height, and width (in addition to colors/fonts/images/text content) allows for highly creative possibilities for marketers to generate new page layouts and designs, with layouts that are fresh- yet still precisely aligned- with a client’s predefined style-guide. This significantly increases the lifespan of a brand’s website design cycle

Narrative Requirements

CLIENT NARRATIVE:

As a client with an existing HubSpot account, all pages (both landing and website pages) are created using default templates that only contain basic modules. These modules are difficult to edit and requires a significant amount of development time to customize. I need to have a fully customizable template and modules, with an easy-to-use drag and drop features. (VPB Lite). The Buyer’s Journey will have 2 phases, as  discussed in detail below.

I - Purchasing

• As soon as the client purchases VPB Lite:

1. “Thank You” message with receipt will be sent to the client’s email and will be displayed on the same page
   
   
2. Another email will be sent to the client that contains a CTA to authenticate Netfluence to have access to the client’s portal
   
   
3. Client will go through the HubSpot authentication process, giving Netfluence access to install the VPB Lite to their portal
   
   
4. After the authentication process, a confirmation email will be sent to the client that says VPB Lite is loaded in their portal. This email will contain a CTA (Get Started) that will open a page containing the tutorial.

II -  Configuration, Staging, Editing and Publishing Of Pages

• Getting Started (Wizard/Tutorial) Page: This happens right after the purchase phase. This will contain video instructions on how to use Netfluence VPB Lite. All video tutorial will have a brief description of the video and a link (on their own portal) to the page where they can work on the actual steps. 

1. 1. Introduction to the VPB Lite Module
   2. How to use the Website Styling Configuration
   3. How to create a new landing/website page using Netfluence VPB Lite
   4. How to select a color scheme or typography using a 3rd party color palette generator link: 
      https://www.canva.com/colors/color-palette-generator/ https://color.adobe.com/create/
   5. How to stage, edit, and publish a page
   6. If the client did not find the answers in the FAQ page, the client should have the ability to submit a support ticket to Netfluence via a Contact Us form within the FAQ page.
   7. Create an FAQ page, this page is where client’s will find answers to recurring questions regarding the VPB Lite product. Integrate the FAQ directly into the product page, this will allow easy access to the page.

• The Website Styling Configuration Page: This is where the client will need to add/adjust/edit Font, Typography, Themes, Header and Footer settings. At the same time a page will be provided so changes made can be reviewed easily. These settings will be applied as the default values of the VPB template. The client must be able to have a visual cue that the setting has been saved and will be used as default values.
• Create, Stage, Edit, and Publish a Page: At this point, the client is ready to stage or create a new page based on the general setting that was set on the Website Styling Configuration page. Instructions or tutorial on how to Stage, Edit and Publish a page can be found on the Getting Started (Wizard/Tutorial) Page. 

NETFLUENCE DEVELOPER NARRATIVE [DRAFT]:

The VPB Lite should be easy to use and should be reusable on different client portals. As a developer, the modules that I will develop should have the correct process and documentation. All the modules should have the right naming conventions, folder structure, and deployment process. I have to make sure that all modules should pass visual and functional QA.

SIGNIFICANT DOCUMENTS FOR VPB LITE DEVELOPMENT

1. VPB Lite Project Timeline - Managed by Arvin and Jj:

https://docs.google.com/spreadsheets/d/15CotRDfHcbWu6N4QboW-Sq2eKsnOsCP_f_gyXg-HL1Y/edit#gid=82402830

- Project Timeline and status.
- This includes links to GUI & technical documentation.

2. VPB Lite Test Plan - Managed by Jeremy:

https://docs.google.com/spreadsheets/d/1666S59PWlRW2O6SoWk2d85tvXpGdVWYfjCvVRqWlWdM/edit?ts=5de601dd#gid=233365635

- This includes what’s in scope for each release.
- This includes a listing for all module-specific test cases.

3. Client Interaction Template - Managed by Pjay:

https://docs.google.com/document/d/1f6Cj8IiYbFvXZwhBrpyHscFssgfmyxJ-X89S_oELrqg/edit?pli=1#

- This includes the plan for how to manage the client, client meeting schedules, agendas and follow up email templates after each meeting is held.

Business Requirements

A) Document the VPB module development plan and action items

Documentation simplifies team collaboration. Developers will be all on the same page before starting the development process and will have a plan with accurate LOE’s. 

1. Identify module functionality based on requirements
   
   
2. List necessary module fields
   
   
3. Check for existing module implementation
   
   
4. Assign an LOE for each action item specified
   
   
5. Have the Developer Lead review plan and action items with LOE
   
   
6. All approved plan and action items consolidated in a single document (could be an internal SOW)
   
   
   

1. Identify the commonly used modules to be included in VPB Lite
   
   
2. Commit the bare-bone modules that are needed for VPB Lite. The list can be found in this link: https://docs.google.com/spreadsheets/d/1MKcIOHGnGgkKfQEZNV5_Ql2wi6quBuG6OKJdpmytdGU/edit#gid=696804452
   
   
3. Know the basic commands to fetch, push changes to a HubSpot portal. This enables our team to commit changes to the repository. The VPB lite modules should appear in this repository as soon as all files have been committed:
   https://bitbucket.org/netfluencecorp/vpb/src/master/
   
   
4. All modules should have the correct coding folder structure
   
   
5. Modules should follow general functionality and structure. [Insert Link Here]
   
   
6. Modules should pass the visual and functional QA

The Website Styling Configuration Page for VPB Lite will allow global settings for all of the styling aspects of VPB Lite modules. There will be a GUI where the user can update the typography and styling of every element on multiple pages through a single page. This will help the users to come up with the right styling for the page they will develop with VPB lite modules.

1. Develop a Website Styling Configuration Page: This is page is where the user will set up their Typography, Color, etc. on a page  level edit.
   
   
2. Create a Site Setting Page Module: This is the module inside the Website Styling Configuration Page, this module consists of fields where the settings for Typography, Color, Logo, etc.
   
   
3. HS Site Setting JSON Formatted Code: This is a JSON code that consists of data (Page Name, Publish Date, Modules,etc.) or content of the actual Page(Website or Landing).
   
   
4. VPB Module Styling Overrider: This module Converts the JSON code (HS Site Setting JSON Formatted Code) into a CSS
   
   
5. VPB Template: A template where all VPB Modules and VPB Module Overrider lives.

• Detailed documentation of Website Styling Configuration architecture is found on this link: https://internal.netfluencecorp.com/global-styling-configuration-for-vpb-lite

D) Create a video tutorial and instruction manual

This will be created using Vidyard. The video tutorial and instruction manual should contain the following:

1. How to access or verify that the VPB Lite is installed in the client’s portal
   
   
2. How to add or edit typography, color, etc. on the Website Styling Configuration Page.
    
3. Creating Landing or Website Page
   
   
   1. How to create a landing or website page using VBP Lite template
      
      
   2. How to setup a content staging page
      
      
   3. How to take your staged site live
      
      
4. Editing New or Existing Page
   
   
   1. How to remove unwanted modules or page sections
      
      
   2. How to reorder modules or page sections
      
      
   3. How to add VPB Lite module to a page
      
      
   4. How to add VPB Lite module to a page using drag and drop
      
      

E) Develop an FAQ page for VBP Lite 

This will contain basic list of answers to any possible questions or concern that tend to occur when using VPB Lite. 

1. Create a list of common and recurring support questions
   
   
2. Write a Clear Answer for Each Question
   
   
   1. Writing the answers using clear, easy-to-understand language
      
      
3. Use Clear Navigation
   
   
   1. Organizing the questions on a page with clear navigation
      
      
4. Place the Page Prominently on our Page
   
   
   1. Placing the page somewhere easily accessible to the client
      
      
5. Adjust FAQ as Needed

Action Items