Delicious News

Interesting Stuff in our World

Website Design Project Plan

This example project plan has been created and included to give our clients direction and advice about some of the detail that we welcome from new clients requiring a website. Obviously we can work with a lot less information but the following project specification is a good example of and ‘ideal’ project plan that could be sent to us for a website design quote for an Essex based business.

Website Design and Development Build Project Plan

1.     SCOPE OF WORK

Our Client requires the design agency to produce a new graphical design, assets and HTML template pages for a redesigned white site.

The design and templates will be used by our clients existing Java web application.

The integration of the templates to the existing application will be performed by our client and is outside the scope of this RFI.

Our aim is to set a new benchmark for simplicity, clarity to the customer,ease of use and ease of integration with partner website and aggregator sites.

To confirm what drives the business written on the motor website we feel that a detailed explanation of the avenues that are currently used is relevant so a full understanding is obtained.

The current site was designed for direct data entry, i.e. clients being directed to the site and typing in risk details, consisting of a small number of questions asked and a large proposition of ‘assumptions’. Our client has reviewed their whole question set and after having internal workshops and reviewing the market now realise that a complete change is required.

Recently there has been a dramatic increase in Aggregator business (price comparison websites such as confused.com), so two entry streams must be possible:-

  • Client referred via an aggregator site/or other referral site
    these customers will already have input quote details and which are carried through to our site from the aggregator.
  • Client comes direct
    These customers would start on the site of the affinity partner

Ability to Rebrand.

The refreshed white site template must be designed so that rebranding is easily done and it must also be able to cater for the existing brands.

A rebrand could consist of font, colour, header, footer and graphic changes (this is a non exhaustive list and more brandable features are better).A rebrand must be simple to implement with basic web development skills For example, currently buttons are not graphics based but rather rendered using css styles which make the rebranding easier.

The rebranding should be primarily controlled through CSS, and also by including brand specific header and footer sections.

 Web Refresh Requirements 

White site template restyle

  • Existing flow for question set remains as is however all questions are asked up front and removal of the assumptive nature of the site.
  • Changes of graphics (images and position)
  • Fonts and colours may change
  • Static text will change
  • Redesigned page layout
  • New landing page which will work as an up sell interface / marketing adverts

The above list is non-exhaustive and responses need not be bound by this list. We are open to new opinions and thoughts.

Dynamic selection boxes

  • Ajax Controls – e.g. Occupation, when you start typing occupation, the list of possible values reduces the further into the word you go

 

Error Handling

  • The current way that the errors are displayed could vary. The removal of pop up boxes needs to be addressed with possibly replacing them with a new window
  •  Both the way errors are highlighted and error text is shown could change

Help Text

  • The way help text is selected and displayed needs to be amended
  • Possible constraint – accessibility was a consideration – requiring now the ability to tab into the help text

Up sell interface

  • A Gold, Silver, Bronze add-on structure is required. The graphical interface for selection of these needs to be designed.
  • Our client’s add ons include Legal Protection; Key Protection Cover; Breakdown Cover and Personal Accident Cover.

Websites we like

A list of websites that are liked by us will be sent shortly

Features we like

The following list is non-exhaustive and we are open to suggestion and guidance from the selected provider. However our internal workshops and external feedback on our current web application from a range of sources has suggested the following ‘key features’ or key areas where our site could be improved;-

  • Websites with a customer friendly ‘aggregator landing page’
    • Which prominently display the price per month
    • Which can display the logo of the aggregator site
    • Which can display product features and benefits
    • Which can display customer details so that the customer is aware the quote is correct
    • That are no more than 3 pages from the ultimate card payment screen
  • Websites which carry variable sales messages throughout the site
    • Eg affinity sites will carry a car insurance promotion but details of this promotion are not carried through the quote application form
  • Websites with clear progress trackers ‘crumb trails’
  • Websites with good facilities to allow customers to retrieve a quote
  • Websites which allow customers to ask questions (via email)
  • Websites which have consistency and clarity of button styles throughout
  • Websites which make it easy for customers to buy additional products (add ons)
    • Sites which clearly promote the benefits of these add ons

Technical Requirements

 Accessibility

Our current websites contain a foot link to a page detailing the sites accessibility credentials, this still needs to be on all our websites

Java Script

Some of our affinity partners demanded that their sites had to work without java script enabled. This still need to be technically catered for. Alternative versions of the site would need to be rendered where java script is used for example to implement AJAX controls. If possible the site should be developed to work in both scenarios. (This will have cost implications we are aware and may reduce usability if java script is disabled.) When accessing the aggregator with a java script disable a page is shown instructing the user to enable java script if they wish to access the website. This will still need to be shown.

Browser Compatibility

Currently the sites are designed to work on the following browsers: IE5.5, IE6 & IE7.

We require the new solution to have the following compatibility at a minimum IE6, IE7, IE8, IE9, Safari, Firefox and Chrome.

Delivery channel Compatibility

Minimum compatibility should be; Ipad, Iphone, Android, PC, Macintosh

 

Ajax Controls

These are feature rich controls such as suggesting a narrowed down list of occupations as the user starts to key in their occupation. These features require, however, java script to be enabled.

Standards

The latest W3C web standards should be used to render the pages.

Search Engine Optimisation

We welcome your feedback on this point.

Design Agency Deliverables

Our client is suggesting a staged delivery approach. This will help us to identify any technically unsuitable or high cost to implement designs at an early stage.

Stage 1 – Performed by design agency

Graphical Design. This will enable our client to select the style for the site.

Stage 2 – Performed by design agency

The design will be mapped to HTML template pages. There will be a template for each page variation. For example, a question page, a quotation page, payment page, an informational page, etc.

This stage will prove that the design is implementable. Test pages for each template should be hosted in a test area of the design agency server for access by our client

The deliverable will include:-

  • Layered PSD for all web assets
  • HTML pages for every template page. This must include working:

Rollover functionality

Ajax Controls

Error handling example

JavaScript

Style Sheets

Stage 3 – HTML Pages

Based on the page templates from stage 2, our client will map questions to each page and provide the design agency with Visio diagrams.

The Design agency then takes those Visio wireframes and creates HTML: pages for the full site