MCMUNN & YATES BUILDING SUPPLIES

Transcription

1 MCMUNN & YATES BUILDING SUPPLIES Project Specifications Document Wednesday, June 17, 2015 v 2.0 Jenny-Lynn Sheldon - Interactive Designer Think Shift Advertising Inc. 1

2 Introduction The purpose of this document is to formalize our understanding of McMunn & Yates requirements for building their new website. Deliverables Think Shift is committed to an August 25 th 2015 launch date. This means that all the tasks and requirements specified in this document will be built and fully tested, followed by two rounds of client feedback and minor revisions prior to the launch date. Client Dependencies In the website requirements below, there are a number of action items (client dependencies) that McMunn & Yates are required to fulfill. Each task is given a start date in the project plan document, which has previously been provided. Each action item is to be delivered prior to the start date of the associated task by McMunn & Yates otherwise the project will become out of scope and the project scope and timeline will need to be revised. Think Shift will provide guidance where applicable. Pre and Post Go Live Revisions Once the website enters quality assurance testing McMunn & Yates will be allowed 14 hours (2 days) of minor revisions broken down into two rounds of revisions. Minor revisions include content and font styling changes. Functional and large design changes will fall out of scope, in addition to revisions outside of the allocated 14 hours. Bug fixes found during this time are exclusive of these 14 hours and will be resolved during QA and within the 30-day post live warranty time. After the 30-day warranty period ends Think Shift s support team is still available for any website updates. Think Shift s web support service level agreement is attached to this project specifications document. Think Shift Advertising Inc. 2

3 Design Information Design SITE MAP Think Shift has been working with McMunn & Yates to define a new site map for the website. McMunn & Yates has approved this new sitemap. The CMS will allow McMunn & Yates to add new child pages to the website navigation. See Appendix A at the end of this document for the most recent version. CONTENT MODEL The content model breaks down all the unique content types that will be going into the website. It also lists all of the fields that will be associated with each content type. These fields will be created in the CMS and used for content entry. See Appendix B at the end of this document for the most recent version. Concept Designs The initial concept design will establish a visual language and design conventions for the entire site by focusing on these pages: Home Page Product Page Wireframes Think Shift has created wireframes for the following templates. These will not be fully designed. The wireframes are only to indicate where key content areas will be placed on the page. 1. Home Page 2. Packages Landing Page 3. Packages Listing Page 4. Packages Detail Page 5. Products Landing Page 6. Flyers & Promotions Page 7. Newsletter Signup 8. Request A Quote - Generic & Floating Widget 9. Request A Quote - Post Frame Building 10. Contact & Locations Page 11. Article Listing Page 12. Article Detail Page 13. Generic Content Page Think Shift Advertising Inc. 3

4 Content Management System The website core will be built using the ExpressionEngine CMS with plugins being used to accomplish some functionality. Plugins Required The following plugins will be purchased and installed for the CMS: Structure WYGWAM FreeForm Pro Users and Roles The following user groups will be created in the CMS: MCMUNN & YATES ADMINISTRATORS Can create and edit users and assign them to a user group. Can edit any of the content outlined in the content model. THINK SHIFT ADMINISTRATORS Global Access CMS Training Think Shift will provide CMS training for the McMunn & Yates team in person at the Think Shift office. We will go through examples on updating every type of content in the website. Any McMunn & Yates staff who will be updating the website should attend this meeting and are responsible for taking notes during this meeting. Any additional CMS training or CMS questions outside of this meeting will be treated as a support request. Think Shift Advertising Inc. 4

5 WYSIWYG Editor Feature Types Below is a list of the feature types the website CMS WYSIWYG will provide when entering content onto generic pages and others specified in this document: Bold Insert/Edit Link Underline Italic Paragraph Headlines (H2 H4) Left, right, centre justify Decrease and increase indent Insert/Remove Bullet Points Insert/Remove Numbered List Insert/Edit Unlink Insert/Edit Anchor Insert/Edit Image Note: Images should not be resized in the CMS. The image should be created at the proper size. Edit HTML Source Paste as plain text Insert/Edit Table, Row and Columns Think Shift Advertising Inc. 5

