[Project Complete] Indoor Air Quality Website / Template ($750)

[fareENOUGH]

(Admin code added by Palmer - 1875159734)

Hi all, we have an interesting project here, I think.

We're developing an Indoor Air Quality (IAQ) website application called Communicair for a company called C5 Plus Ltd. The idea is to have an IAQ communications program to communicate the air quality results to the building occupants in an understandable form.

We only require PSD files, not HTML. No Flash, please, the site has to be handicap accessible.

<b>PART 1 - IAQ Report Card (3 Pages)</b>

The key to the application is the IAQ reportcard , which is a snapshot in time of the air quality for the occupant's building and floor. A mockup can be viewed at http://www.communicair.com/mockup/iaqreport.aspx.

The concept here is to have a <i>very</i> easy to understand , highly visual summary of seven IAQ measurements. Think, if you will, of USA Today readers as the typical audience.

The page can be reached from the client's Intranet (not our concern), or from our own launch page http://www.communicair.com/mockup/

If the occupant wants more information, each measurement section will have a link saying something like "tell me more ..." and will take them to a detailed explanation page. The information here will be a bit more technical, but still extremely clear with fairly simple graphics. However, there may be a more complex chart from hte technical report, and the explanations might be more NY Times than USA Today.

Acouple of examples can be seen at:

http://www.communicair.com/mockup/freshair.aspx
http://www.communicair.com/mockup/dust.aspx

The fresh air page is a better example.

Because this site is primarily designed for office workers to access from their offices, we can assume both broadband connectivity as well as larger monitors. Obviously, we'd like this to look good at any resolution, but we're probably safe to assume most viewers will be in 1024 x 768 mode.

There will also be links to the actual report, but the presentation of that material is outside the scope of this project, other than with respect to Part 2 below.



<b>PART 2 - Putting the Cart Before the Horse (2 Pages)</b>

The company itself has a website at http://www.c5plus.com, and is need of a serious makeover. So, it makes sense, I think, to have a template done for the site proper, and thus have a logical place for the Part 1 stuff to fit within.

I'm calling this the cart before the horse since the development of the application is the priority driving this project, rather than having an existing site design to work within.

This is more of a general audience, so we probably should not assume the same level of broadband and high resolution monitors to the same extent, but it still is a purely business site, so ...

Also, the only sacred cow is the existing logo, it has to remain the same.


<b>SUMMARY</b>

Company name: C5Plus Ltd.

Company profile: Environmental Health Scientists specializing in Indoor Air Quality, Naturally Occurring Radioactive Materials, Energy Audits and Green Buildings, Greenhouse Gases, Industrial Hygiene, and Asbestos.

Domain name: www.c5plus.com, www.communicair.com (we haven't fully decided whether to keep the application in its own site or wrap it into the C5 Plus main site, but we're leaning toward keeping it in the C5 Plus site and just redirecting the communicair.com url).

What is the scope of this project?: New site and complete redesign

Who is the intended audience?: Professional, white collar office workers, engineers, managers, scientists.

Mood or tone?: Professional, simple.

Color psychology?: Umm, Err?

Any dynamic elements?: Not to worry, we'll take care of that, although rollovers are always nice.

Who are your main competitors?: There really aren't any, at this point, but:

http://www.phhenvironmental.com/
http://www.sterlingiaq.com/
http://ehs.golder.ca/quality.htm

What resources can you provide?: Logo, pictures, documents, fonts, color schemes, etc.

Websites you like:
http://www.fareenough.com/
http://www.greenmail.com/


Deadline: May 6, 2005


I'm sure I've missed many things, but I hope this is enough to get everyone started. I should be available to respond to questions most of the time.

Thanks everyone!

Curt

[Aliska]

Hello :)
I will join to your contest. Will create some versions and upload in 2-3 days

[fareENOUGH]

Thanks Aliska -- we're looking forward to seeing what you have in mind.

Cheers,

Curt

[Aliska]

Do you have logo in PSD or any other suitable format? or in jpeg with better resolution?

[fareENOUGH]

Here's what we have, I hope it's ok.

Curt

[Aliska]

Hello Curt.
Here's my first design. Am I moving in the right direction?
Coz I already started with 1 more design, will upload it tomorrow. Just wanted to receive some feedback from you, and use it in my another design.

