Case Studies #1:

This Case Study is in regards to the website

The navigation of the site (on the home page) is set up as follows. There is a navigation bar at the very top of the screen that includes "Home", "Explore", "Community", "Submit", and the Login/Search area.
This navigation is always at the top of the page no matter where you are in the site.
The primary navigation bar at the bottom of the banner contains the main elements of that divide the site into its many components.
Secondary navigation is broken up into two parts. On the left is a listing divided by category and keyword.

And on the top of the content is navigation splitting up (paginating) the information by content type.
These groupings make it easy to find certain information provided by the website quickly and easily. The primary navigation bar is the most prominent on the site, taking up the entire width of the page and is located at the bottom of the banner (where the start of the page's info would be or the "typical" location of the navigation bar on a website.) This navigation bar does not disappear when clicking from page to page. The category and tabs appear after clicking on a subject and going to the second level of the site. I can tell that it is navigation because it is a different color from the main section and is set off on the left and top of the pages. Also, after clicking a link in the primary navigation bar (while on that page) the link changes color. However, the content links do not change for pages previously visited. This could be because the site contains information that is more arranged for people who have a specific idea in mind. That is, a person would click "Craft" because they were looking for craft-related projects. Once there, they would not want to be reminded about which links they had clicked previously because the content is continuously updated and previous projects can be searched for.

I always know where I am on this site because of both a list on the left of the page (which is also clickable) that lists the subcategories that I am current under and the primary navigation bar which changes the color of the category link. Also, by clicking the "Home" button at the top of the screen I can get back to the first page at any time.

The site does not appear to have a deep architecture. The main purpose of the site is to provide access to different types of projects in all types of categories (technology, crafts, food, outdoors, etc) and list them in a way that is easy for anyone to find something that interests them. The site has only a couple of levels and these would be the main level, which has majority of the content, and then the instructions for the actual project. Every page has the primary navigation bar and any other page (except for individual projects) can be navigated easily. For this reason, the architecture of this website is very flat. I think that this is a very good thing because it allows me to find the projects I'm interested in much faster through less clicking. I can go from main page to a category and then perhaps a subcategory before finding the project I want. This keeps me from having to guess where a link would be or what page certain information would be found on.

The content hierarchy is very apparent through the use of bold letters, letter size, and letter color. For example, on the home page of the site:
Heading 1:
Large font, bold, all capitals

Heading 2:
Large font, bold, orange color

Heading 3:
Small font, bold

Small font

I think that this is a very effective way to set up the typography of the site as it makes important sections of the page more visible to users while also incorporating the color scheme. The only fix I would make to the site typography is to increase the letter spacing of Headline 2 text, as a couple of lines of it cannot be read as fast as normally spaced letters.

The content of the site is arranged in a way that prevents a user from becoming lost in searching for a specific project. The names of the links in the primary navigation bar are clear and concise and are easily understandable. Also (and importantly) there is no "Other"/"Misc" link to confuse users about the content located on that page. However, because projects are categorized by keywords and terms, it is possible to find a project under several of the main categories (making it easier to find the project).

The grid structure of the pages stays consistent as I go from one page to another. For example, on the home page the layout is:
There is an upper section, a lower section divided into smaller groups, and a right section. Clicking on a project, the layout is:
Again, there is an upper section, a lower section that contains project details, and a right section. However, clicking on the project changes the content of the sections. For example, on the home page the upper section contained a flash with thumbnails of top projects on the site. Below this was a listing of top projects in different categories, and on the right was a list of competitions underway. When clicking on a project, these change to information regarding the project. Most importantly (and a great feature of the page), the right section changes to similar projects that others have found interesting/useful. This saves time when looking for a type of project, but not necessarily a specific one. With this type of layout, the first thing that I notice (the focal point) is the flash animation on the home page and the step thumbnails on the project page. These are both important, as they indicated what projects people have found the most interesting/fun and how easy a project is (through the number of steps)/how well documented it is. I notice these two things because of their location on the page (middle center when the page loads) and their relative colors to the surrounding page (the flash video is darker and the thumbnails are in a gray box).

Due to the nature of the site, it is very important to use pictures. The main goal of the site is to provide information about projects, and users want to see steps and completed projects. Their layout is pleasing to the eye because the thumbnails are large enough to be seen easily, but small enough to allow several projects to fit on a single page.
If I want to see more images of a project, I can either click the thumbnail or the link below it. However, I can also distinguish different projects from each other without having to read their titles with the thumbnails. Because of this, the images are a vital factor in the success of this site.

In addition to the images and thumbnails, there are two small icons that aid in laying out the projects in a way that suits the user. These icons are:
These two icons are very easy to figure out, as their meanings are apparent when connected with both the current layout of the page and their location. Currently, the "thumbnail" layout is selected, as it is underlined in orange and is how the projects are organized on the page. If I wanted to see thumbnails and descriptions, I would click the second icon and get the following layout:
As you can see, the layout is exactly as indicated in the icon, making them easy to use for users with different preferences.

Color Palette:
The color palette is very simple for the website. The site is made up of five distinct colors:
Bright orange:




Dark yellow/orange:

The banner (upper section of the site) is the bright orange color and is separated by the primary navigation bar, which is dark yellow/orange, from the content area of the site. Less important links and content is a shade of gray and the background of the website is white.
I think that these colors were chosen because it makes the site much different from other sites, where bright colors are not used. Because the site is composed of user content, the color of the site is not going to distract users from accessing projects they want information on. This could be reason why only two colors were chosen in addition to the "normal" ones (black, white, gray).
Also, having the bright orange bar on top cleans up the look of the information below, making it look more organized and effective on a plain white background (as opposed to a colorful background or a site that is all white with black text).

Site Focus:
In my opinion, the purpose of this site is to easily provide users with projects and the steps required to complete the projects for almost anything they can think of. These projects are all user submitted. The search box at the top of the page allows a user to look specifically for a certain project without having to search the category or categories that it falls under, and keywords for each project help users find similar projects.

I feel that a very important feature about the site is the user feedback. Users can give feedback on a a project in two different ways. They can either post a question/comment, or they can rate the project:

Both of these features allow users to quickly determine how well a project is documented and/or constructed, in addition to looking up questions others have and answers or asking their own questions. Due to the purpose of the site, this is one of best features available for users while determining which project(s) to accomplish.

If I was to improve on the site, I would make a following changes. I would rearrange the content on the home page and put the "community" above the "contest" section. I feel that the site is more about the interaction and sharing of ideas and projects, so this would come before a contest between members (this is a personal decision based on how I view the website. some users may visit the site just to compete in the contests. however, I think that a customized site for such users could be created after they log into the site.) Also, I would decrease the size of the orange banner at the top of the page. I feel that it takes up a lot of space and for people using laptops (like myself), it prevents much of the content from being visible on the screen without scrolling down. I would either make it thinner or use the space to show projects that are customized to the user. For example, showing projects that are similar to ones that I have recently looked at in this space would be an effective way to use space on the site without wasting.

No comments: