Yuengling
After writing so many of these case studies, I decided to explore a site for something that I am craving right now, my favorite beer Yuengling. It’s very cheap and yet, in my opinion, one of the best tasting beers. The home page has a primary navigation that is grouped into clear categories: history, fine beers, news, gift shop, tour info, distributors, FAQ, contact us, and downloads. After the primary navigation there is not a consistent secondary navigation system for all the pages. For example the “distributors” page uses a map of the east coast as its secondary navigation system while the “gift shop” page has a long list of different item categories along the time under the primary nav.

distributors page

Gift shop page

After you click on them the links change font color from white to gold to represent the selected state. This allows the user to always know where they are in the site since the pages do not have clear headings. The primary navigation and Yuengling logo remain on every page of the site. The logo serves as a link to the home page so you can always go back if you need to.
The site does not have a deep architecture. There are a decent number of pages but it does not go deeper than the secondary navigation. The architecture is not flat; the secondary navigations are grouped specifically to the primary nav links and only show up when you click on the primary nav links. I think it’s a good thing because the groups make logical sense and makes the website much more organized and structured.
There is an apparent difference in typography but the hierarchy is not that clear. The techniques used are different fonts, colors, weights, sizes and underlines. The use of all these different typography techniques makes the hierarchy very unclear. Take for example the tour info page. Within the Potsville and Tampa rectangles there is a clear hierarchy but at the top of the page there are five very different typographies with no clear order.

tour info page

Again at the top of the gift shop page there are six different typographies with no clear order.

However the labels of the navigation are clear and provide you with accurate and prevalent information.
The structure/grid is the same for each page. There is the top logo banner followed by primary navigation and their claim to fame, “America’s Oldest Brewery.” The reason the keep this on every page is to remind you of the tradition and history behind the beer and the brewery. Every page has the content framed by a border against a black background. For me the focal part of any page was the large Yuengling logo that sits in the top middle of the banner. It’s the size and location of the logo that grabs my attention to it first on any given page. I think this is a good thing because it instills the Yuengling brand label into my mind with every page.
The site uses imagery as the design for their “fine beer” information page. The row of seven beers has rollover states in which an informational paragraph slides out from the bottle describing its history and flavor. I like the use of these bottles as it allows the user to visualize the beer while reading about its unique taste. I also like the information shown in rollover states instead of each beer having its own page; it makes the page more concise and easier to access information from the different beers.

fine beers page

One important fact that Yuengling wants people to know is their long existence and history. The history page uses photographs to compliment the timeline of the brewing company, which I find to be useful as it gives the user a better sense of the history of the company.

history page

I also like the use of the icon map as the “distributors” page’s secondary navigation system. It is a better visual system and helps the user with the sense of scale and proximity.
The site’s color palette consists of maroon, white, black, and gold. The colors are used to separate the logo banner, primary navigation, and body content. The gold border against a black background is also used to frame the content. The maroon and gold are regal colors that add to the historical and traditional aspect of the company.
In my opinion the objective of the site is to advertise a company that is proud of being the oldest brewery in America and promote their traditional line of great tasting beers. The site is not very big so there is no need for a search feature. I found the rollover information feature for the seven fine beers to be a very useful feature. Like I said before, it makes the page more concise and easier to access information from the different beers. The site is pretty straightforward and well organized. I did not find anything confusing about the navigation or the architecture. The typography is the one area I would suggest improving. Using a clearer hierarchy for the different headings would make the site easier to read. However, in the end the site still makes me want to sit back and crack open a beer or maybe it’s because this is my last case study of the day! Cheers.

Melissa Hie

Melissa Hie
I found this to be an extremely interesting portfolio site, something I have never seen before, and one that goes against almost everything I have learned in this class. She is really taking a bold risk making her portfolio site this unorthodox especially since she is trying to market herself as a web designer, yet her own personal site is extremely unconventional and borderline innovative. The whole site is a 2X3 grid of 6 pages. Each page has only one possible link on it that takes you to the next page. There is no going backwards either. So if you do want to go back, you must cycle through the six pages first. So walking through the order of the pages, the home page has only one possible link that shifts you over to the “work, work” page. This page has examples of her past website works. The link now takes you to the “print design” page which has examples of flyers she has designed. Next is the “about me” page which has a brief paragraph about her education background and professional aspirations. The fifth page is a “more info” page that lists all her computer qualifications and the last is “contact” page with her contact information.

