[Project Complete] $500 Usability Consulting Website

[kylepero]

(Admin code added by Palmer - 2MD41121VG473784Y)

Hi everyone,
Thank you in advance for helping me redesign my website! I need a template that consists of a homepage and a subpage (with and without secondary navigation) for my new website. The prize for this contest is $500 and the deadline is 9/15.

I started to redesign the site myself, but quickly relized that it would be wise to leave this to professionals who actually know what they are doing. :) You can see the path I started going down here, but please only view this as a reference. I am open to seeing completely different designs:
http://usableinterface.com/relaunch/
http://usableinterface.com/relaunch/services/services.html

Below is my creative brief. Please don’t hesitate to ask questions if something needs clarification or if you need further direction.

Thanks,
Kyle

-----------------------------------------------
Company Details

1a) Name of Company
Usable Interface

1b)Company Tag Line or slogan:
“Usability and user interface design consulting” – I would like this to be in the header near the logo.

1c) Do you have a company logo?
Yes. I have attached it (300dpiPSD.psd).

1d) Do you have a corporate visual identity?
Currently, just the logo.

1e) What is the nature of your business?: Briefly describe your products or services:
Usable Interface is an independent consulting company specializing in website usability and user interface design. I provide consulting in the following niche areas: user research, usability testing, interaction design, and information architecture.

1f) Who is your target market? Who are you hoping to reach with your site?
I am not targeting small mom and pop shop owners. I am targeting bigger clients with more demanding needs for usable websites and online applications (banks, pharmaceutical companies, software companies, e-commerce sites, etc).


Website Details

1b) Do you have an existing website?
Yes, but content will be completely different: http://www.usableinterface.com - Note: This website was an old portfolio site when I was a contractor. The redesign of this site is my business transition into consulting. Content for redesign is posted at the end.

2b) IMPORTANT: Please list at least 3 URLs of high quality sites that you like the look of:
http://www.webtrends.com/
http://www.webex.com/solutions/online-conferencing-solutions.html
http://www.uiarchitects.com/default.htm
http://www.synergymail.com.au/
http://www.mailchimp.com/
http://www.clicktracks.com/
http://www.bluehornet.com/
http://www.filemaker.com/
http://www.technorati.com/ - a tad cluttered, but I like the design.


3b) What colors or color schemes would you like?
I want to use the color scheme in my logo. I like the color scheme in my existing website using the bright orange as a contrast color.

4b) List the Navigation links for your Site:

1. Home
2. Company
2.1 Partners
3. Services
3.1 User Research
3.2 Usability Testing
3.3 Interaction Design
3.4 Information Architecture
4. Clients
4.1 Testimonials
5. Articles
6. Contact

5b) What type of look are you trying to achieve?
I am looking for a very clean, sharp and professional look. I want the interface to be simplistic. I don’t like a ton of graphics at all. I prefer the navigation to be text (not graphics) and for the section the user is currently in to be clearly highlighted when the user is on that page (utilizing css).

6b) Please provide the addresses of competitors' sites, if possible:
http://www.messagefirst.com/
http://www.electronicink.com/
http://www.boltpeters.com/index.html
http://www.sachsnet.com/
http://www.xperienceconsulting.com/eng/index.asp
http://www.user.com/index.htm
http://upassoc.org/people_pages/consultants_directory/index.html - Never ending list of my competition.

7b) Do you have any images for use in the design of your site? If not, do you have images, can you offer suggestions of what you type of imagery you feel would be most suitable for your website:
I do have 4 icons representing the 4 different services I offer (see attached images). I will be using these icons on the Services page, but I could see them possible being used on the homepage.


Deadlines and Deliverables

1c) What is the deadline for the design of your project?
September 15th

2c) What is required breakdown of the files you require our designers to supply you with on finalization of your project?

PSD, HTML, and CSS style sheet. No JavaScript please. Code needs to be cross-browser friendly. I need a home page and a sub page (with and without a left-side nav).

Are there any other comments/specific ideas we should keep in mind while designing your project?

- I prefer to have a top horizontal global nav. For subpages that require a second nav I prefer it to be on the left-hand side.

- The template should be designed to fit an 800x600 screen resolution. The width of the template should be approx. 775px.

- I really don’t prefer the use of stock photography. I like the use of illustrations and icons a lot.

Footer Copy: (consistant throughout entire site)

© 2005 Usable Interface. All rights reserved.
Usable Interface | 23 E. Park Road Newtown, PA 18940 | 267-241-4786

Homepage Copy:

Who we are…
Usable Interface is an independent consulting company specializing in website usability and user interface design. We are located in Newtown, PA (near Philadelphia). Learn more about us.

What we do…
[icon] User Research
[icon] Usability Testing
[icon] Interaction Design
[icon] Information Architecture

