Website Project Design Brief

Website Project Requests we receive vary from ‘just do a website for me like that one’ to us being presented with a full and comprehensive functional and technical specification document, take a look at the request below to see how detailed and exacting some requests we receive are, in general we like more detail as it saves time and effort in the planning and development of your website project. This is a project we recently won and reproduced with full permission of the company.
Project Tender Introduction
We are a Printing / Graphic Design / Website Design / SEO  company based in the UK looking to improve our online presence and create a better experience for our customers.
The company we choose to take on the web design project will have full access to our logo, branding, imagery and in-house graphic designers who have produced page mock-ups (PSDs) to show roughly what the site should look like once coded. We can supply all artwork for the website including buttons, backgrounds, imagery, banners etc to any specification required for use on the website.
If you would like to see the mock-up before bidding please just ask, however we would insist the information remains private.
We have our own dedicated server and our current website would need to remain operational until the new site is ready to go live, however we would like the new website to be installed on our server in a test area ready to go live once completed.
We would also need advice on the best way to transfer existing Google page ranks on existing pages to the new website format and page/directory naming conventions, so our hard work on SEO is not lost.
PLEASE SEE THE ATTACHED WEBSITE BRIEF (WebsiteBrief.docx) AND SCREENSHOTS FOR A FULL BREAKDOWN OF OUR REQUIREMENTS
To ensure you have fully read and understood the bid please mention ‘Green Sun’ in your bid. Skills required:
HTML, JavaScript, MySQL, PHP, Website Design
Website Features

The site should have all the features similar to other major printing websites. We would require the website to be content managed by ourselves and have the ability to add new products, change existing ones, replace images etc. However we would NOT need the ability for customers to create their own artwork online using an online editor, it will either be uploaded via the website or we would design the artwork for a fee.
We also require the website to have a 48 hour printing section which is literally a cut down version of the main website that has a selection of products available in a 48 hour turn around.
Please note that a full list of our printing products is available, please ask if you would like to view this.
The general features and pages we require are detailed below:

• Contact
• Payment
• Delivery
• About Us
• Artwork Checking
• Sitemap
• Terms, Privacy & Cookies
• Get a quote
• Sample Packs
• Templates
• Design portfolio page
• News
• Live Chat
• Search
• Reviews
• Products
• 48 Hour Printing
• Feedback or Review product button always available for each product
• Random testimonials to display across pages, with the testimonials relevant to the product the customer is looking at. Testimonials need to be authorized by admin before being published on the site.
• Main home banner (possibly HTML 5) used to advertise certain products, services or events with links to internal/external pages. The banner needs to be easily editable so we may update with different slides and imagery.
• Advertising modules and space throughout the website down one side and possibly space in the body of the pages. This is for internal advertising, NOT AdSense. The adverts will be to provide info for our customers like special offers, clients we’ve worked with, reasons to buy etc. These will also need to be easily editable so we may update with different slides and imagery.
• Cross browser compatibility including Chrome, IE, Firefox, Safari
• Mobile compatibility including Windows Phone, Android & iPhone/iPad (so no use of Flash throughout the site).
• Full ecommerce functionality including shopping cart and payment integration using our online merchant account, Paypal, Google checkout, SagePay and the ability to pay by bacs. If BACS is selected admin has the ability to mark as paid when payment is received.
• SEO is vitally important as we already rank fairly highly for certain key terms and this would need to be carried over to the new site. We are more than happy to help with this and it is not essential, but we need to be able to easily change meta tags and image tags, edit all website text easily and show/hide text.
• Image links to our Facebook, Twitter, Google+, You Tube, Reviews and RSS sites
• Mini sitemap at the bottom of all pages relevant to where the user is on the website

CORE PRODUCT SECTIONS

• Home
• Stationery
• Flyers
• Folded Flyers
• Brochures
• Stickers
• Promotion
• Clothing

Please ask for a full breakdown of the products and finishing options within the core product sections above.
ADMIN BACK END FEATURES