home page

work, work page

Printed designs page

about me page

Other skills page

contact page

The heading on each page lets you know what page you are on, but without any idea what the other pages are, or how to get to them, you feel very lost and your only option is to click on the single link provided. Once you click the first link on the home page, you can’t get back to it without completing a full cycle through the pages. I find this to be extremely inefficient and annoying. As a user I want to be in control and navigate through out the site, not be stuck in a one way slide show. I think this a big problem that needs to be addressed. My suggestion would be to have the starting page be a zoomed out page of the 6 pages, therefore the user can select which page to zoom in to. Then if she wants to keep the shifting effect to different cells, I would let the user be able to shift to more than one cell. For example have three arrows pointing in directions to shift the frame above, right, or diagonal the current cell. And also have an icon to zoom back out to the six pages. I do like the shifting frame to each page, I think it adds a cool aesthetic effect, but I think the user needs more control to navigate. If she is trying to market herself as a web designer, she definitely needs to solve this problem in the navigation.
The architecture is not deep at all; there are only six main pages. Her “works, works” page allows you to click and view the different websites she has designed. But other than that the architecture is a single level of six pages. It is not flat, however, due to the navigation system only allowing you to proceed to one page.
She does have a nice consistent hierarchy of typography on each page. Heading 1, heading 2, and the body content are clearly distinguishable due to different fonts, colors, and sizes. There in an apparent hierarchy that makes the pages nice and readable. The labels of the headings of each page are clear, there’s not much room for confusing home, works, printed designs, about me, other skills, and contact me.
The structure of each page is consistent. Each page has its own color scheme but the headings and content are in the same location on each page, top left. And the link to the next page is always on the bottom right of each page, which actually places it right in the middle of the screen, and therefore becomes the page’s main focal point. The imagery/ photos are what she needs to use to advertise herself but her photos are limited and not big enough to view details. For the “works, works” or “printed design” pages, when you click on a thumbnail a larger image drops down from the top, but its only two additional images of the work, and they are only slightly bigger than the thumbnail. They are much too small to see any details or typography. Since this is a portfolio website about her graphic designs, I believe these images need to be much much bigger. There is so much unused space on every page, it’s ridiculous.

example of work

She does use arrow icons that point you in the direction the frame is going to shift, which I had no problem understanding.
My favorite aspect of her site is her color palette. The six pages have their own different color theme. The different backgrounds of each page are electric blue, green, pink, purple, orange, or black. The heading uses a different shade of the background color and creates and nice look for each page. I believe these colors were chosen to be stunning and really spark the attention of the user.
As a portfolio site, I know her objective is to advertise herself as a graphic designer or web designer. However, due to the lack of focus on her works, I believe she is trying to rely on the novelty of transitioning between pages to show her creativity and skills. I do find her page transitions to be a neat feature, especially along with her bright backgrounds, but I think she is doing herself a disservice as a web designer with the poor navigation system. It made the site extremely confusing inefficient. I already suggested ways to improve the nav system in the first paragraph so I won’t repeat myself here. I would definitely use some form of my navigation suggestions and also utilize all the free space when showcasing her works, because the small drop down images are not doing much. Besides that though, I do like the look of the site, I think it’s loud and captivating. It has potential to be a really cool portfolio site, it just needs a couple improvements.

Instructables

Instructables
This website is a community type site that allows its members to post and share instructions on various subjects. The home page has two navigation systems that are on every page. The top one is the primary navigation with four groups: home- the first home page; explore- takes you to the second navigation; community- forums, marketplace, and help; and submit- to submit variety of things such as instructions, videos, forum topics. Although there are only four groups, which may seem small, all aspects of the website do fall under these four distinct groups which make it rather efficient. The secondary navigation, which is located under the primary nav and is where the “explore” link takes you, groups the instructions into specific categories that encompass pretty much all potential forms of instructions: all, craft, food, games, green, home, kids, life, music, off beat, outdoors, pets, ride, science, sports, and tech. The offbeat link might seem a little vague because it is, and is basically the category for anything that doesn’t fit the other categories.

home page

Once you click on a category it breaks the category into thumbnails of featured, popular, zeitgeist, and recent. Also when you click category the look of it changes to white font with a dark grey background. This lets you know where you are within the instructables. However, the top navigation does not have selected states or clear headlines so when you click on community or submit, it is sometimes a problem remembering where you are in the site. With the primary nav being on every page there is never a point where you can’t get back to the home page.

