Citi Bank

Introduction

Citibank, diagnosis part of the Citigroup family, capsule is a global provider of financial services such as investing, banking and insurance. Though Citibank holds a strong presence in the financial arena, the company’s presence on the web falls short of their leading reputation.

Form

The Citibank brand is consistent throughout the website. Each page houses the “citi” logo in the upper left with a royal blue border at the top of the page (fig. 1). Though consistency is evident, I am reluctant to call a logo placed on a page an actual brand. The lack of a tagline and traditional brand elements throughout the remainder of the website contribute to an impersonal and uninviting presence.

The design of the website is very clean, consisting of a white background, promotional flash element and sections devoted to user tools, quick links, and ads. The top navigation area and brand is consistent on each page, though once the user navigates from the home page, the design takes on a more informative style, eliminating promotional advertisements and dropdown.

The layout of the website, in my opinion, could be better. There is no flow of information, only a sea of dropdowns and ads – especially on the homepage. The user is given a plethora of “where do you want to be” options, however, no hints to show the user the right path to take. I think Citibank could have eliminated the “Products/Services” page and instead included these links in categories on the home page with the optional “see all” under each category to save space. The interior pages lack all and any type of design element – merely a body full of text and a meager right hand menu that does not convey any message Citibank may want to present.

Overall, the aesthetic design of the website is fairly bland. There are no color deviations, design elements, or photos to separate areas of interest. I would like to see more color used to draw attention to areas such as the “Look, Apply, and Find” sections. Without photos or other design elements, the user is forced to find their way around the website on their own without any direction from the company.

The top navigation bar, consisting of “Welcome” and “My Citi” is standard (fig. 1). Each tab contains relevant information to either the member or the visitor and appears on each page for easy user navigation. The switch between the “Welcome” tab and the “My Citi” tab can be a little confusing, considering the sub-menu changes when the main tabs are rolled over.

Aside from the “Sign In” area, the left hand menu on the home page is nothing more than a few drop downs that may or may not be relevant to the individual user (fig. 2). These dropdowns are not self-explanatory and the layperson would seemingly have to find what they are looking for through trial and error. These particular dropdowns on the left hand menu, at first glance, cater only to the business owner or investor – an area the individual may avoid.

The dropdowns in the body area – “Look and Apply” – are effective for both the individual and the business owner; however, these sections are in no way displayed to convey this. As I mentioned in the Design portion, the “Products/Services should be contained on the main page and appropriated toward the individual, the business owner or investor. Nearly the only dropdown that makes sense on the homepage is the “Apply” selector. This option makes it very easy for the user to apply for an account of their choice.

Last but not least, the navigational text links on the top and bottom right of the page are fairly standard in web design. It is common for users to look in either area for links to specific types of information. These links, along with the top navigation bar consistently appear on each of the pages for easy user access.

Function

The Flash element on the home page is non-offensive and tasteful (fig. 3). Having said this, it is not memorable either. With no color deviation throughout the overall page design, the Flash ad is lost and does not draw the attention that it should. Another issue with the Flash ad is that it stops at the end of a promotion and does not generate a new promotion unless the page is refreshed or revisited. I would like to see a constantly active Flash element that keeps the non-offensive approach but brings in the user’s attention.

The small thumbnail ads placed at the bottom of the page fall into the same scenario as the Flash element (fig. 4). At first glance, I did not realize they contained promotional information and thought they were simply unpleasant design elements linking to various portions of the website. In addition to the lack of attention these promotions are given, they are difficult to read. I would like to see promotions like this included in the Flash element – one that is constantly, but subtly, moving through promotions.

Conclusion

The strong point of this web site is information and the amount and readability of that information. If a user looks long and hard enough, they will be able to find the information they are looking for, however, looking long and hard is the problem.

Overall, www.citibank.com could use some organizational and design help. Adding design elements and restructuring information flow would not only present the website better aesthetically, but it would also give users some direction in their search for information in navigating the website. It is fairly evident that the planning for this site was accomplished through the eyes of the company – what they thought the user would want and need – and not through the reality of the user’s wants and needs.

www.citibank.com.1

www.citibank.com.2

www.citibank.com.3

www.citibank.com.4

European Union and UK Investment in Rural Areas

Introduction