Why you need us…
On the web, it’s survival of the easiest. We can help make your website and applications easier to use so you can provide an unparalleled user experience. Our focus and expertise is in translating your users’ needs and wants into a highly usable interface. We know and understand what it takes to be succesful online. Contact us to discuss the details of your project.

What our clients think of us...
I'd like an area for a featured client testimonial w/ a link to read more.

[Lori]

Hi :)

Considering what you do for your livliehood, in usablilty consulting, I need to ask and make clear - you need two pages, designed and coded in HTML tables... one homepage - one inner page? You do not need a tableless design?

Correct?

:)

[kylepero]

Hi Lori,
Yes, I want 2 pages designed and coded in HTML tables -- a homepage and subpage (inner page). I did request two versions of the subpage (one with and one without a left nav), but if this is requesting too much for the prize amount then we can just leave out the version w/out the left nav.

LOL, does this make sense or did I confuse things more?

[Lori]

No - I think for your project prize you are just fine :)

Good luck on a succesful design project!

[kylepero]

I was looking at some of the other contests going on and I noticed a submission by Anne that was very nice:

http://www.annesdesign.net/do/dqs_v1_b.html

Cheers,
Kyle

[kylepero]

Hi All,
Only 5 days to go... is anyone working on something? :weep:

~ Kyle

[Lori]

Hi Kyle,

I threw something together rather quickly (in about 40 min) as I don't have a ton of free time today - but wanted to make sure that you got a start off here :)

The only problem I can see in working with you on this, is I really do NOT like coding in tables. I prefer to knock out my markup in standard compliant XHTML/CSS (no tables) - I too am a usabilty/accessibility gal. The way I see design is in a grid, and really nothing I produce goes into tablesets with ease. So, I am not sure that will make this an option for you, but I wanted to try anyway.

[kylepero]

Thank you very much Lori for getting this started! As for the HTML tables... I'm willing to go without the tables and just use XHTML/CSS as long as the code is cross-browser friendly. I just don't want the design to look really messed up in another browser. Are there any known browser issues with XHTML/CSS?

Here is some feedback on your design:

- I really like the faded background. It looks cool, but I think the light blue at the top is too drab. My logo seems to really pop when it's on a white background. I would like something bright and crisp.

- The tag line looks good. You placed it well.

- I don't like the way the navigation bar cuts through the logo. I would prefer to have the navigation bar beneath the logo. This will also make it easier if I need to add a section later.

- The lines going down the sides of the interface are cool, but there is something weird about how they disappear.

- The font, type style, and colors used look very nice.

- The icons look good, but I think it makes the "What we do..." area repetitive. Would it be possible to make "What we do..." the title for the area with the icons and remove the list with the orange bullets?

Again, thank you for getting the ball rolling and hopefully getting others to join in. I'm amazed with what you can do in 40 mins!

Cheers,
Kyle

[Lori]

If your coder knows what they are doing, there will be no cross-browser compatibility issues :)

Here are some changes:

[Lori]

and:

[kylepero]

For the area that discusses what our clients say, I may put a small logo of the client with their quote.

[Lori]

and if you need 'borders':

[kylepero]

Wow, that was quick!

Feedback:

- I definitely like the white much better. I prefer the faded background incorporated in message #12.

- I like the tag line placement better in message #9, but I'd stiil like to see a version with the nav below it.

- Can you put the "What we do..." title above the icons?

Thanks for quick revisions!

[Lori]

Navigation below, What we do added:

[kylepero]

Looks great Lori! Thank you again for being so speedy.

[Lori]

and on opposite sides:

[Lori]

Looks great Lori! Thank you again for being so speedy.

No problem :)

Let me know if you need anything further!

[Anne]

Here's my entry. I am also working on another one (same design but different placement)

Anne

[Anne]

Here's the second version.

Looking forward to your feedback
Anne

[kylepero]

Anne,
Thank you very much for your submission! I definitely like your second version (message #19) better than your first.

Feedback on your 2nd version:

- I like the darker faded background much better on your designs.

- I like how you emphasized the tag line.

- I like the rounded corners around the interface.

- I don't mind if the navigation bar has color, I just think it stands out too much considering it's really the only block of color on the page. My eyes are 100% drawn to the navigation and I prefer that it be secondary to the other information on the page. Is it possible to tone down the navigation bar?

- I like how you layed out the different areas underneath the navigation. It makes sense to put "Who we are..." above "What we do...". I like how you choose to order the information, but I don't like that the client area is off to the left. Would it be possible to put that on the right side?

- The icon next to "What our clients think of us..." is nice, but I prefer not to reuse the same icons that are being used for the services. Can something else be used in place of it?


Why I didn't prefer the 1st version:

- Too much color for my taste.
- I'm not a fan of the use of faded backgrounds behind text.
- The order of the information in the second version made more sense.

Good work Anne. Thanks again for joining the contest :D

Cheers,
Kyle

[Anne]

How is this?

[kylepero]

Anne,
Thanks for making the changes so quickly. Looks great!

Thanks,
Kyle

[kylepero]

Anne, Lori and any other willing particpant,

Can I see what the subpages would look like?

Thanks,
Kyle

[Lori]

I designed my look so that there would not have to be much differentation - you can use all the open space:

[Lori]

.. or use columns (either side) as needed:

[Anne]

Here's the subpage

Anne

[kylepero]

Both subpages look great. Here is some feedback for the both of you...

Lori,
I like both of your versions, but what would the pages with a left nav look like?

Anne,
I like this, but what would a page look like if I didn't have a headline or other extra copy to put beneath the nav. Also, what would a page look like that had no left nav?

As always, thanks for your quick responses!

Cheers,
Kyle

[Anne]

If you want a left nav and have nothing else on there could streatch the backgound all the way to the footer and maybe add a water mark as shown below :)