6 Page Functionality The following wireframes and notes are used to outline the page functionality that will be built into the website. Global Header The logo and navigation will be hard coded and not be editable via the CMS. 1. The Logo will serve as a home page link. Clicking on the logo in the top left of the header will navigate to the home page 2. Account Login will open a new page to the external login page. All other links in the header will open in the same window as they will be controlled by the CMS. 3. Header Search Functionality will open a new window and search all of the products in the WebTrack system. 4. Main Navigation The primary navigation has a drop down menu for each of the primary links. This menu lists all of the 2nd level page links for that section. These levels and links will be controlled by the CMS. The utilities menu at the very top right will not have any drop down menus. Top level navigation links are static, and the order cannot be changed using the CMS Second level navigation links can be re-ordered JavaScript will be used to determine hover intent. Menu dropdowns will not be activated until the user has hovered over the link for 0.4 seconds. This makes sure the user intended to activate the submenu and the mouse didn t pass over the menu as the user was trying to click on an element lower down on the page. Activated submenus will remain visible until the user s mouse has been off the menu for 0.4 seconds. That way we know the user indented to disable the menu and their mouse hadn't accidentally moved off the menu while trying to click on an element along the edge. If the user s browser does not have JavaScript enabled the submenus will appear and disappear immediately. Think Shift Advertising Inc. 6

7 On smaller screen sizes other than desktop, the main navigation will dynamically turn into a dropdown list of just the parent pages, accessible via hamburger icon. This functionality is similar to what the Think Shift website uses. ( thinkshiftinc.com/) Global Footer Request a Quote Call Out Section: Action button will navigate to the Request A Quote Page. Request a Quote was removed from the main navigation as it will also live as a floating widget on the RHS of the page. M&Y will not have the ability to edit this content via the CMS. 2. Newsletter Call Out Section: Action button will navigate to the newsletter sign up page. M&Y will not have the ability to edit this content via the CMS. 3. Upcoming Events: Content in this section will be auto populated with the next 3 upcoming events. Clicking the section title of Upcoming Events will navigate to the event listing page. Clicking the Read More buttons will navigate to that event s detail page. 4. M&Y Divisions: The section title will be hard coded and not editable within the CMS, but the list of divisions will be editable via the CMS. 5. Head Office: Information in this area will be editable via the CMS. 6. Social media links will be hard coded, and not editable via the CMS. Think Shift Advertising Inc. 7

8 T1. Home Page Homepage Content Slider: There will be a maximum of 5 content slides. Each slide will consist of a brief description, action button and background image. Each background image will be relevant to it s brief description, but will not contain any text or important data as the background image will be resized and cropped depending on the viewers device width. 2. Ad Bricks: The title of the subsection beneath the home page will be editable. The listing items (currently Packages) will also be editable. Each item will consist of an image, title, short description and an action button. Clicking on the image will result in the same action as the button. The title of each listing item will be placed above the image. No text or relevant content should exist within the background image as the image will be resized and cropped depending on the viewers device width. There can be an unlimited amount of ad bricks on the home page, but Think Shift strongly suggests to keep it at either 3 or 6. Think Shift Advertising Inc. 8

9 T2. Packages Landing Page Featured Packages Slider Each slide consists of a title, optional short description and an action button at the top of the packages home page. There will be a maximum of 5 slides. 2. List of packages Each package item will consist of a background image and title. The package thumbnail Clicking on the image will result in the same action as the button. The title of each listing item will be placed above the image. No text or relevant content should exist within the background image as the image will be resized and cropped depending on the viewers device width. This list will be pulled from the packages sub pages, and their order will be editable via CMS. Think Shift Advertising Inc. 9