• Admin can rename and create additional pages via CMS, edit menu items, links etc
• Header and Navigation Bar Customisation with new product categories automatically added to the navigation drop down structure.
• Ability to add new products, change existing ones, replace images etc
• Supports unlimited products and categories.
• Products-to-categories structure.
• Categories-to-categories structure.
• Add/Edit/Remove categories, products, manufacturers, taxes, customers, and reviews.
• Create bespoke quotes which will be linked to the customer account. The bespoke quote will also need to be emailed to the customer once complete and admin clicks a ‘submit’ button.
• In addition to invoices automatically generated by the website when a customer places an order online, we will also require the facility for invoices to be generated by admin. Each invoice would take the next available invoice number so they run consecutively with no gaps. The admin generated invoices would be fully editable at any time and would need to be in a standard invoice structure with a graphic template for the background. Details to be included within the editable section of the invoice would be: Invoice to (details to be drawn from a customer address book), Invoice number (created automatically), Invoice date, Client reference, PO number, Payment terms, Item line description, Net, VAT rate type (standard, zero, exempt, outside the scope (choose from list)), Gross. We will need the facility to add more than one item line. Both the system generated and admin generated invoices should be created in PDF format and we will need the ability to print the invoices from the system.
• Ability to create and send HTML newsletters to all customers or create customer groups with the ability to save multiple newsletters for sending.
• Easily backup and restore the database and entire website
• Create and print customer packaging/shipping label from the customer section of the admin area drawing the information from the customer address book.
• Admin ‘Reports’ page with statistics/graphs for products and customers drawing from the back-end data. On the reports page there should be the following 4 standard reports:

• Top 10 customers of all time
• Top 10 products of all time
• Gross annual sales split by month (with the current year as the default)
• Gross sales by day over a period of a month (with the current month as the default)

In addition to the above 5 reports we would also use the reports page to generate custom reports with various options, for example, date range, customer data, website visitors etc.

• Support for static and dynamic banners with full statistics.
• Search for customer by first name, surname or Company name
• Ticketing structure linked to the customer and/or the order. We require the ability to raise a ticket with the following information:

• Ticket title
• Description/details of the ticket
• Opened by (choose from admin user ID’s)
• Opened date (choose from calendar)
• Due date (choose from calendar)
• Assigned to (choose from admin user ID’s)
• Customer (drawn from customer address book)
• Priority (choose from Urgent, High, Medium, Low)
• Status (open, closed, waiting on client, awaiting payment, quoting)
• Invoice number (this will be generated automatically from the order, or, if linked to the customer only and there are no orders on the system this will be shown as n/a. This will need to be editable.)
• Ticket number (auto generated)

The tickets will need to be updated with a status of open, closed or waiting on client. All details within the ticket will be for admin to view only and the ticket history should be listed in chronological order with time and date entry of notes. The ticket will also need to be assigned to a staff member (who will have their own admin login) and as notes are added to the ticket it will need to be clearly identifiable which staff member added those details and which staff member raised the original ticket.
CUSTOMER / FRONTEND FUNCTIONALITY

• All orders stored in the database for fast and efficient retrieval.
• Customers can view their order history, order statuses and download the invoices for their orders.
• Reorder easily
• Customers can maintain their account, for example update their profile, address book etc
• Customer address book for multiple shipping and billing addresses.
• Permanent shopping cart for customers.
• Fast and friendly quick search and advanced search features
• Product reviews for an interactive shopping experience. Linked to Google rating & TrustPilot.
• Upload facility for customer artwork.
• Full bread crumbling so customers know where they are on the site at all times.
• We donate a portion of every order to charity and customers would need to see the amount being donated at the point of checkout. For example if the order is between £0 – £300 we will donate £1 to charity, if the order is £300 – £750 we will donate £5 to charity. Plus the customer will also see the charity logo and be able to click for additional information on the charity or donate more themselves if they would like to.

PRODUCT FUNCTIONALITY 

• Customer able to upload artwork or write a design brief. Attached artwork to be saved on the server and a download link emailed to an email address that admin can set, together with order confirmation and details. (multiple admin email addresses also facilitated & updatable)
• We need to be able to attach a proof of the artwork to the users account so they can view and tick a check box to tick to agree with the proof and authorise for print, or decline proof with a text box for the customer to provide details.
• Dynamic product attributes relationship.
• HTML based product descriptions.
• Automated display of specials.
• Customers can subscribe to receive related emails/newsletters.
• Social network integration to allow for updates to be posted to Facebook profiles and like and tweet etc,
• Cross comparison system of certain product ranges
• Products need to be easily uploadable to Google Product Base and Facebook Store.