Green category page

The site has a very deep architecture. There are many instructables over such a wide range of topics and each instructable has its own long list of steps with images. In addition the community section has numerous forum topics and threads and a marketplace section to buy,sell, or trade various items, services, or jobs. The marketplace feature doesn’t seem to fit in the website. I would rather go through a site dedicated to a marketplace feature than as a side feature to an instructions site. The site is not flat which is a good thing considering the amount of content and information this site provides, instead it is grouped nicely into the primary navigation and all the information falls accurately into those categories.
There is a nice hierarchy of typography apparent throughout the site. It does nice job separating all the headings and content with different font colors, weights, and sizes. Even with the vast amount of text that comes with instructions, the site still makes it readable and clear. Most of the labels are pretty clear, like I mentioned before, the offbeat category is confusing and could be changed to miscellaneous. Other than that the labels are clear and contain accurate prevalent information.

Munny speakers instructable

The grid/structure of the pages stays consistent for each instructable. The whole top bar remains the same from page to page. The body content of the instructions is on the left while the right bar has several useful boxes. The top one is just an advertisement, the second is an info box on the publisher of the instructable, and the third is a list of related instructables. Every instructable page follows this same layout. I think that is definitely a good thing because each page is rather chaotic with all the photos, instructions, thumbnails, ads, and boxes but the consistency of a same layout brings a little more organization and structure to crowded pages. The numerous photographs or thumbnails on every page are the main focal points of any page. With the body containing many intriguing pictures of different instructables, they immediately capture the user’s attention.

A congested, chaotic page

The imagery and photos make up a large part of the sites content and do not necessarily add anything to the design of the site. The photos are an excellent way of explaining instructions and in some cases the instructable also contains a video clip which I thought was a helpful feature.

instructable with Youtube clip

None of the links use icons or symbols but instead just a small thumbnail of a photo associated with the link. With all the photos, any given page contains many colors. The palette of the top banner is two different shades of orange, white, and grey. The orange and white reminds me of the home depot colors and is appropriate for a site about how to build things. The colors separate the top banner, the primary nav, and the body content. They also nicely separate the different headings and text which make the instructions more legible.
I believe the objective of this site is to provide fun unique information of HOW2 instructions while building a community around these instructables. There is a search option in the primary nav bar on every page which lets you search for key words or certain player profiles. I think the search option is a necessary feature for such a large website with vast amounts of content. As I said before, I definitely find the video clips the most useful feature on the site. They give the user an easier option to understand and learn the instructions. I did find the pages to be rather congested with different ads, photos, boxes and thumbnails. I would suggest a way to clean up the pages and make it seem less chaotic. They are laid out in a consistent manner, but create too many distractions from the content of the instructables. Instead I would reduce the extra boxes and have a secondary navigation to access that material. Overall, I love the concept of this site. I like the ability to create a community through helping each other construct creative devices. It contains very interesting material, and I am never bored surfing through the instructables.

destination organic

Destination Organic
This is the website for an organic produce shop in Queenstown, New Zealand. The home page has one primary navigation system. The groups make logical sense for an organic produce store: home, about us, products, links, location, contact us, and refer a friend. The hierarchy of navigation is clear since the primary nav stays on the top bar for every page. A second navigation appears for the products link. The location along the left side and table of colored backgrounds clearly distinguishes it as navigation. This secondary navigation is organized as a collapsible menu for a third navigation system. I think this is a very elegant and concise way to show the third nav level while still keeping the contents of the second navigation still available.

Product page: collapsable third navigation

The home page also has three shortcut links in the body content of the page. The shortcuts are used to expedite the user to the sites most used sections which are the location of the store, their special vege and fruit boxes, and the products page.

Home page

Once you click on a primary navigation link it changes to its selected state which is underlined and subtly changed color from beige to white. For the products secondary and third navigation, it changes font color and background color to designate its selected state. The apparent selected states along with the large heading on every page keep the user well aware of where they are in the site. The home link on the primary navigation makes so the user can always revert back to the home page.
The site does not have a deep architecture. There are many pages but only the products page goes past the second level. Except for the products page, the architecture is somewhat flat since the primary navigation is on every page and can take you to all the other pages of the site. I think this is a good thing because the labels make sense yet it is simple to navigate throughout the site.
The extremely large sans serif heading on every page definitely makes the hierarchy of typography apparent. However the rest of the headings and body text all have a beige color which makes the hierarchy a little fuzzy and hard to read. The only technique used to distinguish them is the size and weight of the fonts. I would suggest changing the colors of the different headings and body text to make the hierarchy clearer and easier for the user to read.