10 T3. Packages Listing Page This displays the second level of packages. If a second level package page does not have children, this template will not be used. 1. Landing Page Feature Image: The image will scale to full width of the screen on every device. Because of this the feature image will not contain any text or important data as the background image will be resized and cropped depending on the viewers device width. 2. Short Description & Page Content: This section will be editable via the CMS. 3. Child Page Listing: Each child page will be listed beneath the page content. Each listing item will consist of a title, optional preview image, short description and action button linking to the detail page. The order of these items can be controlled via the CMS. Think Shift Advertising Inc. 10

11 T4. Packages Detail Page Package Item Feature Image: The image will scale to full width of the screen on every device. Because of this the feature image will not contain any text or important data as the background image will be resized and cropped depending on the viewers device width. 2. Short Description & Page Content: This section will be editable via the CMS. 3. PDF Download Section: If this detail page has a related PDF document, a background image and download link will be visible on the right hand side of the page. M&Y will have access to upload the PDF, as well as edit the action button text via the CMS. 4. Related Package Products: Each detail page will have the option to list all of the related items in a grid table format. Each line will consist of the product title, short description, quantity required and link to the WebTrack product page. If the product page links change on the WebTrack website, M&Y is responsible for making the corresponding change via the CMS. Think Shift Advertising Inc. 11

12 T5. Products Landing Page Short Description & Page Content: This section will be editable via the CMS. 2. Featured Product Categories: Each product category will consist of a title, background image and direct link to the WebTrack category page. The order will be controlled via Drag and Drop interface within the CMS. The first 3 in the list will display as the 3 featured categories. If the category page links change on the WebTrack website, M&Y is responsible for making the corresponding change via the CMS. Think Shift Advertising Inc. 12

13 T6. Flyers & Promotions Page Featured Promo Slider Each slide consists of a title, optional short description, background image and an optional action button. There will be a maximum of 5 slides. 2. Featured Promotions: This area will be used to call out specific flyers, promotions and events. Each item will consist of a title, feature image, and action button. The button will either open an external link in a new window (Flyertown direct Link) or a PDF download. This area will display 5 feature items at a time, if there are more than 5 featured promotion listings, pagination links will be displayed. (Next/Previous) In addition, the display of these promotions can be controlled by entry date and expiry date, so M&Y can schedule promotions in advance. Promotions will be listed by entry date order, with the most recent entry being listed at the top. There will also be social sharing options for each promotion (Facebook and Twitter.) Think Shift Advertising Inc. 13

14 T7. Newsletter Signup The newsletter signup page will host an embedded Campaign Monitor sign-up form. Instead of having separate signup forms for different audiences, Think Shift will create a customized form that will add users to different mailing lists depending on their selected audience. The target audiences have been outlined by M&Y. New target audiences can be added post-launch, but will either be part of the 30-day post live warranty time or as a support request. T8. Request A Quote - Generic & Floating Widget When in desktop view, the Request A Quote menu item will be hidden from the main navigation. Instead, a floating widget will display on the right hand side of the screen. When clicked, the widget will expand to display a form with the exact same inputs as above. When in tablet and handheld views, the floating widget will be hidden and the Request A Quote menu item will be displayed in the main navigation. A user can only select one service at a time, and upon submittal, the request is ed to a M&Y correspondent. A copy of the request will not be ed to the user. Once a successful request has been submitted, the user will be directed to a thank you page. All request a quote responses will be delivered to 1 address, as well as saved to a database within the CMS. M&Y will be able to export these entries from the database. It is the responsibility of McMunn & Yates to dispatch the quote requests to the proper departments. Think Shift Advertising Inc. 14

15 T9. Request A Quote - Post Frame Building This is a unique 1 off form that will live under Packages > Post Frame Buildings. This form will function similar to the form on the current site. Completed entries will be ed to both McMunn & Yates as well as the user, and saved to a database within the CMS. M&Y will be able to export these entries from the database. Think Shift Advertising Inc. 15

