Armtec Website Flowchart

Transcription

1 Armtec Website Flowchart INTRODUCTION: The following document details the page layout and functionality for your web site project. Your website is displayed in a flowchart format, with each web page represented in a coloured box. Lines connecting the boxes indicate a navigation or information flow. The boxes are colour coded to indicate functionality, the colour legend is listed below: WHITE BOX: Static Web Page with text and graphics GREEN BOX: This indicates a webpage controlled by the Content Management System (CMS) the ability to manage text and graphics using an online HTML editor. BLUE BOX: This indicates a web page that contains an application. Applications are normally systems that manage data or perform a particular function. These pages may also contain CMS content RED BOX: A web page that contains multimedia content, such as Flash animation, video, or audio EDITS: This document will serve as the primary guideline for the full development of your website. It is imperative that all functions and pages are listed in this document as any changes requested post approval will be subject to additional charges. This document will supersede any existing proposals or lists of functionality and will be considered the final approved specifications for your website development project. Please review this document carefully and submit any changes to Rebel Trail either via or fax (we do not accept changes over the phone). When making changes, please be as specific as possible and reference page code numbers where applicable. If no changes are required, then please sign and date each page of this document and send by fax to Rebel Trail at Rebel Trail will begin the development of your site as soon as your approval is given. GREY BOX: This indicates a section heading, or button from which a drop down menu of subsections is available. No actual content is stored here. Each box will have a code number assigned to it (i.e ) for easy reference during development. Any web pages that are coloured either Green or Blue will have their functionality documented in subsequent pages following the flowchart. Page 1

2 Armtec Website Flowchart Notes All Green Boxes A green box represents web page content that is controlled by a Content Management System (CMS) The CMS provides the ability to maintain text, graphics, hyperlinks, and PDFs on a web pages as well as standard text editing functions. All White Boxes Static content information that is not editable or link to an alternate system All Blue Boxes General Notes Mobile device compliance Responsive design English admin system English / French public website All content to be input by client into CMS All pages to use breadcrumb style text navigation Out Of Scope Items: Mega menu style navigation similar to Lowes.ca for both main site and responsive site Responsive site will contain additional subcategory pages for products section All online forms will be developed by client using Gravity Forms a mechanism must be put in place where these forms can be integrated into website and styled accordingly. Addition of searchable library in 4.1: Case Studies Addition of searchable system in 4.2: Product Brochures Addition of dynamic filters in 4.1 Case Studies, 4.2 Product Brochures, 4.3 Technical Documents Contains either database connectivity, or other dynamic functionality. Each blue box will be described in detail on the following pages All Grey Boxes Section or subsection headers that do not perform any function or contain any information Page 2

3 Armtec Website Flowchart Home Page 1.0 French 1.1 Search 1.2 My Location 1.3 MAIN NAVIGATION Products 2.0 Markets 3.0 Knowledge Portal 4.0 Company Info 5.0 Contact Us 6.0 Product Detail Page 2.1 Market Detail Page 3.1 Case Studies 4.1 Company Profile 5.1 Request a Quote 6.1 Product brochures 4.2 History 5.2 Contact a Sales Rep 6.2 Specifications Technical Documents 4.3 Management Team 5.3 General Question 6.3 Inquiry Forms Webinars 4.4 Upcoming Webinars News 5.4 Tools Videos 4.5 Library Affiliations 5.5 Lunch & Learns 4.6 Careers 5.6 Footer: Events 4.7 Locations 5.7 Legal Notices 7.1 Social Media 7.2 Text Links 7.3 Design Assist Request 4.8 Page 3

4 Armtec Website Flowchart Front End ( ) 1.0 Home Page 1.2 Search 1.3 My Location Large graphical slide show area with animated transitions and text overlay. Welcoming Area System will auto detect user s location (province and country from Canadian provinces plus options for USA and International) and pass this variable to 1.3. This can be modified in 1.3 Searches all content and databases (products, news, etc) using simple keyword search Clicking on this button will invoke a drop down menu with province selections as well as USA and International Allows user to change location from Canadian provinces plus options for USA and International user clicks on a region to select their location. 2.0 Products (regular device) For regular devices (non mobile) hovering the mouse on the product button will invoke a drop down menu of approx 20 categories when hovering over a category a mega menu will display that lists all of the subcategories and products Clicking on Product will display Product Detail Page (2.1) Includes link to View All Products which is a page that lists all products alphabetically. Clicking on a product title will display Product Detail Page (2.1) Style will be similar to that of lowes.ca (example to right) Page 4

5 Armtec Website Flowchart Front End ( ) 2.0 Products (mobile / responsive) 2.1 Product Detail Page Product Categories Product Sub Categories 1 Drop down list of all product categories (approx 20) Use of breadcrumb text navigation List of all sub categories for selected category Up to 15 sub categories each represented by text in a bordered box Use of breadcrumb text navigation This will be the landing page for any product Product page to include the following information: Title Description Photo of Product with additional photos (Gallery) Technical Documents Section (text & PDF file link) Case Studies Request a Quote (link to 6.1) Design Assist Request (link to 4.9) Product Sub Categories 2 (Secondary Sub categories) List of all secondary sub categories for selected sub category sorted alphabetically. Up to 40 secondary sub categories each represented by text in a bordered box Use of breadcrumb text navigation Only display products as per user location Product Detail Page (2.1) Page 5