SEARCH ENGINE OPTIMISATION

• Search engine optimisation is very important. The site will have to be built with SEO in mind as we require the site to be ranked highly online as our existing site is.

AUTO EMAIL

• Once registration is complete users details emailed, with customisable HTML message with promotions.
• Once order complete users order confirmation emailed, with customisable HTML message with promotions.
• Order confirmation sent via email to admin with link to download uploaded artwork or information on the design required by the customer.
• Auto Marketing email sent to the customer 24 hours (time set by admin) after the order has been delivered with a request for the customer to provide feedback/review.

Please do not bid if you are not capable of creating a design of the same standard or cannot achieve all the functionality required.
The budget is £2000 – £3000 please do not bid if you will charge more than this as I don’t want to waste my time or yours.
To ensure you have fully read and understood the bid please mention that you have read the proposal in your bid.
 
Draft Pages Explained
WebTemplate Home
General: All box headers, adverts and text should be true text that can be indexed by Google.
 Home Banner: The top main banner should to cycle 5 – 6 slides, in a format suitable for mobile devices (NOT FLASH). The slides should also be able to hold text not just graphics.
Product Search: This gives the user the ability to search the entire site for products and keywords that could relate to certain products to make finding what they are looking for easier. The search result page should be easy to ready and split into product sections if there are more than one item found across different product sections.
Links: The main navigation and links on the site should be self-explanatory, however the drop down for the main navigation buttons is explained on ‘Print-WebTemplate-HomeNav’.
 Your Basket: This should display the amount of products currently in the users shopping cart, clicking the graphic or the text line underneath should take you to the shopping cart page.
Live Chat: This should be displayed throughout the website in the same position. We need to be able to invite the users to live chat via a live tracking facility that alerts us to new visitors to the website.
Quick Product Selector: This should be a scrollable selection of the entire product range and different types of products within each product range. When we add a product to the backend we should be able to upload an image which relates to the ‘Quick Product Selector’
48 Hour Printing: The idea with this is that the website will split into 2 sites. When the user activates the 48 hour printing version of the site they are then taken to domain.com/ 48 hour printing / for example. This would be exactly the same site with the only difference being that it relates to the 48 hour printing database rather than the main database. The 48 hour version of the database will be configured exactly the same as the main database but just allowing us to show different prices and a cut down library of products. This would also be reflected in the drop down menus limiting the products shown. We do not need the databases to link to each other, we are more than happy to update each database separately via the admin backend.
Introducing the Business: These would just be links to our other websites.
 Site map: The bottom of the page will hold a mini site map to other areas of the website.
 
Print-WebTemplate-HomeNav
 General: All box headers, adverts and text should be true text that can be indexed by Google.
The images shown on the nav at the moment will be different for every product, not the same image as currently shown.
This will be a dynamic navigation drop down menu that appears when a user hovers over the main navigation titles
‘Home | Stationery | Flyers | Folded Flyers | Brochures | Stickers | Promotion | Clothing | 24 Hour Print’.
The background colour for each product on the drop down will highlight red when a user hovers over it, there also needs to be room for promotions or advertising space on each drop down. The promotion or advertising module will need to be CMS and available in the admin backend for each separate nav bar title. The adverts will also need to be clickable if required.
The product images for each navigation module and products need to be updatable in the Admin backend, for example if we add a new product in the backend there should be a section to add the navigation image to that product category. When a new product is added the product should automatically show and be formatted in the navigation drop down and auto format accordingly. I understand that the look of the auto formatting may not be the same as our desired design.
We would also require a semi-transparent ‘from’ price overlaying each of the product images that automatically updates from the lowest price listed for that category in the backend database. You will see on the concept we have experimented with 2 different options for showing the price (our preference would be the first option with the green tab overlay).
Web-Template-StationeryPrinting
These are basic SEO optimised landing pages for each title of the navigation.
‘Home | Stationery | Flyers | Folded Flyers | Brochures | Stickers | Promotion | Clothing | 24 Hour Print’
Expand *** Printing Services: Each product section should be expandable so that it shows a lot more content when expanded for each product group (‘show/hide’ text). This additional information should still be scanned by search engines even though it is hidden from the user until they click the expand button. Once the expand button has been clicked the page will show all the options for that product section. Or if the user clicks the image or the main title, for example ‘Letterhead Printing Services’ it will then take you to a new page with all the options for letterhead printing shown on a different page with different text for SEO purposes.
From prices should be automatically generated from the lowest price in the backend for each product section. The same is true for side adverts which have a price attached to them, the price should be shown using a tag system we can place in the advert or similar method.
Print-WebTemplate-StationeryPrinting-BusinessCardPrinting
 These are basic SEO optimised landing pages for each sub category of the title navigation buttons.
 General: All box headers, adverts and text should be true text that can be indexed by Google