[Aliska]

Hello :)
And my second version. What do you think?

[fareENOUGH]

Aaarrrg! I hit the wrong link while trying to reply to Aliska - the final design decision has not been made yet!.

Sorry.

Curt

[Michael]

Title edited :)

[Victoria]

Hi Curt,

I'll join this one. Expect an entry soon from me. :)

[fareENOUGH]

Aliska, your examples look like a really good start.

We really liked the intial impression from example 1: the cooler colours, spaciousness, the general clean look.

We liked the second as well, but the intial emotional impact from the colours is perhaps too sharp. Nice thought on the sort of hi-tech look, but we preferred example 1 for that initial impact.

We were wondering if it would hurt the effect of example 1 to tighten up the text line spacing, closer to example 2's?

Other stuff:

We'd like to try to have a tagline in the header: "Environmental Health & Technology Consulting Scientists"

It would be nice to integrate some more relevant images on the page, I assume the ones you placed were for general effect. Perhaps something later from the IAQ section? Also, everyone here is inordinately fond of the subsurface hydrocarbon 3d image: http://www.c5plus.com/Contour.gif.

Could we switch the "Welcome" content to a "Latest News" section with, say, 3 headlines? I'm not sure what effect that will have on the overall look, so feel free to move stuff around as makes sense to you.

Thanks!

Curt

[fareENOUGH]

Victoria, welcome!

Curt

[Aliska]

Hello
Some changes already. What do you think?

[fareENOUGH]

Wow, quick and good!

I'm thinking we can deal with the tweaks to the main page later, I'm curious what the secondary page template will look like now. And, of course, how the IAQ stuff will fit into it :)

[fareENOUGH]

FYI to everyone, I may be in Sunday, but definitely will not be around tomorrow.

Cheers,

Curt

[BrianDove]

Here is my entry. Looking forward to hear from you Curt :D

Regards,

Brian

[Aliska]

Hello
Here's my version of subpage. Looking for your feedback

[fareENOUGH]

Aliska, looking good.

I'm going to try to break this feedback into two distinct parts: the subpage, and the IAQ report card.

<b>Subpage:</b>

We generally like the subpage, but were wondering if it would make sense to have a slightly smaller (in height) banner and bar than on the main page.

If we're going to have the left menu on most pages (and it makes sense we would), I think we'd like it a bit narrower in width so as to free up some more space on the page. We'll undertake to guarantee we won't have any menu items longer than, say, "Consulting Services". I suppose that would mean narrowing it on the main page as well - sorry.

<b>IAQ Report Card</b>

The trick with the communicair report card is that it's a restricted site specific to the clients who are having the IAQ done. In other words, it's a subsite/application unto itself.

So, it really should be a distinct site, not part of the overall C5Plus site in terms of links and menus. However, it should still brand itself as a C5Plus subsite, with the same general look and feel, and have a link to the C5Plus main site. It should probably still use the C5Plus logo, but a different tagline such as "Because we care about your air". We also were wondering if it would make sense to have a different header graphic than on the main site? For that matter, would it make sense to have a slightly different color scheme or visual cue?

Because the entire IAQ site is really only the three pages, I wouldn't think we'd need the left menu?

On the report card itself, feel free to modify the layout or colors of the charts, they're only there as an example. Of course, I'm going to have to code the charts from the database, so the horizontal histograms you see there are really easy for me to do.

One thing that bothers me in the mockup and has made it into your version is that there's a date in the measurement column -- which is the date the sample was taken. I'm not sure it's clear to an end user that's what it is, or that's necessarily where it should be.

I hope I'm explaining this ok, and it's perfectly ok for you to push back on ideas or ask for clarification; we're really liking your efforts!

Curt

[Aliska]

Hello Curt
I've maid left menu smaller on the main page, so it will be the same on all pages.
And I think it will be a good idea to have small differences in design for a restricted area. I will think how I can change the look for it, may be upload a version tomorrow.
What do you think about uploaded pages?

[fareENOUGH]

Brian, thanks for the entry, but at this point we're definitely preferring Aliska's stuff. While we appreciate the cleanness of your design, it's perhaps a little too sparse.

Also, the comments we made to about the report card being a different section would also apply to your design.

Curt