16 T10. Contact & Locations Page Map: This will be an image with markers placed on each M&Y location. There will be no functionality here. 2. Head Office Information: This area will showcase head office information and hours. 3. Locations: By default all locations will be displayed. Each location will consist of the location, address information, phone number, a small WYSIWYG area to display manager s, and store hours, a link to the google maps location page (link opening in a new window), and a category. Think Shift will work with M&Y to have more map pages created for all of the locations. Location filters will be driven by the categories. McMunn & Yates will have control in the CMS to what locations and what categories will be linked. Think Shift Advertising Inc. 16

17 T11. Article Listing Page The article listing templates will be used on the Event listing pages as well as the Career listing pages. Listing pages will show 5 articles per page, with pagination links appearing at the bottom if the article count is above 5. Both Events and Career information is date sensitive, so once their expiry date is reached, they will be removed from the website. M&Y will have the ability to set expiry dates on these entires Date Display: If this template is being used in the events section, the date will be displayed on the left side of the entires. Otherwise, the date will be displayed beneath the title when used as a careers listing page. 3 2.Article Feature Image: Each article entry will have the option to have a feature image. If no feature image is uploaded, no image will be displayed. 3.Required Listing Item Data Each listing item will consist of a title, short description and action button that will link to the details page. Think Shift Advertising Inc. 17

18 T12. Article Detail Page 1 2 The article detail templates will be used on the Event detail pages as well as the Career detail pages. 1. The detail pages will show the option article feature image, short description as well as a WYSIWYG content section. 2. There will also be an option in the CMS to create action buttons that will link to external sites to either RSVP to events, or download an application PDF. Think Shift Advertising Inc. 18

19 T13. Generic Content Page The generic page template will a full width WYSIWYG content area. Depending on the content provided, if required, Think Shift will supply a maximum of 3 WYSIWYG content templates to aid with specific patterns. Examples of a WYSIWYG content template are: Full Width Images Images with a caption Stylized responsive data table Additional WYSIWYG content templates will count towards the minor revision time allocated of 14 hours. Think Shift Advertising Inc. 19

20 WebTrack Updates The current WebTrack website that the McMunn & Yates website links to will stay mostly the same. Currently the WebTrack site has an image in the top left corner. That image looks something like the current website s navigation but it is only an image and is not clickable. Think Shift will design a new image to replace the existing one. Think Shift will send this new image to McMunn & Yates so they can update it using their WebTrack access. Think Shift will also research, and if possible, override the default WebTrack colour scheme by providing a CSS style sheet and corresponding code. Think Shift will direct McMunn & Yates over a WebEx session to help install the code and new header images into the WebTrack system. Content Content Migration and Redirects Think Shift has created the page structure in the CMS including all pages that have been outlined in the approved sitemap. McMunn & Yates is responsible for entering all content into the CMS prior to the website entering the QA phase. CMS training will happen before content entry is scheduled to start. Think Shift will be responsible for setting up 301 redirects before the website launch. This will link all of the pages from the old website to their new location on the new website. Web SEO Essentials Search engine optimization is crucial to your website. SEO will help people find meaningful content and build trust and credibility in your online brand. Page titles and meta tags for static pages are manually set on the CMS whereas product pages are dynamically created. These fields are mandatory and must be done before the page can be closed. Page titles should be prefixed [Page Title] McMunn & Yates Building Supplies Think Shift Advertising Inc. 20