about page

The structure/grid is very consistent from page to page. The top bar stays the exact same except for a different image in the banner, which keeps the top bar lively and fresh, just like their products. For me the focal point of every page is the bright red bar of the primary navigation. The position on the screen along with the brightness of the red immediately grabs my attention. I think it’s a good because the red definitely expresses the sense of a fresh tomato or apple which is perfect for an organic produce store.
The different photos in the banner definitely add to the design of the site. They are beautiful images of nature and produce that keep the site new and fresh. The background image for the body content of each page is a brown fence which I think is very appropriate for this site. It is a good none distracting subtle background which still applies the site’s content. On the products page, along with the secondary navigation there are images associated with each secondary nav link. The images are also bright beautiful images that compliment each product category. I think the site uses a good amount of images and photos to keep it lively and colorful.

products page

There is a green leaf icon used sparingly throughout the site to signal links or lists, whose function is clear to the user. The main color palette is brown, bright red, bright green, and beige. Like I mentioned before, the bright red and brown are used to separate the primary navigation and body content. Also the colors are used to separate the secondary navigation in the products page. The color palette contains earthy tones and bright red and green to convey freshness and ripeness. The palette reflects nature and is very appropriate for an organic produce store.
The objective of the site is to sell organic produce either through their online store or directing the user to their local store as well as emphasize the importance of fresh organic produces for your health. There is a search option which allows you to search their product line. The search option searches for keywords in the product name or description.

search page

I found the shortcuts feature a very useful feature on the homepage. It directs the user to the sites most popular sections and is geared toward the purpose of selling organic produce through their online store or their actual store. The site is very straightforward and clear. I found no confusing elements of the site. If I could improve it would be to add different colors to the different levels of typography in order to make it more readable and more structured. Other than that I think it’s a nice website that serves its purpose well and makes me want a fresh crisp organic apple right now.

Navigant consulting
To contrast my earlier blog about the Easton Associates Consulting firm, I have decided to do case study on another consulting firm with a drastically different website. This site uses its features along with a much different look to show potential clients, investors, and employees what their company can offer that others can’t. First the site has a very friendly appearance due to the soft warm colors and cartoon imagery and design. It makes the company seem very approachable. The primary nav, selected state, and search bar have irregular rectangles framing them which doesn’t make the site seem disorganized or immature but instead a more creative feeling, like thinking outside the box which is an important quality for a consulting firm to have.

home page

There are two navigation systems on the home page, a prominent primary nav system with its own bar background, larger font, and prominent selected states. The primary nav is geared towards potential clients. The primary nav is logically grouped into categories that potential clients would find the most important such as home, industries, services, professionals, and knowledge center. The other navigation system is geared towards the other background information that potential investors and employees would want to know such as about NCI, investor relations, careers, regions, and contact us. I think the navs are split up this way because the website’s main focus is to attract cliental and build a bigger base which is the goal of all consulting companies, therefore their site would be arranged this way as well. For the primary navigation systems, they all have drop down menus for the secondary navigation. For the industries and services links the content is also a list of the secondary navigations along with a short description about it. However, the other drop down menus don’t appear once you click on the primary nav link, therefore the drop down is the only access point to the secondary navigation. Surprisingly for such a large site there is never really any confusion where you are in the site due to the clear headings on each page along with the green rectangle selected state of primary navigation system. The primary navigations stay on every page so there is never a point where you cannot get back to the homepage.
The site has a fairly deep architecture. There are many primary navigation links that each has their own long list of secondary navigations. Due to the many levels the architecture is not flat; you must travel through the primary navigation systems to get around. I think the deep architecture shows how comprehensive the site is which in turn positively reflects the company as a complete, comprehensive consulting firm.
There is definitely a hierarchy of typography apparent. The headings are clear and separated from the content by a colored bar and picture. Even though content contains a lot of text, the spacing is great and allows for easy reading by the user. The headline of each page also has an effect that makes the headline glow against its background which just further highlights and separates the headline. Each level of the hierarchy is separated by color, size, and weight making the distinctions very clear and very legible.

