Competitor Analysis

Well, so for Web Design 2 project I will redesign the website for Mobil. First I will find out about their competitor and analyze their advantage and disadvantage. The three competitors are Petronas, Shell, and Caltex.

1. Petronas

Petronas is a local oil company in Malaysia. The target audience are families and they shows support to families by being a sponsor for family education. They also stabilize their image as a leading local oil company that care about local audience.

The advantage of Petronas is their status as a local oil company that owned by government. Automatically they get more advantages than other oil company in Malaysia. Beside that they also will be trusted more by locals.

The disadvantage is their product range, Mobil have more product range than Petronas.

For the website, Petronas website using simple 2 framed website. Even though the navigation is quite clear, but the title for each navigation link is quite confusing, for example the "People" page. I think the title can make user confuse, what is the "people" here means? The content for that page actually about career opportunity in Petronas. Their sitemap instead of guiding people in viewing their website, they make user even more confuse by using thumbnails without any description on it. The link list also very brief and don't give user any information about the actual site map. The design is still acceptable, but needs more work on user-friendliness.

2. Shell

Shell is the United States-based affiliate of Royal Dutch Shell, a multinational oil company of Anglo Dutch origins, which is amongst the largest oil companies in the world.

Their target audience are younger people like teenager to working adult. We can see how they try to attract more younger costumer by having an online game about Shell oil in their website.

The advantage of Shell company is they have more petrol station than Mobil in Malaysia, their petrol station are easier to find or accessed. They also have campaign about environmental friendly oil that attract many people especially environmentalist.

The disadvantage is Shell has less product range compared to Mobil. While mobil has many types of lubricant, shell only has few types of it.

Shell website using simple 2 part where the left is for navigation and right for content. Their website also quite consistent, with same header, footer, and navigation for each page. Overall the design is simple and nice enough, but the website still feels boring even though there's online game as highlight.

3. Caltex
Caltex is a petroleum brand name of Chevron Corporation, used in more than 60 countries in the Asia Pacific region, the Middle East, and southern Africa.

The target audience for Caltex are more to adult and working adult. They potray more formal and professional but still friendly service in their website.

The advantage are the bonus that costumer receive when they buy fuel from Caltex. It will make costumer keep going to Caltex for fuels.

The disadvantage is that Caltex less renowed that Mobil.

Corporate Website Analysis - Miss Selfridge

Miss Selfridge
http://www.missselfridge.com/

Main Page

Product Sale Page

Product info page

Miss Selfridge is a UK clothing/fashion brand that usually has feminine design. In this website user not only can see products information but also can purchase those products from this website. Because this website purpose mainly for online shopping, the information given in this website also more related for user to purchase the products like delivery charge, log in to account, payment method, etc.

The structure of this page is simple and easy to navigate, mainly consist of header and footer that always the same in every page and content page where the left side always be the navigation and the right side as the content area. The thing that I notice in the navigation area is how the links will expand if we click on certain area that has more sub pages.

Before

After

There also option to find/buy products by size so the customer don't need to waste their time if actually for certain products there's no suitable size. All categories also clearly indicate the content of the page, so it's easy to find specific product that customer want. Beside that there also search engine of customer need to find certain kind of products that they want.
The product page basically consist of thumbnails of the products where if customer interested they can view more picture and information of the products.

Grid System

Corporate Website Analysis - Philips

PHILIPS
http://www.philips.com.my/

PHILIPS' Main Page

Television Page

Sub Page of Television - Flat TV/LCD Page

PHILIPS is a company that sells electronic stuff like television, audio products, lighting and many other electric products. In this website they give lots of information to customer about their products. Even though they have wide range of products, it's still easy for user to search for the products that they want because they already categorized all information into their own categories. There also search engine to make it even easier. Not only that, there also the company information about their history, company profile, design, research, etc for other user that want find other information beside the products.

For the structure this website have the same main structure for all website, there always the same header and footer, only a bit difference in content area that mainly divided into two parts. In main page the content area divided into two parts, in right side we can see list of products categories while in left side there's image links that featuring their featured products.

In the product area (eq. television) in the content area the right side consist of more sub-pages links for television categories, while in the left side there's a bit information about their feature products that if we click will bring us to more specific page and the most recent products that PHILIPS produced.

In more specific page like in flat TV page, user can easily find the TV they want by using the left side navigation to put specific criteria of products that they want. I think it's so effective so user don't need to see all products information one by one but just directly put specifically the product criteria that they want.

Overall the website quite clean and easy to navigate, there's some image links for featured products so user will more interested in clicking those image links.

Grid System

Corporate Website Analysis - UNICEF

UNICEF
http://www.unicef.org/

Main Page of UNICEF.org

What We Do section

Sub page from What We Do

UNICEF website got so many information, to manage those informations they categorized information depends on the topic and then later elaborate more in more specific area. Mainly the website structure is consist of header, content that divided into 4, and footer. In all pages they never change the header and footer, only the content are that change.

This website also maintain the corporate color, blue and white with yellow as highlight. With such a big information in website, it will be hard for user to find the information that they want, so in this website they solve the problem by providing search engine. Also because UNICEF is a very famous non-profit international organization, they also provide many different languages for this website.