21 Images embedded using the CMS contain the alt tag. XML Site Map. Creation of the Robots.txt. HTML/CSS page speed testing and optimization (how quickly the page loads). Minifying JS and CSS to decrease load times Quality Assurance Think Shift will thoroughly quality assurance/test the website ensuring the all the requirements as described above are met. QA will consist of 2 weeks of testing and revisions. During this time no additional content can be entered or functionality modified. Testing and Compatibility We will perform Quality Assurance testing on our work to ensure the website is built to work well in the following browsers, versions and operating systems: Firefox Chrome Safari Internet Explorer Windows XP* no no no 8+ Windows Vista* no no no 8+ Windows no 9+ Mac OS X n/a ios n/a n/a yes n/a Android yes yes** n/a n/a * The lowest version of Internet Explorer that we support is version 8, which means it s the only browser we need to test for Windows XP or Windows Vista. ** The Android default browser used to be Browser, but has recently changed to be Chrome. Both are essentially powered by the same rendering engine and so for the sake of this document we are generalizing the browser to be Chrome. Think Shift Advertising Inc. 21

22 Accessibility and Usability We make your website following the latest standards from the W3C (World Wide Web Consortium): HTML5 specification compliance WCAG Priority II compliance Google Page Speed/YSlow score of 80% or higher We also follow the latest best practices in the web development industry: Responsive Web Design Progressive Enhancement Graceful Degradation Google Analytics Monitoring site traffic with Google Analytics is essential with any website. Incorporate a new Google Analytics code into the website. The new website will also be set up in Google Webmaster Tools. This will include submitting a new sitemap to Google. Website Hosting We will be switching from the current web hosting to Media Temple which supports PHP based content management systems like ExpressionEngine. Think Shift will be responsible for setting up the new hosting. Think Shift Advertising Inc. 22

23 MCMUNN & YATES BUILDING SUPPLIES Appendix A: Site Map 1.0 Home Page T1: Home Page Template Utility Navigation 0.1 Newsletter Signup 0.2 Account Login 0.3 Careers 0.4 Contact & Locations 0.5 Product Search T7: Newsletter Signup External Link T11: Article Listing Page T10: Contact & Locations Page External Form > WebTrack 2.0 Products T5: Products Landing Page 4.0 Services 5.0 Request A Quote T9: Req A Quote (Generic) 7.0 Contractors 2.1 Suppliers 4.1 Design Services, Free Estimates and Installation Services 7.X Contractor Sub Pages 3.0 Packages T2: Packages Landing Page 4.2 Delivery & Rentals 6.0 Flyers & Promos T6: Flyers & Promos Page 8.0 About Us Deck & Fence T3/T4: Packages Listing or Detail Page Kitchen Design Services T3/T4: Packages Listing or Detail Page Windows & Doors T3/T4: Packages Listing or Detail Page Price Match & Return Policy Credit Services & Gift Cards Plan it DIY X Events T11: Events Listing Page Event Detail Page T12: Event Details Page Who We Are History Partners 3.4 Garages T3/T4: Packages Listing or Detail Page 8.4 In the Community X Homes & Cottages T3: Packages Listing Page House/Cottage Detail Page T4: Packages Detail Page Post-Frame Buildings Building Types Request Post-Frame Quote T9: Req. A Quote (Post Frame) Footer Navigation External Links X.1 Customer Survey X.2 Twitter X.3 Facebook Templates T1. Home Page T2. Packages Landing Page T3. Packages Listing Page T4. Packages Detail Page T5. Products Landing Page T6. Flyers & Promotions Page T7. Newsletter Signup T8. Request A Quote - Generic & Floating Widget T9. Request A Quote - Post Frame Building T10. Contact & Locations Page T11. Article Listing Page T12. Article Detail Page T13. Generic Content Page