[fareENOUGH]

Aliska - that's exactly what we were looking for on the menu, and the subpage looks really good as well.

We're eager to see what you come up with tomorrow.

Curt

[BrianDove]

Brian, thanks for the entry, but at this point we're definitely preferring Aliska's stuff. While we appreciate the cleanness of your design, it's perhaps a little too sparse.

Also, the comments we made to about the report card being a different section would also apply to your design.

Curt


Ok :)
No problemo.
Brian

[Lori]

Curt,

Are you choosing to finalize your project with Aliska, or will you still accept entries from other designers?

Thank you for the clarification :)

[Aliska]

Hello
And version for IAQ Report Card. What do you think?

[fareENOUGH]

Hey Aliska, it just keeps getting better.

We talked about this a fair bit this morning, and the main feedback was that we'd like the branding to be more Communicair and less C5Plus. Almost the exact reverse of the current emphasis, actually. One suggestion was to move the "Communicair Indoor Air Quality Program" text into the blue bar where it currently has the www.c5plus.com text, and perhaps darken the blue bar to provide more contrast. Not sure how that will play with the tagline, though. What do you think?

We notice the sample date has entirely disappeared, but we now think that's for the best, since it'll be available in the "more info" page. BTW, there will be a "more info" link for every IQ category, we just haven't written them yet.

We definitely like the new chart colors, thanks.

With respect to the charts, we're wondering if there's an easy way to make sure people understand the relationship between the results and the guidelines, regulations, or outside air measurements. Would it make sense to have some text on the charts, or more closely match the colors of the bars and the appropriate text, or even line up the bars with the text rows? There will always be exactly one bar for each results, and one bar for each guidelines, standard, or outside reference, although our mockup does not accurately reflect this. Or is this incredibly obvious already, and we shouldn't worry about it?

One last thing: the date dropdown should probably have some button or graphic submit the page to see another date. Should it just say "Go"?

Thanks,

Curt

[Aliska]

Hello
Some changes at IAQ Report Card page. Am I closer to your idea?

[fareENOUGH]

Aliska, yes, that's much better.

What do you think about our concerns with the charts?

We're also thinking to just get rid of the C5Plus url, since we already have it on the bottom of the page as a text link, and we'll make the logo an href to the main site.

Oh, and we just noticed one other thing that we did have on the mockups: a cookie crumb trail showing the location og the page, such as: Communicair home --> Report Card --> Fresh Air Explained. That's actually an explicit usability requirement for this project. Sorry we didn't cath this one earlier.

Overall, though, we're pretty darned close.

Thanks,

Curt

[Anne]

Do you accept more entries or do you want to go with Aliskas?

[fareENOUGH]

Hi Anne, how are you doing? Lori, this message is for you, too.

We haven't yet offically awarded this project to Aliska, but we're very happy with her work and the responsiveness we've seen so far.

I guess the answer is that the contest is still open for probably a day or two, but that Aliska is definitely being viewed very favorably by us at this point.

[IDarwish]

Hello,

I will also try and post an entry soon ;)

Imad

[Aliska]

Hello, Curt!
Ok, as about charts. As far as I understood these bars are generated with some script and I just don't know if it would be easy to change this script to match new colors. In example below I used your suggestion to have the results text and bars be the same color. If you can change the script the way it would generate such bars, it's cool! If no, please let me know how should I design these bars.

Also, if you feel there should be other colors of bars, text, or background, this could be easily changed. Just let me know which colors to use.

[fareENOUGH]

Hey Aliska, thanks for the new version.

Looks like we might have sent you down a bit of a blind alley on this one. Let's just stay with the previous "blue bar" version, at least for now. You're right that I can easily generate these graphs in any color, so don't worry about that.

The general format is great, so we'd love to what you have in mind for the last two pages.

One comment about the launch page (http://www.communicair.com/mockup/): The mockup has alternating floor colors, and each floor is a link to the report card. Turns out in the real application that many of the floors will not have a report card or link, so should just be visually subdued and show the floor number without any link. There's no pattern to which floors in any given building will have links, some will be large groups of floors, some will be one or two floors.

Thanks!

Curt

[Aliska]

Curt, I've done freshair page and you can see report page with blue bar for now. I will post launch page tommorow cause it's already the end of the day here;)