If you have no left nav I would stretch the main content all the way to the left.

Anne

[Lori]

Ask and you shall receive - as mentioned, this particular layout offers you options for full use of whitespace, or left or right columns. To me, looks good all three ways:

[kylepero]

Excellent! Both look great.

Thank you :D

[Luc]

Hi! :) I'm working for this.

[Luc]

Here's my entry.

[kylepero]

Luc,
Thank you very much for your submission! Here is some feedback...

- I like the style and color of the header, but I don't like the placement of the tagline far off to the right.

- The navigation bar seems a little out of place. Everything on the page is bright and this area is very dull and dark.

- I like your variation of the "What we do..." area, but I like the order that Anne had of putting "Who we are..." above "What we do...".

- The testimonial area looks very nice.

- I'm not too wild about the use of the mouse as a background image. I'm not really all together fond of background images.

Good work Luc. Thanks again for joining the contest.

Cheers,
Kyle

[Luc]

Hi Kyle. Thanks for your feedback. I decided to withdraw my initial entry because some elements have been already used by the first two participants so I wanted to give you another option, something a bit different from them.

You said you want how Anne did the placement for the What We Do. I'm sorry but incorporating design elements, (I believe this also includes the placements), is not allowed.

Here is my new entry. I look forward to your feedback.

[kylepero]

Lori, Anne and Luc,
Thank you all so much for your wonderful submissions! All of the concepts you posted were really great. I appreciate all the work you put into them.

I have choosen Anne as the winner of this contest. Crongratulations Anne!!! I really love your design. :D

There are just a few small revisions that will need to be made. How do I move the thread over to that forum?

Cheers,
Kyle

[kylepero]

Thank you again Anne for doing such a great job! Here are the revisions I needed...

Header:
- The mouse in the logo looks like it's being cut off on the bottom a little.
- The word "Design" in the tagline should also be bold.

Top Nav:
- I'd like for the section the user is in to be highlighted in some way (font color change, bgcolor change, whatever you think works).

Font of copy:
- The size of the font and the style is a little hard to read for me. I really like the font and size on this page: http://www.cooper.com/content/company/about_cooper.asp I believe they are using verdana.

Why you need us:
- Can you add a button like you did for the "Who we are" section. The button should read, "Contact us to discuss your project"

What our clients think of us:
- The title for this section is smaller than the others. Is it possible to have it the same size or does it look bad when it's on 2 lines?
- I also liked it when you had a small icon on the left of the title. Is it possible to use the icon you had before, but change it a little? The color of the shirt would need to be changed (adding a suit or tie would be cool) and adding empty voice bubbles would be neat. Lemme know if this is possible.

Subpage:
- Can you replace the faded background mouse in the left nav with the attached file (large.psd). I'm curious to see how it would look good.

I'm sorry I have so many tweaks. Please don't hesitate if you have any questions or concerns.

Cheers,
Kyle :)

[kylepero]

In the header could you also add a text link in the top right corner to the "Client Extranet".

Thanks!

[Anne]

Thank you for choosing my design :D

I'll work on a revision

Anne

[kylepero]

Hi Anne,
Any update on the revisions?

Thanks,
Kyle

[Anne]

I have had two other contest I've been coding and I am almost finished with both. Then I'll start on yours. I should have it finished by tuesday.

Anne

[kylepero]

Ok, sounds good!

Thanks,
Kyle

[kylepero]

Noticed something else in the tagline that should be changed. Can you capitalize every word except for "and"?

Thanks!

[Anne]

Hi

You can se the changes and the html here (http://www.annesdesign.net/do/) and the sub page (http://www.annesdesign.net/do/sub.html)

Anne

[kylepero]

Hi Anne,
I can finally get back on DO's website. The site looks perfect! Thank you so much for all your hard work. :-) You can send the files to my email address when you have them ready.

Cheers,
Kyle

[Anne]

Files sent.

Anne

[kylepero]

I have received the files. Everthing looks great!

Thank you Anne!