Price List Ordering: When the user clicks this button for each of the products this takes them to the main ordering page for the item selected (please see ‘Print-WebTemplate-StationeryPrinting-BusinessCardPrinting-LaminatedCards’ for example)
The ‘from’ prices listed will automatically be generated from the lowest price product in the backend for that specific product.
Print-WebTemplate- StationeryPrinting-BusinessCardPrinting-LaminatedCards
General: All box headers, adverts and text should be true text that can be indexed by Google.
Create Your Business Card Printing Order: This is the main product ordering and options section to add products to the cart. The idea is that when a user chooses settings on the right under ‘Create Your Business Card Printing Order’ it is reflected on the left under ‘Your Order’. This would in turn also change the display of ‘Compare Other Business Card Printing Prices’. The whole page would therefore be somewhat dynamic. Also when we change a price in the backend or product name or description it will feed through the entire site and update the prices as applicable.
Did you know: This section would also need to be different for each product, and would work in Java script or similar to hold 3 different ‘Did You Know’ slides of our choice.
Photo, Video & Template Section: This section will need to be product specific and in the admin backend we will need to be able to set the photo, video and template to display for each individual product. In addition, the videos will need to be embedded into the web page and play when the video button is clicked.
Product Details, How To Order, testimonials etc: The bottom section will be mainly text, and each clicked tab will change to display text relevant to the clicked tab. Reviews should automatically be pulled from Trust Pilot, Google or the website’s own review feature. This section is mainly for SEO purposes and all tabs should be indexed by Google, not just the one showing by default.
Trust (The section which has ‘£1 of this order will go towards changing …’): The £1 will be a variable amount based on the value of the order which we will need to set in the backend. For example if the cost of the item is between £0 and £200, then £1 will be donated and so on:

• £0 – £200 = £1
• £201 – £400 = £2
• £401 – £700 = £5
• £701+ = £10

Why Us: Social media ‘like’ buttons and reviews for the current product will need to be placed here.
Compare Other Business Card Printing Prices: This section will draw prices for a range of other related business card products from the backend and display them in the table. This allows users to easily compare prices for the business card ranges available.
Browse Other Business Cards: This section allows users to browse other business cards in the product range that can’t be ordered from the current webpage or comparisons are not visible in the “Compare other business card printing prices” section.
Print-WebTemplate-Shopping Cart
Product Image/Item: We will need another ‘product image’ upload in the ‘add product’ back end options so we can upload this image and it is automatically displayed in the ‘Item’ box.
QTY: We will need a drop down box so the user can change the quantity on the fly without going back to the product order page.
Specification: This will need to display a brief description of the product the user is ordering. Then for upselling we will need to display a price to entice the user to order the next quantity up for a price calculated by the back-end from the current price.
Price, VAT, Total: Self-explanatory.
Delivery: This will be the same for every single product.
The Trust Donation: This will show the user based on the total amount of their order, how much we will donate to the Trust from our profits. This amount IS NOT added to their order, it is basically for their information.
Total Price Box: This would add all the totals together and by clicking ‘Place Order’ would take you to Stage 2 of the checkout.
 