Thanks for quick answers:)
Aliska

[fareENOUGH]

Oh boy, I really said that wrong. :oops:

I'm sorry Aliska, when I said let's keep the "blue bar" version this last time, I meant like in post #26, where the bars in the graphs are blue, etc. We're quite happy with the upper "Communicair" bar staying the tan color.

We quite like the layout of the freshair detail page. Do you have any ideas about what we could do with the big graph on the bottom as far as colors and/or layout? You don't need to try to create a perfect example, but we're looking for guidance on how to make it fit well with the rest of the page.

Thanks again,

Curt

[Aliska]

Hello, Curt!
Don't worry about "blue bar". It was quite easy to make changes back;) (see report.jpg)
I've made some changes with the big graph on the bottom to make it fit well with the rest of the page (see freshair.jpg).
And I've made the launch page. What do you think about it?

And one more thing... If possible, could you please let us know all info about additional changes you need before Friday evening? I will be away from the city from Saturday morning till May,4 and if it would be possible to complete project before Friday night, that would be great! Otherwise, there would be quite big delay in communication between us ;)

Thanks,
Aliska:)

[Lori]

Hi Curt,

I am head deep in my design for you, and wanted to check in and let you know that I am working on it :)

[fareENOUGH]

Lori, In answer to your question of whether the contest is still open, we were going to close it today, but we'll wait until tomorrow now.

Thanks,

Curt

[Lori]

Thank you very much Curt - I will try to make it worth your wait ;)

[fareENOUGH]

Hey, Aliska, I hope you're getting a vacation :)

We like the launch page, but we think we should be consistent in making all the links a single color and style. We also like your changes for the big graph.

The one issue we still have is that we're still thinking that the small graphs and their associated text will still be the same colors they show in your example from message #26: dark blue bars for good results; light blue for standards and guidelines; and gold/tan for not so good. Blue text for good results, black lighter text for for standards and guidelines, and gold text for not so good.

I guess the question is: in light of staying with your original colors, should the other colors on the pages stay the same as you have them now, or should they be slightly modified. We're thinking in particular of the gold/orange history chart on the freshair page, as well, I suppose, as the big graph.

Everthing else looks great.

Curt

[Lori]

Hi Curt,

Since I want to be able for you to see all the mockups without having to click links, I am going to put them all in one post - mind you the post will be VERY long, and if you would prefer to see them a different way they are all here: http://www.zenfulcreations.com/client-files/do/c5/

With that said, each page that I did, I tried a different photo on, so you can use one, you can use several - I just wanted to give you different options. Any of the photos, both at the top, and in the rounded areas are a snap to change, so let me know.

They way I have designed my layout, makes it optimal for programming in CSS-p vs Tables. I have tried to minimize graphical need through the entire design.

That is about it ;) Here are my designs:

Homepage:
http://www.zenfulcreations.com/client-files/do/c5/index.jpg

IAQ Building & Floor:
http://www.zenfulcreations.com/client-files/do/c5/reportcard_2.jpg

IAQ Report Card:
http://www.zenfulcreations.com/client-files/do/c5/reportcard.jpg

Dust Levels:
http://www.zenfulcreations.com/client-files/do/c5/dust_levels.jpg

[BrianDove]

I will try something new also today :)
I will post it in a few hours...
Brian

[BrianDove]

Here is my second try :)
Feedback are welcomed. Tell me if you want to get a subpage version of this design ?

Rgds,
Brian

[fareENOUGH]

Ok, sure, make it hard for us now. ;)

We're perusing and cogitating like mad. We'll announce a winner at 1 pm our time (it's about 10:25 am aas I post this).

Cheers,

Curt

[Aliska]

Hello :)
And changes at my latest version

[fareENOUGH]

Ok, we have a winner: we're going to stick with Aliska's design.

Brian and Lori, we really liked and do appreciate both your efforts. Thank you so much.

Aliska, if you have time, could you get us the PSDs of what we have to date. We can work on the final revisions and tweaks once you get back.

Thanks again, everyone.

Curt




:clap:

[Lori]

Curt,

Thanks for the consideration :)

Congratulations Aliska!

[Aliska]

Hello Curt.
Thanks for choosing me. I really appreciate it.
I sent you link to download files in PM.