Industries: construction page

The labels of the navigation are pretty clear. The only one I was uncertain about was knowledge center. I didn’t know what to expect but once I clicked on it, it was what it said. It was a virtual interactive knowledge center containing a library, hot topics, upcoming events, and continue legal education. Any confusion about what the knowledge center was was quickly dismissed with a short intro video of Navigant’s chief marketing officer explaining the contents and features of the knowledge center.

Knowledge center page

The structure of each page remains fairly the same throughout the site. The top bar of the two navigation systems, search bar, and Navigant logo stays the same throughout with the content below changing. The content has a consistent theme but each page has a different layout of a large cartoon drawing and textual content. I think this is very creative, it makes the site dynamic and continues to draw my attention on each page. The focal point of any give page would definitely be the fun large cartoon drawing in the back ground or below the heading. This use of imagery adds a great deal to the design of the site. The cartoon does not really provide much information about the content but is a colorful entertaining compliment that keeps each page lively and friendly. In addition, the irregular cartoon rectangles combined with the pictures definitely help the site and company seem approachable and makes me feel comfortable with them. There are some icons indicating some secondary navigation but all are clear.

Industries: healthcare page

There are many colors on any give page. The base color is a soft light orange that uses other soft warm colors to generate the comfortable feel of the site. The colors are beautifully used as backgrounds to separate all aspects of the site including the navigation systems, headlines, body content, and search bar. These colors were chosen to make the site and company more approachable and friendly. As a company I would want to work with this consulting firm based on the warmth of their site which is largely due to the color palette.

Services: investigations page

The objective of this site is to primarily attract potential clients and secondly to attract investors and potential employees. It also provides new information to current clients and investors on how the company is managing. There is a search option that is on every page as part of the top bar. The search option lets you search for key words in all the pages of the site, which allows you to be pretty specific on the information you are looking for. There are many features on this site that I found extremely useful. On all the informational pages there was a virtual briefcase on the right side that would allow me to store all the information on that page and continue searching the site. This is extremely useful considering that vast amount of information on the site and creating the ability to just have one download at the end of my visit to extract all the information.

Zoom in on the virtual brief case

There was not really anything confusing about the site. I also cannot think of anyways to improve it. I believe it is an extremely well done website for a consulting company. The innovative look and features of the site directly speaks about the consulting firm. This firm is not only friendly and approachable, but also creative, comprehensive, and thorough, all feelings generated from their website.

Marco Bolognesi
This site is portfolio site for a photographer named Marco Bolognesi. I was reviewing some of the sites that this designer Popmatik made and this one I found the most intriguing. The first page is a splash page of the Marco’s name and emblem. There is a row of information along the bottom that I find mostly unnecessary. The five things are contact info, resolution requirements for the site, a link to download a required flash plugin, the website designer Popmatik, and an explanation that you must click on the shield emblem to enter the site. I’m ok with the contact information so the splash page can kind of serve as a business card if the user is already familiar Marco’s work. The minimum resolution info, download plugin link, and explanation on how to enter the site I feel are all unnecessary and bog down the splash page. If the user doesn’t have the flash plugin, then have something pop up to guide him to the download rather than include it on the splash page. And there should be no need for an explanation on how to enter the site, it’s is pretty obvious or just put the word enter under his name.

splash page

There is only one primary navigation system along the left side of every page. The four links of the primary nav are about, gallery, news, and contact. The short list makes the site seem concise, simple, and clean. The rollover state is a nice bright pink bar that glides quickly over the link; the selected state is also the pink background bar. The bright pink selected state lets you know where you are in the site at all times so the user is never confused. The home page is the about page and there is never a point where you cannot go back to it. You cannot, however, go back to the splash page without using the browser’s back button or retyping the site address.

about page

The site does not have a deep architecture, there are not that many pages and it only goes past a second level in the gallery section. The architecture can be considered mostly flat except for the gallery pages. You can access the other three primary nav pages whenever you want. The gallery has a second level of different galleries and within each gallery is a pagination of different images. I think it’s a good architecture and it makes logical sense to the user.
One problem I have with the site is the lack of hierarchy of typography. It makes the content on the about and news pages seem really congested and considering its white type on a black background, it definitely makes me not want to read any of it. The only designation between the two levels of typography is the more prominent heading is bold. I would definitely change the color of the headings from white to perhaps the bright pink color that’s already in the site, just to make the content more readable and appealing.