Website's Grid System

Navigation Research

1. Mozilla
I think I like this website. The navigation is very clear, the design also very clean. Really easy for me to find what I want. The first page show us big icons and links to the newest browser and add ons, straight to the point to promote their products. I think that also because usually what user want when they go to software website is to download the software or plug ins, so they directly put the link there to make user can easily download their stuff. They also do not just give the links to download, but also provide small link about the product details, in case user want to know more about the product. The top navigation also straight to the point, easy to see.

When I go to the products page, there's two icons of the product in the middle of the page as the navigation to more specific page for each product. Below the title there's breadcrumbs navigation that shows the "depth" of the page.
For page with more content, there's sub navigation where all content being listed. The depth of the content showed by indent.

For even more content like page for developer, it lead us to somewhat micro site with more focus in its topics. There's navigation using tabs for the main topics, sub navigation at left hand side for sub topics, and normal text links for more specific topics.
Overall the site have very good and clear navigation. Each page maintains the consistency like the top navigation and breadcrumbs navigation. For page with many content they separate it and make it have its own specific page.

WebDesign Project 2 progress

Well, I try to research again for my Project 2, here's some interesting website about recycling
http://www.recycle.co.uk/
http://www.recycle-more.co.uk/
http://www.recyclenow.com/
http://www.recycleforlondon.com/

Mostly the website using table and got corporate looks. Main color as usual is green, except for http://www.recycle.co.uk/ where the color mostly orange with a bit green there. But I still prefer green though, the color orange makes me think more about global warming than recycle. Looking at those websites makes me think that here we don't really practice recycling stuff, while in overseas, especially in Europe and Japan, recycling stuff is quite popular (in Japan it more to must though).

Also some website about paper recycling:
http://www.paperretriever.com/
http://www.cmu.edu/greenpractices/recycling/paper.html
http://www.recycling-guide.org.uk/paper.html
http://www.tappi.org/paperu/welcome.htm

From there I got some interesting facts:

• It is possible to achieve significant reductions in the cost of buying office paper by reducing paper use and reusing paper where possible.
• Eliminating office from waste may reduce waste bills by as much as 50%.
• Making new paper from old paper uses 30% to 55% less energy than making paper from trees and reduces related air pollution by 95%.
• Each day American businesses generate enough paper to circle the globe at least 40 times!
• 77% of paper waste generated in offices is recyclable.
• Typical business offices generate about 1.5 pounds of waste paper per employee each day.
• Nearly half of typical office paper waste is high grade office paper.
• Recycling one ton of paper typically saves about 6.7 cubic yards of landfill space. A cubic yard of stacked office paper weighs about 380 pounds. Cost savings may be estimated by multiplying the tons recycled by 6.7 times the cost per cubic yard for waste disposal (if by volume) of by cost per ton (if by weight).
• Commercial and residential paper waste accounts for more than 40% of waste going to the landfill. Eliminating this paper from our waste would nearly double the lives of current landfills.
• Newspaper is recycled into newspaper, game boards, egg cartons, gift boxes, animal bedding, insulation, and packaging material.
• Office paper is recycled into office paper, tissue paper, paper towels, and toilet paper.
• Corrugated cardboard is recycled into new cardboard and cereal boxes.

From there I started making some analysis about what I want to do for my design:

• Promote recycle paper
• Make user understand how important recycling is
• Make it fun, not too corporate. Some website that I visited got Interesting content, but the visual wise it's not so nice. But some corporate looking website like Recycle Guide still can make it interesting.
• Show how to recycle paper
• Show what can we do to the recycle paper
• Target audience are teenager and young adults
• Create mascot/logo, to make the website easier to remember

Some analysis for the logo:

• Promote recycling
• Green color
• The shape of recycle triangle
• Friendly looking logo

So here's the logo:
For the website I still want to use the concept that explain to audience that every paper that they use is the same as a piece of wood, that's why they must recycle paper, to reduce the amount of wood/tree that been cut just for a piece of paper.
OK, so far that's it my research for this project, will update later after I finished designing my interface! :)

WebDesign I

So past Wednesday we have brainstorming session, and from there I got some new ideas. I think we must do this again every week, it really helps ;) Even though I feel sooooo tired after the brainstorming session. We agreed to do some brainstorming session again next Monday to discuss about our moodboard. Speaking of moodboard, last night Chen come to our place to do it. Supposed to do since 10.00 but I overslept until 11 something :p Some more after that we eat and have a long chat, in the end we started to work at 1.00 LOL

We started to find references for our art direction, browsing many many illustration artist's website. I wish I have skill as good as those Illustrators, their work are very very interesting. I also do some research for the barn and cattle. For cattle no such luck though, still need more research. Dunno why when I search in DevianArt.com using the keyword "barn", the outcome are mostly nude photography in barn @_@

Well, here some illustration website that I like:
Steve Simpson
Chris Turnham
Miskellaneous
Judith Drews
David Michael
Two Fish Illustration
Take a look at their works! They're all so talented :) Maybe you guys can get more inspiration from there :)
Ahh need to go for Digital Media Class now~ See you later guys :)