When first landing on the home page, no rx my initial impression of the site is that it is somewhat crude with little emphasis or thought having been given to the design elements of the site. However, the links indicate to me that the site may have plenty of information to impart, and as that’s the primary function of the site, as a user, I would be tempted to delve deeper. The use of imagery also helps to stimulate interest as they add a human touch to the site and hint at a wide scope of projects.

The logo needs some attention as it has been resized within the html code, and therefore has a larger file size than necessary and has lost some of its clarity on the screen.

The links on the left hand side of the page are a little puzzling. You only know that some of them are links as the cursor changes to the ‘hand’ symbol. As a user, I would prefer for all the links to behave in the same way when I roll the mouse over and as an expectation that your site is kept current, there should be no need to inform me that some of the sections have been updated in this way. I would therefore suggest implementing simple rollover behaviour such as the text changing colour on each link so the user knows that clicking on it will take them to another location. Using Cascading Style Sheets (CSS) for this function will eliminate the need for images and some of the JavaScript which is currently used on the page and will in turn reduce the file size of the page to increase page load speed.

In terms of content on the home page, I would like my interest to be spiked a little more by maybe including snippets of some of the most recent projects/highlights you have worked on and what they have achieved.

Usability of the site

I have touched on the navigational links in the section above, and think you would be well served to alter them so they are all consistent and indicate more clearly that they are links.

More crucial, however, is the need to carry the navigation throughout the site. Clicking on any of the links from the main page takes the user through to a page which they cannot then navigate anywhere from. In order to return to the page they just came from, they need to click the ‘back’ button on their browser.

As a stop-gap, an easy to implement stepping stone would be to at least ensure that your logo links back to your home page. Users expect a logo to be a link to the home page and at least this would give them the most basic method of navigation.

It would also be really useful to have a sitemap somewhere as I get the impression that there is a lot more to the site than I have actually discovered.

Design

There is certainly nothing offensive about the design elements of the site, but it is also not slick in any way and it’s my feeling that its simplicity and crudeness doesn’t do justice to the information you have available. Your introduction page has a link to the Natura 2000 site, and it would be great to see your site having a similar kind of impact (there’s no reason why it couldn’t).

Consistency

The site maintains a good standard of consistency throughout the internal pages. The layout is the same on each page (with the exception of the Links page which is left-aligned rather than centred), and the fonts and colours used are constant all the way through.

Structure and coding

Without wanting to become too involved in the coding of your site, there are several fundamental elements, which are missing from your pages:

DOCTYPE – every web page should be headed up by a DOCTYPE (short for Document Type Declaration). This informs the validator which version of code (ie. HTML or XHMTL) you are using, and your pages cannot validate without one. Omitting the DOCTYPE, as all your pages do, suggests to the browser that your page is written with invalid markup and code.

Meta data – in basic terms, including meta tags on your web page can help inform some search engines what kind of content your pages contain, eg. what the purpose of your website is. They can therefore be very useful in optimising your site for search engines to try and drive more traffic to your site.

Cascading Style Sheets – the code on your pages could be reduced significantly through the use of CSS which would improve page load times. It would eliminate the necessity to use tables to present the data and would make your pages far more accessible.

Alt tags (this is the text which appears when you lay your mouse over an image) – adding alt attributes to your images is one of the simplest ways to make your website more accessible. It may also aid any search engine optimisation efforts.

Messaging and content

The content on your site is very informative, but it’s presented in a manner which renders it a little dry and difficult to absorb. There is huge potential for livening up your content and presenting it in bite size chunks which people can then choose to explore by delving deeper into the site.

Conclusion

In summary, the site needs a significant revamp to make it work harder for you. If I were to rank the points I have covered above in terms of priority, the navigational structure of your site would be top of my list, followed closely behind by a rethink of how you present the information on your site. The work you do facilitates valuable and really worthwhile projects – now it’s time to let visitors to your site become excited about them too.

Interesting Website for Kids

Introduction

PBSKids.org is a great website for children full of games, drugstore stories, health music, and more. It features links to all of the great children’s programs on the PBS television station.

Form and Function

