Revived Sitemap & Moodboard

Site Map

Mood Board

Web Design 2 - Redesign Commercial Website

Project Definition:

This project is to redesign the website of "GHEE HIANG" to be more attractive in terms of the design and content.

Client's Site Analysis:

Client Background

Ghee Hiang is a Malaysian brand built over 150 years, through careful nurturing, sound customer commitment and experience. Originated from Fujian, China since 1856, Ghee Hiang has become an integral part of Penang, Malaysia's colourful heritage and mesmerising traditions.

In 1856, during a period when the tin mining and rubber industries in Malaya (now Malaysia) was flourishing and attracted many Chinese immigrants from Southern China, the founder invited a Fujian Pastry Chef to Penang and adopted the name Ghee Hiang. This marked the beginning of Ghee Hiang traditional pastries in Penang.

Then in 1900's, Ghee Hiang Baby Brand Pure Sesame Oil was introduced, using methods and techniques learned from Fujian, China.

Through the years of further refinement and quality seeds selection, Ghee Hiang Baby Brand Sesame Oil had gained much appreciation, demand and popularity. It had become a trusted brand name for uses ranging from households, food industries, restaurants to healthcare.

Unique And Selling Point

Their most unique selling point is their legacy that make them pride and the effort of designing and usage of the mascot, which successfully captured target audience's interest. As we hard to see a mascot from any other biscuit brands in Malaysia also, maybe just a logo only.

Mission And Vision

Mission- At Ghee Hiang, they are committed to preserve the highest quality level and freshness in all their products, and never compromise quality for profit. They strive to meet and exceed their customer needs and expectations of quality, service and selection.

Vision- Their vision is to put Ghee Hiang on the world map; acclaimed for its brand heritage values, competitiveness and quality through product excellence and innovation; and bring it forth from one generation to another.

Position And Cultural Value

Positioned on the new market of biscuit brands, Ghee Hiang succeed to grab their target audience's interest. From the outlets in Penang, special and interesting design of the outlet make people want to pay a visit to there, and from the internet, the flexibility of taking pictures, posting the new and recent events to their own and Facebook page, and also doing online cart helps Ghee Hiang to be spread by the internet easily, this made Ghee Hiang is both eye and ear-catching to those who never heard of it.

Short And Long Term Site Goal:

Short -

Serves abundant and interesting information for users to keep visiting the website.

Long -

Building a relationship to the customer through interactive medias and events going on.

Target Audience:

- Target audience are those who love mooncakes, traditional cookies and pastries, etc.

- Age around 20 - 40, because probably they know to access internet and spend most time with computer or some of them are in overseas.

- For those who wish to buy online and present it to friends or family that in different country or out station.

Client's Site Analysis:

Ghee Hiang

Good

- Have a very nice slide show in homepage.

- Consistency in colour, style and layout.

- Information is clear.

Bad

- Composition layout still can be better.

- Milestone area can make it look interesting as it is the pride journey for them.

- Facebook area is taking too much places already.

- Some parts still lack of information.

- No roll over effect for the top navigation.

- Events, News and Updates, and Location Map's site can make it more interesting.

Competitor's Site Analysis:

YongSheng Gift Shop

Good

- Nice slide show in front the homepage.

- Information is clear.

- Provide Catalog to let people download.

- Photos of the product shown very nice.

- List out all the prices of the product to make people easier to choose what they want.

- Overall colors are warm and nice.

Bad

- Too many contents.

- Composition of the layout not very nice.

- Do not have a title for every pages, audiences might get confuse where they are, and navigation bar also did not show or change colour when reached the page.

- Some informative that thought to have a link through it are not linked.

- No contact number and address for the outlets.

Kam Lun Tai

Good

- A very formal and opening for the homepage, make people feel it is quality assurance.

- Show very clear information about the awards and certificate they have.

- Information for the products also show very clear.

Bad

- Play too safe for the website, sometimes will make people feel bored when come to this website.

- Can add more colours for the layout.

- Can have some design for the navigation and layout also.

- Did not show the price for the product.

Foh San

Good

- Very nice slideshow showing in homepage.

- Colours are very suit to the website.

- Consistency

- Pictures shown very nice.

- Information very clear.

Bad

- Some error link file for the top navigation.

- Less information for the products.

Lian Bee

Good

- Nice slideshow showing in homepage.

- Simple yet beautiful layout design.

- Products shown very nice and clear.

- Interesting and nice showing the location map.

Bad

- Can add more colours for the website.

- Can design the layout become more nice and interesting.

Beautiful Commercial's Site Analysis:

Tai Cheong Bakery

Good

- Nice composition layout.

- Interesting and nice navigation button on the bottom.

- Nice texture match with the background.

- Good typography.

- Consistency.

- Pictures of the products very nice.

Bad

- Still lack of some information.

- Can be more layout design.

Koi Kei Bakery

Good

- Interesting introduction for the home page.

- Nice navigation roll over effect.

- Nice layout design.

- Consistency.

- Products showing very clear and nice pictures.

Bad

- Colours mood a bit dull.

- Can have more layout design.

Choi Heong Yuen

Good

- Nice slideshow in the home page.

- Information is clear.

- Consistency.

Bad