24 MCMUNN & YATES BUILDING SUPPLIES Appendix B: Conent Model *Indicates Required Fields Indicates Compatible to the Additional SEO Home Page Content These fields allow you to update the home page 1 Image Slider* (Grid) 3-4 Images In a rotating grid, consisting of a background image, headline, short description, button URL and button text. 2 Feature Content Area* (Grid) Dynamic Areas on the page consisting of a background image, headline, short description, button URL and button text. Pages Content common to all pages in the site 1 Page Title* (String) The page title. Used as the page heading and SEO title 2 Short Description* (Text Area) A short overview of this page content. This will be used for a listing view and social sharing. It should not be the first few sentences of the page. it should be an overview of all of the content. 3 Page Content (Wysiwyg Area) The full content of the page. This can include content formatting including embedding images and links within the content. 4 Feature Image (File: Image) Optional feature image that can be uploaded here. 5 Secondary Title (String) Full length title that appears at the top of the page Package Item Subpages of the Products & Packages Entry 1 Package Title* (String) The page title. Used as the page heading and SEO title 2 Short Description* (Text Area) A short overview of this promotion. This will be used for a listing view and social sharing. It should not be the first few sentences of the article. it should be an overview of all of the content. Product Categories Types of products that M&Y offers 1 Category Title* (String) The category title. 2 Category Description* (Wysiwyg) An overview of this category and what products and brands are available. 3 WebTrack Cateogry Link (URL) Where to link this button to. Eg: a WebTrack page, the promotions page. 4 Category Thumnail (File:Image) Image associated with this category. Events Events posted on the site. 1 Event Title* (String) The page title. Used as the page heading and SEO title 2 Short Description* (Text Area) A short overview of this article content. This will be used for a listing view and social sharing. It should not be the first few sentences of the article. it should be an overview of all of the content. 3 Event Details* (Wysiwyg Area) The full article content. This can include content formatting including embedding images and links within the content. 4 Event Date* (Date) What date is this event happening on. 5 Event Times (String) What time is this event happening 6 Venue Information (Text Area) Where is this event happening. This should include the name of the venue, address and contact information 7 Feature Image (File: Img) Image associated with this entry Careers Career details Promotions Promotions featured on the website. 1 Promotion Title* (String) The page title. Used as the page heading and SEO title 2 Short Description* (Text Area) A short overview of this promotion. This will be used for a listing view, and social sharing. It should not be the first few sentences of the article. it should be an overview of all of the content. 3 PDF File (File: PDF) Upload a PDF with full promotion details 4 Website Link (URL) Link the user to a webpage for more details 5 Feature Image* (File: Img) Image associated with this entry 6 Start Date (Date) On what day should this promotion appear on the site 7 End Date (Date) On what day should this promotion be removed from the site Our Locations Our locations listing 1 Location Title* (String) The location title. 2 Location Address* (Text Area) The address for this location 3 Location Contact Information* (Text Area) The phone numbers for this location 4 Location Hours* (Text Area) Hours of operations for this location 5 Contact Name* (String) Main contact person, related to the address. 6 Address* (String) Contact address for this location. 3 Feature Images* (File: Img) Image associated with this entry 4 Package Content (Wysiwyg Area) The full content of the page. This can include content formatting including embedding images and links within the content. 5 PDF File (File: PDF) Upload a PDF with full career posting details 6 WebTrack Inventory (Grid) List of WebTrack links related to this package. 1 Career Title* (String) The page title. Used as the page heading and SEO title 2 Short Description* (Text Area) A short overview of this position. This will be used for a listing view and social sharing. It should not be the first few sentences of the article. it should be an overview of all of the content. 3 Page Content (Wysiwyg Area) The full content of the page. This can include content formatting including embedding images and links within the content. 4 PDF File (File: PDF) Upload a PDF with full career posting details 7 Google Map URL (String) Google store location page. Additional SEO Overrides ( ) We use an SEO Plugin that can override the default website SEO settings. 1 SEO Title (String) Optional, if you do not specify anything the entry title will be used. Remember that most search-engines use a maximum of 60 characters for the title. 2 SEO Keywords (String) A comma separated list of keywords 3 SEO Meta Description (String) Write a short sentence or two that sums up the entry (many search engines will display this in the search results) There is a character limit of 140 characters. When in doubt, copy the content from the Short Description field.