Purpose:

I am building a website: wiredwalking.com. I'm a psychologist just out of school, and I'm studying how people can learn to walk while typing and going online.

The purpose of the website is to teach people how to take any treadmill they can find and build a desk over it. At the site, people can also learn how to do all their computer work while walking slowly on a treadmill. After a few weeks many people are then able to walk for 2-4 hours throughout the day while they type, check e-mail or go on facebook!

The site will have a how-to guide, a forum, and a way to log in mileage. So each day a user will enter how much they walked on the treadmill. Then the website adds up all the miles so you can see how many miles (or kilometers) you walked in the past month!

I have the basic design of the website, but I would like it to look better! I made some draw ups (using MS paint!) but it needs to be finished.

Here is what I have so far: http://www.gamerprotocol.com/imagesWW/main.png
http://www.gamerprotocol.com/imagesWW/benefits.png
http://www.gamerprotocol.com/imagesWW/tutorialTOC.png
http://www.gamerprotocol.com/imagesWW/tutorialsection1.png
http://www.gamerprotocol.com/imagesWW/about.png
http://www.gamerprotocol.com/imagesWW/VirtualFitnessTrek.png
http://www.gamerprotocol.com/imagesWW/bottom.png
http://www.gamerprotocol.com/imagesWW/top.png

What I'm looking for:

I've made the basics of the site, and I've tried to include concepts that I know about psychology and the way people process information. There will be a lot of information on the site! So it's important that people be able to navigate.

I'm less interested in having a flashy website! I am more interested in a website based upon usability and navigation.

For example, I know that white space on either site of the content helps people read and process the text. I know people are visual creatures! So pictures and charts are quiet important! Finally, I know that people tend to scan more than anything else, so I tried to reflect that in the design of the website.

But I'm no designer!! So the website needs to be cleaned up!! There are certain problems with the website, so below I wrote up for each section what I tried to do, what I like so far, and what I think needs improving.

Note: the website -- the whole idea -- is not really about treadmills. It's more about moving while you're on the computer (as I'm doing right now!). The focus on the website won't be about treadmills- it will be about following basic rules (such as always keep cool while walking, always have water nearby). There will also be a community of like minded individuals. Some will become wired walkers to lose weight. But others will have back problems, or just not have time to do exercise during the day.

Interested in helping? Read more below! If you think you can make the site easier to navigate (and easier on the eyes) send a proposal. Thanks!

Top of the site

At the top of the site, I have the logo and the tagline. I like the logo as it is right now, though I may change it in the near future.

The tagline is from the "Trebuchet MS" bold that I made "fuzzy" in photoshop. I also use this font for the main sections.

On the right, there's a calendar where a person will be able to click on a date and then enter in how many miles (or kilometers) they walked on a given day. No need to focus on the details and links there right now, but I would like the calendar to match the overall colors of the site.

Below the calendar there are the main links to the 7 sections of the site. At first, I was going to assign a color to each section (that's why there's a box with a different color next to each section). But I think having so many different colors doesn't add to the site.

What I like:
I think the logo is okay for now.
I also like that the calendar is at the top making it easy to add in the daily walking mileage.

What I think needs improving:
Not sure what the colors should be.
I don't want the calendar to be grey. Whatever color scheme is put in place, I'm sure they can find a matching calendar.
Also, I'm not sure what the font should be for the navigation.

Bottom of site

So far I have a section that serve as a directory and some basic icons and the social media links.

What I like:
I like the blue white, and the font there.

What I think needs improving:
Not sure if I'll need the icons. If so, they should match the site. I can provide icons as I got from a collection a few years ago.

Also, there might be too many boxes.
And the font should be changed.

Home Section

The top is there to show what the website is about with the picture and a brief definition of "Wired Walking"

Then there are 5 main boxes to show the sections of the website. Again, I was going to color code everything, but I think that might be too complicated.

To the right is the "what's new" section and other info.

In the future, I may have the main picture be an actual picture (rather than a cartoon drawing). Might feature different "Wired Walkers."

What I like:
I like the white space, the "Wired Walking" font and the lines connecting to the sections on the right.

I also like the format of the indented lines with the main points in bold. This helps when people are just scanning.

What I think needs improving:
I'm not sure if there should be boxes to represent the main website sections.
There may be too many boxes already.
And the banner section should be changed, where it says "About Wired Walking"

"Welcome to" and "Version 3.0" should either be icons or have a better font, as should "begin -->"

Also, maybe there should be better flow between the title, the main picture, and the website options?

About/Benefits Section

These sections for now may just have pictures and a short paragraph. So I set a section for the text and a big picture. Then below is the section where a person can click a different number.

What I like:
Keeps a good flow for the rest of the website. You can tell you're still in the main site. I like the font in the "about" section that says "10 quick facts" I like that the font is more smooth than in the "benefits" section.

What I think needs improving:
The number sequence.

Tutorial TOC (the main program)

On the main site, there's a picture for "the full program" At the program section, there's the same picture and 5 similar boxes for the 5 sections of the program.

Also, there's a blue "breadcrumb" area to help with navigation.
Clicking on one of those five boxes would lead to the tutorial section.
I plan to have a different picture for each section

What I think needs improving:
Not sure if there needs to be boxes.
Not sure what to do if the pictures are of different sizes.

Tutorial section (sample)

In the tutorial section, there's room for pictures, youtube videos, and a to-do list.

Again, the blue "breadcrumb" helps with navigation

What I like:
I like the way there's the website title, line connecting to picture, then line goes down and connects to the pictures/media. I think it naturally matches eye movement.

What I think needs improving:
I'm not sure how thick the line should be, or if the line should be a complete line. Or when the line should end or change depending upon the size of the picture.

Virtual Fitness Trek

Notice this is similar to the main program. So there may be the main page, then a 2nd level page that looks similar to the main page. This would be an example of that 2nd level page.

As there may be specific updates, I can use the line to put up notices. Perhaps on the right side of the page?

What I think needs improving:
Maybe the icons/boxes should be smaller to indicate that this is a sub-section?

Blog/Forum

These sections I'll take care of later.

Overall color

Again, I think having a different color assigned to each section just makes it too complicated.

I know that:
"A site that uses fewer colors is easier to remember than a site that uses many colors. However, this doesn't mean that you should always limit yourself to one color. Sometimes it's good to pair your brand color with another color to make your website look and feel more vibrant.

For example, Jet Blue & Walmart are known for its blue. Most of the website uses blue, but they use a bright orange sparingly to highlight the navigation, buttons and links. This balances out the darkness of blue, making the site more vibrant and dynamic. It also makes their call-to-actions stand out, which is helpful for completing user tasks. If your logo color is a dark color, pairing it with a brighter color could help boost your website's appeal. However, you should use your secondary color sparingly, so that your main brand color can dominate."

From:
http://uxmovement.com/content/how-to-use-color-to-brand-your-website/
(when talking about jetblue.com and walmart.com)

I do like the colors blue and orange. I like the blue color sequence for the tutorial/program section. On the other hand, this website is about gaining fitness and energy. Either way, the calendar should match the color sequence. In general, I like the use of white space as well.

Thanks for reading! If you're interested in working with me-- if you think you can add to the design of the website-- let me know! Thanks!