News page

Even though there are only four labels, they are clear and contain accurate information.
The structure/grid of the pages stays consistent on every page. The emblem and name remain in the top left corner with the primary nav under it. The focal point of every page is the content. The framework of the site is simple and subtle; therefore the large content area becomes the focal point of every page, especially in gallery section because the large area allows for big images.
The photos in the gallery are definitely the main focal point of the entire site. They are really the only source of information about Marco. The news and about pages don’t really give the user anything about Marco as a person. The about just has past exhibitions he was a part of. Therefore the photos are very important to showoff Marco’s talent. The images themselves are very stunning and have a large area to showcase them within the site. However I have a very big problem with almost all of the iconography within the gallery section. First there are only five galleries to look through yet three of them are on one page and the other two are on another. Therefore there is a previous screen, screen 1 of 2, and next screen buttons on the bottom which are completely unnecessary. I would much rather just have the five galleries more compressed and on the same screen and do away with those buttons along the bottom. Also along the top there are six icons that have a muted pink color and don’t do anything.

gallery page

Once inside a gallery the six icons regain the bright pink color to help you navigate through the pictures. So from left to right, the first icon is a grid icon that I understood to be a link back to the galleries. The second and fifth icons remain a muted pink of left and right arrows that I still do not know what they do. You would think they would be to navigate through the pictures but that’s what icons three and four do as plus and minus signs. For the purpose of scrolling back and forth through photos, I would just use arrow icons, since plus and minus icons are less clear. The last icon is another arrow icon pointing to the right. At first I thought it was the navigation button to move onto the next photo but it was instead a play button for a slide show. And lastly, there are a row of numbers along the bottom signaling the different photos within the gallery and when you rollover them a small thumbnail pops up which I liked, since it gave more space for the large main image while still allowing the user to see a preview of the photo. However, the numbers do not have a selected state which doesn’t let you know which photo you are on within the list. I would suggest keeping the first icon, losing the plus and minus icons and instead use the arrows to scroll back and forth, moving the play slideshow icon to the middle where the play button usually resides on most layouts and also having the gallery start as a slideshow so the play/pause button can start out as a pause button which is more clear and won’t become confused as with the other button pointing in that direction, and finally having the numbers have a selected state.

Page in a gallery

In the news and about sections the content has a scroll bar which is a very elegant thing pink rectangle that slides along a line down the page. I really like the look of his scroll bar, it’s very subtle and clean.
The only colors on this site are grey, white, black, and pink. I actually like the color choice, I think the pink really stands out and compliments the black background. The black background gives a gothic/artsy type of feel to the site which I believe is extremely appropriate considering the genre of photography Marco does. I think these colors were chosen to keep the site simple and elegant yet dark and mysterious. The primary nav is separated from the content very subtly by different shades of metallic dark grey and a thin black line.
The objective of the site is to be a portfolio to market and promote the works of Marco Bolognesi. It is not a very big site so there is no need for a search feature. I found the gallery the most useful feature only because it was the best source of information for Marco’s talents and skills, but like I said before I found the gallery icons extremely confusing and hard to use. There are several aspects of the site that I have suggested changing, however, I like the overall look of the site. It’s extremely clean and elegant. I like the use of the bright pink highlights and black background; I think they really compliment Marco’s style of photography. And I like the large area dedicated for his images, which are the central piece to his portfolio site.

Nestea
While developing my final web project for the collect-a-cap, I was directed toward the Nestea website for inspiration on how the design of a site could be used to dramatically enhance and promote a product. The home page has two navigation systems, a primary that is designated by being on top and a secondary below it. The groups for the primary navigation make sense home, products, downloads, recipes, tell friends, and refresh in the U.S. The last one, refresh in U.S. might not seem to clear what it leads to but I will talk more about that later. The secondary navigation is three groups bottle/can, refrigerated, and instant tea mix. The secondary navigation is actually just the second nav for the products primary nav link but both nav systems remain on every page of the site except one, the “bottle/can” link; they both disappear when you enter that page.

home page