The website is a cheerful combination of playful circles and bright colors (Fig. A). The prominent PBS Kids logo appears in the upper left and features a rollover effect when placing the mouse over the text links to the right. The rounded squares near the middle of the page provide a simple contrast to the circular images above them and help them stand out as the four main links to fun for the children. The rectangular appearance near the bottom holds links provided for adults and parents and creates a dividing line between the main choices for the kids and the more technical information for adults at the bottom of the page. The contrast of circles and rectangles successfully keeps the eyes drawn toward the upper half of the page where the fun is.

While the main page is simple and playful, the lower contrast of the light purple portion of the background against the white text links makes these links more difficult to read (Fig. B).

Navigation from the main page is simple, either choose a show from the list of links on the left, which take you to sites designed specifically for that particular TV show, or choose from the four links near the middle of the page to present a selection of activities grouped by task. The pages linked to the four main options are also linked together in a linear fashion, however the linear structure only moves forward. While the images on these pages are cute, there is nothing to describe what they link to (Fig. C). The pages rely on the image “alt” text to appear as a tooltip when the mouse is placed over the image as the only means of describing what the image links to. A better practice would be to include descriptive text under the image rather than making the user mouseover each image to find out where it leads.

While the lack of descriptive links and low contrast text hinder ease of navigation, the overall presentation of the site is fun and playful. The design elements are appropriately geared toward the site’s intended audience. The PBS Kids website is a great launchpad to explore all the fun each individual TV show provides.

pbskids.org.1

pbskids.org.2

pbskids.org.3

IT Employment Website Review

Introduction

Since the IT boom times of the early 90’s, ampoule IT jobs have been restructured, retrenched and revolutionalised in great numbers. Unfortunately, a lot of people who had based their career pathways in IT found themselves unemployed and proceeded to get angry via complaints boards on the internet (and who could blame them?)

Function

In 2003, Paul Knapp decided there was room for a recruitment site with a difference – it would contain meaningful short articles on the state of the industry and have real jobs that people could apply directly to employers for, thus cutting out the frustrating middlemen of the new age – job agencies.

Paul Knapp’s idea has been cemented in his Brainbox website, and he is to be commended on providing a helpful and much easier experience for IT jobseekers.

The website itself loads up quite fast, using a combination of forms, frames, html and javascript. The colours used are quite bland and put the viewer in mind of an IT worker (note the greys are the same colours as those used on most computers and mice!) while the logo has a daring dash of green which makes the site just that little bit more exciting and a little bit more professional.

The ultimate success of this website is in its layout. The left menu contains the key elements of Forum, Job Search, Advice etc and the middle white box contains lists pertaining to the main subject clicked on (eg, Forum posts). On the right side is some trivia, statistics and advertising, which viewers can feel free to ignore if they wish.

Brainbox is browser compatible, using frame percentages to shrink or expand the window appropriately. The viewer is assured of an easy-to-navigate, easy to follow website with content that is updated frequently. My only critique would be that more colour is needed….and not necessarily in the advertising!

Conclusion

Conclude your review. You may also suggest some final tips to improve if any. There are no hard and fast rules in the conclusion (even in the different sections of the review). Be professional. Be honest but not rude.

ShopZilla – Online Shopping Website

Introduction

Straight forward comparative shopping is the main goal on Shopzilla.com. This site is all about finding your product quickly, unhealthy comparing prices among the sixty-five thousand merchants and balancing between the lowest price and best supplier before buying. The look and feel of each page is consistent throughout the site. The two different shades of orange-yellow are original and work well together. The Shopzilla.com logo reinforces the purpose of this web site.

Form

The designers of this web site had the insight to give its customers a few options when searching for goods, recipe which indexes over twenty-nine million products. Customers can search by category using a standard “run of the mill” tabbed menu at the top. There is a handy search by keyword option that can quickly lead you to your destination. The search function also automatically spell checks your keywords. This can be as bad as it is good. Some manufactures misspell product names on purpose, such as using a “z” to make a word plural. On the left-hand side there is also a long list of more specific categories to lead you toward your destination. This list also includes the more popular products that are being search for. It does make for a long list in which you may have to scroll down a good ways to find your link.

The layout of the Shopzilla.com is simple and appealing, offering more than plenty of white space between the different sections. The page widths are set to 100% of the browser window so that all available screen real estate can be taken advantage of. This is important considering the amount of information that is available. Yet popular products on the home page are featured in only one column, which again creates a lot of scrolling down. The extra white space could be used to make a second column for featured products. The price comparison page is arranged in well thought out columns and rows that make it easy to spot the best deal.