Print-WebTemplate-Shopping Cart-Stage2
Registered users can login to proceed to the next stage or unregistered users can create an account to continue with the order process.
Print-WebTemplate-Shopping Cart-Stage3
Your Address Book: This will retrieve data from the user’s saved addresses in their ‘Your Account’ Section.
New customers will be able to enter their address using the boxes provided and save them for next time by checking the box. They can also copy their Invoice Address details to the Delivery Address by clicking the button ‘Copy Details’.
The user will then select their payment method and continue with the checkout.
If the user selects ‘BACS’ they will NOT go to any payment processing provider. Instead they will be directed to an upload artwork/design brief page with a comment alerting them to the details of how to pay by BACS. We will also include here a statement confirming we will not process the order until payment has been received into our bank account.
If the user selects Google Wallet, PayPal or SagePay they will proceed to the relevant payment gateway. I do not have a screen shot for the payment gateway process, but this is obviously generic as per the payment method of the user’s choice. However, when they have successfully paid the user will be directed to the next stage.
Print-WebTemplate-Shopping Cart-Stage4
This is simply a “your order was successful page” with a link to ‘Your Orders’ so the user may upload artwork for their order(s). Please see ‘Print-WebTemplate-MyAccount-YourOrders’ to see the start of the upload process.
Print-WebTemplate-MyAccount-YourOrders
Order Search: Users can search for orders by order number or product.
If there are multiple products in 1 order no. then you can see from the first order on this example there are 3 buttons on the right for each order:

• UPLOAD
• RE-ORDER
• INVOICE

This allows the user to upload artwork for each individual product within their order.
The order status should update according to the stage of their order with a selection of stages we can select using the backend.
Once a user has successfully uploaded artwork the UPLOAD button next to their order/product should change to PROOF and the status text should update accordingly. The proof button is then clickable when the status has changed to “Proof Ready” and we have successfully uploaded the users proof to their account. When the status is updated by admin in the backend the user will receive an auto-generated email relative to the status update.
Once admin have uploaded the proof and the status is showing as “Proof Ready” the user will then click the PROOF button. This will take the user to a new page and allow them to open or download their pdf proof. The page will include a check box to sign-off the proof and accept the terms and conditions. In addition, there will be another check box to decline the proof and an accompanying text box allowing the user to enter text details for their feedback and changes required to the proof. Admin will need to be alerted to this feedback (whether an acceptance or decline of the proof) via email notification. It the user has declined the proof their text feedback will also need to be provided within the email.
Once the proof has been agreed by the user (i.e. they have checked the “Accept Proof” button” their order status should automatically change to ‘In Progress. The user should also be sent an auto-generated email confirming their order is in progress.
At the bottom of the ‘your order’ section the user should see ‘The Trust Details’. This box totals all the user’s donations to show the total amount to date which they have donated, with additional options to view more details.
Print-WebTemplate-MyAccount-Upload
Order Description: This will display the product details the user is uploading the files for.
The user will be able to choose whether to upload separate files, multiple page pdf’s or submit design briefs and images. As default the section will show File 1 with a blank area (until the artwork for File 1 is uploaded) with the “Add Another File” and “Multi-Page PDF” buttons directly to the right.
When uploading artwork a small image will appear to show the uploaded artwork.
When finished, the user will be taken back to the ‘Your Order’ page.
Print-WebTemplate-YourAccount
When the user logs in to Your Account this is the screen they will be presented with.
Account Details: Users can change their profile details, change password etc.
Your Orders: Users can view their orders, status, upload artwork, re-order items, view invoices.
Bespoke Quotes: Users can view the bespoke quotes they have requested and request new bespoke quotes. Bespoke quotes can be ordered and added to the basket for checkout.
Address Book: Users can update their address book with additional addresses, change current addresses or remove addresses.
Log Out: Obviously log the customer out and take them back to the home page.
Trust: At the bottom of the ‘Your Order’ section the user should see ‘The Trust Details’. This box basically adds all the users donations together to show how much they have donated with additional options to get more details.
WebTemplate-Admin Account
We have created an example layout for our Admin Dashboard as a visual representation; however we understand we may need to be advised if additional buttons/elements are required on the dashboard for the management of the site. The graphs shown at the top must be included.
Final Comment
I’d just like to say a big thank you to everyone that has bid for the project so far, your time is greatly appreciated! However I can only choose 1 company and can’t promise to get back to everyone I’m afraid.
We are reviewing every single bid and want to make sure that we evaluate every company fairly. We want to make sure the successful bidder has fully understood our requirements, has the experience to deliver the functionality as outlined in our design brief attachment and has viewed the attached screenshots to see where we need to be graphically and how the interfaces will work. We will then choose 3 – 5 companies at the end of the bidding and talk in more detail about the project, then we will award the project to 1 company.