The secondary nav could just show up when you click on the products link instead of being on every page, which seems to make more sense, but since it is a product geared website, the designers probably wanted the product options to always be accessible directly throughout the site. Why both nav systems disappear once you click on the bottle/can link and not any others is kind of unclear. It takes you to a page that looks different than the entire site but carries the same theme. This could be because the bottle/can is their most popular and important product and therefore deserves a more unique and dedicated appearance.

bottle/can page

The primary and secondary navs don’t have rollover or selected states so it can become pretty confusing where you are in the site. The pages do have headings, but without selected states in the nav systems you can get lost in all the colorful decorations and designs that each page has. The bottle/can page is really confusing because it has no headings and like I said earlier loses all the navigation so it leaves you somewhat lost. You can always get back to the homepage though since home is one of the primary nav links and there is a “Nestea home” link in the separate bottle/can page.
The site has a moderately deep architecture. There are a lot of pages but the levels do not go very deep. The architecture is not flat, more navigational links show up as you access deeper levels of the site. For example when you click products, the three products show up that are clickable along with other links such as “frequently asked questions” and “serving a crowd? click for multi-pack information.” I don’t think this is a bad thing, because the links that show up are specific to the category that you are in and it is not necessary to be able to access them at any time.

products page

There is not a lot of typography but what is there is very nice in this website. All the fonts are non sans serif and the headings have good spacing making everything very easy on the eyes. The techniques used to separate the headings are different fonts, different sizes, and different colors. I believe the colors are an important typography factor since the site in general is full of bright colors the typography must match its intensity. The labels are mostly clear except for the “refresh in the U.S.” link in the primary nav. It is unclear because the page does not have really anything to do with the Nestea product. It’s a map of the U.S. with each state being clickable and highlighting three interesting places to visit that are associated with land, air, and water. Once you select a place you want to visit, you send an only postcard to a friend through email asking them to join you on an adventure. While I get the purpose of this page, to spread the Nestea brand label and associate taking a plunge/new travel adventures with Nestea, I don’t really think it fulfills its purpose that well. I don’t see people using this feature at all when looking for places to travel and getting friends to come along just because it has nothing to do with a beverage promoting website.

refresh in the U.S. page

The besides the one “bottle/can” page, the grid of the pages stays consistent throughout the website. The primary and secondary nav remain at the top and the background and frame of the site also stay the same. The different colorful decorations and designs within the body of the page do change from page to page just to keep the site lively, and full of color. The focal point of any page is definitely all the colorful designs and decorations on each page of different fruits, flowers, ice, and splashing tea. The bright colors definitely engage the viewer and capture their immediate attention.


The imagery and photos make up the entire design of the site. The bright colors bring so much excitement and joy to simple iced tea. The designers purposely chose this effect to promote the Nestea brand. The site has a perfect about of images and photos. There is an icon on the bottle/can page that I had trouble understanding at first. The page has a secondary navigation of home, iced tea, and green tea. The selected state for this secondary navigation is a different color and a checked box next to it. However, since the other navs didn’t have a selected state, the use of the checked box icon was a bit confusing. I tried to click on the icon to uncheck it but that didn’t do anything. It was after clicking on the other nav links and seeing the check box move from home onto them that I understood that it was just a selected state icon.

bottle/can page

As I said before there are a bunch of colors on any given page. The pages need lots of bright tropical colors to create that refreshing effect. However the bright colors don’t do a good job separating content because most of the content is bright colorful images of the products also. Therefore the content sometimes blends in with the back ground design and decoration in one big colorful collage.
The objective of this site is to rejuvenate the Nestea brand with bright colorful designs that are energizing and refreshing. It’s a product promoting site and I believe they did a great job bringing life to Beverage Company. There is no search feature on the site, but it’s a limited site without a big database of information so I believe a search feature is unnecessary. My favorite feature is the recipes link in the primary navigation. I think it’s a great idea to make more uses of iced tea and promote the product.

recipes page

Like I mentioned before I did find navigating through the site a bit confusing. I would add selected states to the primary and secondary navs. I would also maybe eliminate the second nav all together and just access it through the products link in the primary nav, it’s kind of redundant and confusing whether the links are different than the products’ links. Also I would not make the bottle/cans link so completely different than the rest of the site and add the navigation back onto it just to keep the site consistent and not so random. But overall I think this site does a wonderful job accomplishing its mission to rejuvenate the Nestea brand and invigorate peoples’ thirst.