Function

Straight forward comparative shopping is the main goal on Shopzilla.com. This site is all about finding your product quickly, comparing prices among the sixty-five thousand merchants and balancing between the lowest price and best supplier before buying. The look and feel of each page is consistent throughout the site. The two different shades of orange-yellow are original and work well together. The Shopzilla.com logo reinforces the purpose of this web site.

Conclusion

Overall, Shopzilla.com is a good web site scoring 8.17 out of 10. With a little bit of tweaking it could be excellent. Most products that I was searching for was easily found. I did find that a few products that I thought would be popular items were only listed with one or two merchants. Of course this didn’t offer much of a price comparison. This is understandable though, as new products surely take a little time before they are listed adequately. Quoting their slogan, Shopzilla.com surely is “The Smarter Way to Shop.”

Finance, Investing, Money Making

Introduction

After visiting so many finance and investing sections on different websites Money Central is the most consistent site that I have ever experienced.

Colour of brand :

For a user a website should be eye catchy and colours are the most important thing to make a website more lively and attractive and msn is doing a great job in maintaining this area. The colour combination used in the header and the background is eye soothing and it is proven that the combination of white n blue is already revolutionary. Every section has been properly presented and the important topics under these sections are widely expressed. The presentation done via pictures and flash movies gives kind of vitality to the section.

Going Through

The navigation on Money Central is way too smart, sickness since the main theme is same as MSN network. The top of the page gives direct links to the MSN homepage, ed MSN Hotmail and log in section. Also there is a search bar which is quite handy.

Then there are the various sections of msn Money listed on the dark blue bar. The selected tab gets highlighted with white color. Which, gives a soothing look. Also there is a left navigation which lists the various quick access links and other sections like News Centre, Banking, Investing, Planning, Taxes, Community, Notifications. etc. But the country selection tool should be given on the top or on the right navigation instead of at the end of page…

Also due to the use of less no of Flash movies and .swf files the page is not so heavy to load even for the dial up users. As per the designing part graphics are superb, at places certain illustrative charts are also used so as to have a quick look as in the market update section.

In the end

www.moneycentral.com is really an impressive site, having a parental look of MSN, still lively on its own. Good hard work done which can be seen through the organized section and the look and feel.

www.moneycentral.com.1

www.moneycentral.com.2

www.moneycentral.com.3

The leader in Online Marketing

Introduction

Commission Junction is a popular online advertising company and has a number of big clients including ebay in their portfolio. This site has a strong corporate identity and a very user friendly navigation system. I usually judge a website by my first impression and this site certainly got my attention.

Identity

The corporate colors are used effectively on every page. The headers of each section are highlighted in strong green, click providing a good contrast with the white background. The faint CJ graphic embedded in the flash movie on the top right provides a subtle reminder of the brand. Looking at the CJ logo, I thought more characteristics of the circular shape or some curviness could be used throughout the pages.

Navigation

The site utilizes an easy navigation system with the top level “Solutions, Our Clients, About Us” on every page. All the links are easily visible user friendly. The client login system on the home page is very well thought of. However, the country navigation script on the top right hand corner seems to be abit slow.

Navigation trail or bread crumb is often used in many web sites to provide easeness in navigation. The bread crumb in this site is hard to see because its color does not contrast with the green background. The links below the page have the same problem.

The flash is not heavy, so it does not slows down the loading time. Overall, the site loads quite fast even on a dialup modem.

Design

All the pages in the site are very consistent in terms of typography and layout. Important headings are bolded and all the texts are easily readable. The layout is effective with dotted lines separating different sections. The spaces around the text and images makes the page neat and tidy, improving user experience when navigating the site. The orange color is well used to balance out other colors on the page.

Most important of all, the graphics used are appropriate and presentable. (Graphics can spoil a great site or makes a crappy site looks great.)

Conclusion

www.cj.com is well organized and presentable. The web site designers must have gone through a long planning process to create the site. It is all worth the effort.


Sitecritic.net award

Easy Navigation System.
Easy Navigation System.
Breadcrumb is hard to read.
Breadcrumb is hard to read.
Consistent Spacing between text and images
Consistent Spacing between text and images