wireframe

This is the homepage for Papparich Kopitiam website.

The inner page for Papparich Kopitiam website.

Moodboard of Papparich kopitiam's website redesign

Strategic brief

Project Definition

-To redesign the papparich kopitiam's website by changing a better interface design, good navigation button and well-arranged info.

Current Site’s Analysis Goals

-Have a better interface design which different style from the competitors.
-Better grid system and info hierarchy.
-Better navigation placement and treatment on it.
-Well arrangement of info.

Client’s Analysis

-A kopitiam with the concept of traditional classic malaysian style.
-Selling coffee and asian delicacies at affordable prices yet the quality is the main factor to attract the customer.
-Embodying the classical feel that you have experienced in the small kopitiam back in the oldies.

Short & Long-term Site Goals

-Letting people to detail info and newest news of the shop.
-Letting people to know their specialties and other food as well.
-Increasing customer by letting them know the nearest location around them.

Target Audience

-People from 19 to 30.

Competitor Analysis

-Better interface design and navigation.
-Info well-arranged.
-Good hierarchy in typo and info.
-Better grid system.

Idea & Concept Implementation

-Using the corporate identity color of papparich which is green to combine with earth color like brown in order to create a harmony and friendly feel for the viewer. Papparich is holding the concept of tradisional malaysian style, so flora pattern like batik will be added in. Follow the graphic from the previous website, the style of the graphic will be used as the background interface and info graphic design. Creating a better navigation and place them at the correct place so that the viewer won't be confused. The specialties will be on the homepage since it is the main product of papparich.

tutorials url & html library

Some of the photoshop website design tutorials I found.

http://psd.tutsplus.com/tutorials/interface-tutorials/how-to-create-a-grunge-web-design-in-photoshop/

http://www.talk-mania.com/web-layouts/40144-interior-design-layout.html

http://www.hv-designs.co.uk/2008/10/03/personal-portfolio-layout-2/

http://www.viget.com/inspire/how-to-make-the-viget-inspire-background/

Some of the html script library I found.
1. Photo Slider
2. Picture Rollover
3. Image Preview
4. Switching Images

analysis of beautiful commercial websites

Fo further research, i did find some beautiful and interesting commercial website. These are the screenshots and analysis of them.

Tokyo Illustrator Society

analysis :

- simple yet neat grid system.

- interesting navigation button.

- simple yet harmony and attractive color combination.

- clear typo hierarchy.

Nike Snowboarding

analysis :

- nice and clear typo hierarchy.

- simple and clear grid system.

- nice and interesting image used.

Marie Catrib's

analysis :

- nice color combination.

- beautiful graphic used.

- good and pretty typo hierarchy.

- well organized and labeled.

Cosmic Soda

analysis :

- loud and interesting color used.

- good info graphic used.

- neat and good grid system.

- clear typo hierachy.

analysis of competitor's website

I have found some kopitiam which are similar Papparich that sell coffee and asian delicacies. And also did the analysis of their website.

Pak Hailam Kopitiam

analysis :

- grid system is not strong but is clear.

- basic typo hierarchy but the info is still quite chunky.

- the navigation button is not obvious and no good treatment on them.

- NO REAL TEXT.

Pak Li Kopitiam

analysis :

- weak grid system.

- the flash for logo seems useless.

- weak typo hierarchy.

- navigation button quite okay.

- interface wise still okay and can be better.

Oldtown Kopitiam

analysis :

- good grid system.

- consistent.

- nice transition and flash.

- good typo hierarchy.

- nice interface design.

- NO REAL TEXT.

Hailam Kopitiam

analysis :

- well organised.

- basic and clear typo hierarchy.

- nice banner but the interface is same for evey pages, should have different background.

- quite user friendly.

- nice grid system.

analysis of papparich kopitiam website

The client website that I am redesigning is Papparich kopitiam. Papparich kopitian is a coffee shop with the concept of traditional classic malaysian style. They are selling coffee and asian delicacies at affordable prices yet the quality is the main factor to attract the customer. The shop is embodying the classical feel that you have experienced in the small kopitiam back in the oldies.

Analysis of the website :

- weak grid system.

- navigation button bar is at the bottom which the viewer might can't find them.

- plain color background made the website seems boring and unfinished.

- lack of consistency for every page.

- weak typo hierarchy.

- not well-organised.

- weak interface design.

- not user friendly, viewer have to refocus when proceed to another page.

gantt chart & site map

This is gantt chart for commercial website redesign for papparich kopitiam.

This is the site map for commercial website redesign for papparich kopitiam. Basically the original site map for the previous map is not well arranged while some of the section could be categorized under same thing. So this new site map will be more organized.