- Products information are a bit complicated.

- Colour mood still can make it better.

- Some of the photos are distorted.

Lollipop Bakery

Good

- Doodle kind of art style always easy to get people attention.

- Simple and nice layout.

- Information is very clear.

- Pictures of products very nice.

- Consistency.

Bad

- Can add more colours to the website.

- Composition layout for the ordering part can be better.

Haagen-Dazs

Good

- Nice slideshow in the home page.

- Consistency.

- Nice product introduction.

- Good colour mood.

Bad

- Too formal as it aim for the young teenagers' market, can make it more fun yet professional.

- The roll over effect for the top navigation not obvious enough.

- Can add more colours to make it more colourful and fun.

Url of Coding Tutorial

HTML

http://www.w3schools.com/html/

http://www.htmlcodetutorial.com/

http://www.davesite.com/webstation/html

http://www.tizag.com/htmlT/

CSS

http://www.westciv.com/style_master/academy/css_tutorial/

http://www.w3.org/Style/Examples/011/firstcss

http://www.tizag.com/cssT/

http://www.csstutorial.net/

http://www.w3schools.com/css

http://www.html.net/tutorials/css

JAVASCRIPT

http://www.webmonkey.com/tutorial/javascript_Tutorial

http://www.w3schools.com/JS/default.asp

http://www.pageresource.com/jscript

http://www.wdvl.com/Authoring/JavaScript/Tutorial/

http://www.webteacher.com/javascript/

Url of Design Tutorial

AI

http://www.tutorialized.com/tutorials/illustrator/1

http://www.smashingmagazine.com/2007/02/03/adobe-illustrator-tutorials/

http://www.sketchpad.net/illustrator.htm

http://www.noupe.com/tutorial/vector-illustration-60-illustrator-tutorials-tips-and-best-practices.html

http://www.vector.tutplus.com/

http://www.good-tutorials.com/tutorials/illustrator

http://www.designertoday.com/Tutorials/illustrator.aspx

PHOTOSHOP

http://www.hongkiat.com/blog/40-incredibly-inspirational-retro-vintage-photoshop-tutorials/

http://www.tutorialized.com/tutorials/photoshop/1

http://www.good-tutorials.com/tutorials/photoshop

http://photoshoptutorials.ws/

http://www.absolutecross.com/tutorials/photoshop/

http://www.photoshoproadmap.com/photoshop-tutorials

http://www.noupe.com/tutorial/53-killer-photoshop-illustrator-effects-and-tutorials.html

Site Map:

Gantt Chart:

Mood Board

Testing Digitalize Interface and sketches

irst testing digitalize interface for my theme " how to create fun using lomo"

software: Adobe Photoshop CS5

Sketches for the interface.

Refinement Structure

This is the refinement for the web structure.

Note: Click to enlarge.

Mindmap for Lomography(Holga 135BC)

Web Design1: Mindmap for Lomography(Holga 135BC)

Web Design 1: "How to....?"

"HOW TO CREATE FUN USING A LOMO CAMERA(model: Holga135BC)"

WHO AM I - Lomographer.

WHAT IS IT - Lomo model: Holga 135bc.

WHAT FOR - For people who love Lomography!

1ST TASK - Reason why want to be a lomographer and Introduce the lomo model

2ND TASK - Experience of using the lomo camera.

3RD TASK - Tips of Capturing different styles of lomo pictures(day/night).

OUTCOME - See the pictures effect of Holga 135bc.

SHOWCASE - Gallery of the pictures.

Note: Click to enlarge the pictures below.

This is the flowchart:


This is the moodboard:


This is the Structure:

Web Design Tutorials(self improvement)

Web Design 1: Web Design Tutorials(self improvement)

Software: Adobe Photoshop CS5

The brushes not easy to use, so comes out the result not that good :(

anyway, a good try for me =D

Original:

Mine:

Website References(Web Design1)

Web Design 1: website references for the title "How to....?"

I chosing the title of...

"HOW TO CREATE FUN USING A LOMO CAMERA(model: Holga135BC)"

WHO AM I - Lomographer.

WHAT IS IT - Lomo model: Holga 135bc.

WHAT FOR - For people who love Lomography!

1ST TASK - Reason why want to be a lomographer and Introduce the lomo model

2ND TASK - Experience of using the lomo camera.

3RD TASK - Tips of Capturing different styles of lomo pictures(day/night).

OUTCOME - See the pictures effect of Holga 135bc.

SHOWCASE - Gallery of the pictures.

Because of my concept is all about vintage, so these all will be my references=)

www.ilovecolors.com.ar

www.kuhboom.com/

http://www.bcandullo.com/

http://mesonprojekt.com/

http://www.literarybohemian.com/

http://www.huxleyprairiefest.com/

http://www.readymadedesigns.co.uk/

http://www.fivecentstand.com/

http://edu.tnvacation.com/

http://www.windrocklodge.com/

http://www.lanikaiproperties.com/

http://maketheswitch.ae/en

http://tnerb.com/portfolio.php

http://www.thrushexhaust.com/

http://adaptd.com/

http://www.custom-design.ch/custom08/index.php

http://www.cottonseedoiltour.com/

http://www.readyphotosite.com/