Prototype - deadline Friday 6th May

General information for the website: Energy projects database
Kind of development: New website from scratch
Num. of web pages/modules: 4
Description of every page/module: We want to create a prototype to do some testing with users to see how they interact with a new design and new functionality.

The work involves adapting a home page, which includes some initial search parameters, a further page that offers more parameters and then a new state that serves the search results and associated analysis. The current pages look like this:

1. Page 1: http://thecurve.me/ (we only need to amend above the fold, we do not need to re-create below)
2. Page 2 - state 1: http://energy.thecurve.me/investments
3. Page 2 - state 2: same as above, you just need to scroll down

I attach wireframes for how we want these pages to look.

You want to follow these wireframes as faithfully as you can to help a user:

1. Make an initial search, initially based on 3 predefined parameters.
2. Then narrow the search with the option to:
+ Choose to include "Assessed projects"
+ Apply sliders on the "Payback"
+ Select one or more "Technologies"
3. See the results, as:
+ A list of "Projects" with the headers
+ A list of "Suppliers"
+ Analysis: a scattergraph, pie charts, list of top suppliers by recommends
4. See Project page [this work is only to be done if time allows]

I do not know how realistic it is to use "real" data, but I am supplying it, and the structure.

YOUR OBJECTIVE IS TO CREATE A REALISTIC PROTOTYPE THAT ALLOWS USERS TO GO THE JOURNEY DESCRIBED ABOVE.
Description of requirements/features: COMPLEX TASKS:

Please read these first. If anything looks too complicated then we will be able to de-scope, but still successfully test users responses to the interface.

> Database / Data structure for: Technology Area/Technology
The data is structured so that these are shown together - (e.g. INDOOR LIGHTING - Lighting controls upgrade only – Presence sensors). You need to separate the field into 2 separate fields. I have started to do this in the file attached, called "Data structure". You will also need to treat the data in the "Database" file
> List of projects. Are you able to apply a colour scheme to the "Technology" and "Site Type", with hover over that names the "Technology" or "Site Type"
> Search results - toggle to list of "Suppliers". Users need to be able to switch to a view, based on the same parameters, of the suppliers who have worked on the projects that match the search results.
> Scattergraph. The idea is that users would be able to see the results of their search plotted against: all data/only projects using the same "technology area"/only projects in the same "sector"/only projects of the same "site type". A logarithmic scale might work well. We use a tool called highcharts to create our charts etc - www.highcharts.com
> Pie charts: There are 4 pie charts, each calculated by looking at the proportion of each type of technology area / site type / star rating / co-benefit is returned by the search parameters (n.b. often a pie chart will be one block of colour as the search will only be looking for one type of technology area / site type / star rating / co-benefit.
Extra notes: The attachments:
1. Wireframes for the three pages / states (as described) above - also available here: https://invis.io/3X74NWBZR#/154161109_Search
2. Data structure (this will allow you to create the drop down options that users might select in the search process)
3. Database (this has the details of 600+ energy projects - it is all anonymised, so the data has no inherent value)

If completed successfully, there is an additional job to do - which is to demonstrate an example "Single Project" page