6 Armtec Website Flowchart Front End ( ) 3.0 Markets 3.1 Market Detail Page 4.1 Case Studies For regular devices (non mobile) hovering the mouse on the Markets button will invoke a mega menu with 4 categories: Infrastructure, Building Construction, Natural Resources, & Agriculture. Each category will have up to 10 subcategories clicking on a sub category will display the Market Detail Page (3.1) Only display markets in user location For mobile devices, clicking on the Markets button will display a list of all categories and sub categories clicking on a sub category will display the Market Detail Page (3.1) 4.2 Product Brochures Initial view will list all product brochures in a paginated grid format Page will contain dynamic filters when selected will automatically change grid selections to matching case studies Each brochure will be represented by small image & title Only display brochures in user location Keyword search system also available on page results will limit selection in grid to matching brochures Clicking on a brochure will link to associated PDF This will be the landing page for any Market sub category Market Detail page to include: Title Description Image Related products (links to Product Detail Pages) Design Assist Request (link to 4.9) 4.3 Technical Documents Initial view will list all technical documents in a paginated grid format Page will contain dynamic filters when selected will automatically change grid selections to matching case studies Only display documents in user location Each technical document will be represented by small image & title Keyword search system also available on page results will limit selection in grid to matching technical documents Clicking on a technical document will link to associated PDF Initial view will list all case studies in a paginated grid format sorted by newest first Each case study represented by small image & title Page will contain dynamic filters when selected will automatically change grid selections to matching case studies Filters to include Product Family & Location Keyword search system also available on page results will limit selection in grid to matching case studies Interface similar to: center/ case studies Clicking on Case study will display full page including: Title Owner Location Structure Details Products Used Contractor Consultant Large Image Full Description Download PDF Page 6

7 Armtec Website Flowchart Front End ( ) Specifications Inquiry Forms Tools Initial view will list all specifications documents in a paginated grid format Each specification document will be represented by small image & title Keyword search system also available on page results will limit selection in grid to matching technical documents Clicking on a specification document will link to associated PDF This is a library of PDFs Each PDF represented by title, date, and brief description sorted by most recent Clicking on title will display full PDF This is a library of PDFs Each PDF represented by title, date, and brief description sorted by most recent Clicking on title will display full PDF Upcoming Webinars Lists all upcoming Webinar events sorted by date each listing will contain: Title Date & Time Category Image Description Speaker Info (text & image) Who Should Attend (text) What You'll learn (text) Link to Registration Form Registration Form Fields: Name of event (auto populated) First Name Last Name Address Phone Number Job Title Company City Province / State Questions / Comments Join our mailing list User receives confirmation Armtec receives request Page 7

8 Armtec Website Flowchart Front End ( ) 4.6 Lunch & Learns 4.7 Events 4.8 Design Assist Request Form to request a lunch and learn session Form Fields: First Name Last Name Company Address Phone Number Company City Province / State Product type (drop down list) Link to CRM API For Phase 1 this will be Under Construction Integration with Gravity Forms User receives confirmation Armtec receives request 5.4 News List of news articles sorted by date Each article represented by thumbnail image, date and title Ability to search news articles with simple keyword Clicking on article will display full news story including title, large image, full description, category 5.6 Careers Link to Career Builder API Page 8

9 Armtec Website Flowchart Front End ( ) 5.7 Locations 6.1 Request a Quote 6.2 Contact a Sales Rep List of all office / plant / yard locations displayed as text links sorted by geography Clicking on a link will display location microsite Microsites to include the following information: Description of location Full address Hours Phone Manager Our Products (text links to related products) Our Case Studies (text links to related case studies) Our Technical Documents (text links to related tech documents Certifications (text) Special Achievements (text) Safety (text) Integration with Gravity Forms 6.3 General Questions Integration with Gravity Forms Integration with Gravity Forms Page 9

10 Armtec Website Admin System Notes Admin System Notes General: Content management system for all green coded pages All functionality is assumed to have add / edit / delete capabilities Slide show (1.0) User inputs image, text overlay, slide order, link General Area Home Page (1.0) Controlled by CMS Products ( ) User inputs: Main category and up to 2 secondary categories, title, description, main photo plus multiple gallery photos, Technical document PDF and description, Case studies PDF, description, applicable location (select list). Webinars (4.4.1) User inputs Title, Date, Time, Category, Image, Description. Speaker image, Speaker description, Who should attend (text), What You ll Learn (text) News (5.4) User inputs Title, Date, Image, Description, Article, Category (select list) Locations (5.7) User inputs Location Title, Description of Location, Full Address, Hours, , Phone Numbers, Manager Name, Products (select list), Case Studies (Select List), Tech Documents (select list), Certifications (text), Special Achievements (text), Safety (text), Google Map geolocation info, Region (select list) Markets ( ) User inputs selects main Market (1 of 4) and inputs details for sub category market including: Title, description, Image, select multiple related products from list of products, applicable location (select list). Case Studies (4.1) User inputs Title, Owner, Date, Location, structure details, products used (select list of products), contractor, consultant, Image, Description, PDF file, Product Family (select list), Location (select list) Product Brochures (4.2) User inputs Title, Image, Case Study (select list), keywords, description, PDF, applicable location (select list). Technical Documents (4.3) User inputs Title, Image, Case Study (select list), keywords, description, PDF, applicable location (select list). Specifications (4.3.1) User inputs Title, Image, keywords, description, PDF Inquiry Forms (4.3.2) User inputs Title, Image, description, PDF Tools (4.3.3) User inputs Title, Image, description, PDF Page 10