Watch Website Analysis & Revamping Proposal

WATCH

Daniel MulyadiF10DM0669

DM2K

Table of Contents

1 | INTRODUCTION

hublot2 | SCREENSHOT4 | OVERVIEW5 | SITE MAP6 | AUDIENCE7 | DESIGN8 | USABILITY9 | CONCLUSION

longines10 | SCREENSHOT12 | OVERVIEW13 | SITE MAP14 | AUDIENCE15 | DESIGN16 | USABILITY17 | CONCLUSION

omega18 | SCREENSHOT20 | OVERVIEW21 | SITE MAP22 | AUDIENCE23 | DESIGN24 | USABILITY25 | CONCLUSION

rolex26 | SCREENSHOT28 | OVERVIEW29 | SITE MAP30 | AUDIENCE31 | DESIGN32 | USABILITY33 | CONCLUSION

tissot34 | SCREENSHOT36 | OVERVIEW37 | SITE MAP38 | AUDIENCE39 | DESIGN40 | USABILITY41 | CONCLUSION

42 | CONCLUSION

longines revamp45 | INTRODUCTION46 | DEVELOPMENT55 | SOLUTION

64 | APPENDICES

1

INTRODUCTION

Watch is a time piece worn since very long time ago. Even nowadays the function of watch is replaced by gadgets, it’s still one thing people will not throw. Watch is becoming a precious item and a sign of luxurious besides jewelleries.

Many big watch brands realized the importance of a having a website as a tool of marketing and connection towards customers.

Aim

The aim of this analyze is to learn the good points and bad points from each of the website chosen, so that the good points can be applied and bad points to be awared of in creating or revamping a website.

2

hublot / SCREENSHOT

http://www.hublot.com/

3

4

hublot / OVERVIEWSpesification

Flash website

Black background with metal texture

Light grey and white sans-serif fonts

Aim

To increase sales

To inform about the brand and products

To serve the customers and press in a more efficient way

To fill the vacancies the company opens

Objective

To provide information of the collection

To provide the helping facilities for customers in making buying decision

To show the real look of the products from every angle

To provide information about the store locations

To provide information about the brand

To provide the press with the information press needs

To provide the information of vacancies available inside the company

Target Audience

Possible customers

Loyal customers

Collectors

Retailers

Press

Vacancy applicants

Competitors

5

hublot / SITE MAPSite Map

Home

Discover Our Collections

Watch SelectorBy CollectionBy Size360° Explorer

Boutiques / Points of Sale

HUBLOT HeadquartersBoutiquesRetailers

Brand Communication

HistoryKnow HowVirtual TourLexiconHublotistaPress ClippingFollow UsJobsPartnersLegal Terms

HUBLOT TV

By DateMost ViewedBest Rated

Live Explorer

News

Hublot Nation

6

hublot / AUDIENCEHUBLOT’s primary target audience is men in age of 25 to 50. The target audience can be seen from the ambassadors of HUBLOT which they find most suitable with their brand’s image. Some of the ambassadors are Jet Li, Diego Maradona, Usain Bolt and Manchester United football team.

Demography

AGE –20 to 50 years old

SOCIAL CLASS –Upper middle class to upper class

HOUSEHOLD INCOME –Exceed $100,000

EDUCATION LEVEL –Graduate degrees

TYPICAL PROFESSION –Lawyers, physicians, dentists, engineers, accountants, management consultants, professors, architects, economists, political scientists, pharmacists, school principals, administrative assistant, executive assistant, civil service executives and civilian contractors

Psychography

Most of them are financially independent. But some might be still sitting in university class room and coming from an upper middle class or upper class family.

In leisure time, the university students and young professionals typically going for drinks at a bar or a café, fine dining, going to cinemas, going for sports, playing games, travelling, social networking and clubbing. Most of the time is spent with colleagues, friends or date.

While the senior typically going for drinks at a bar or a café, playing chess, playing golf, doing social activities, reading books, gardening and travelling. Most of the time is spent with family.

7

hublot / DESIGNColour

The black background with metal texture make the website looks glamour and tough. The website theme is very representing the style of the brand itself, which is glamour and tough.

The colour scheme for the basic layout elements are in monchrome of black and white colours. The images used are bright full colour images with very clear details.

Font

The font family is Helvetica Neue, Helvetica, Arial, sans-serif. The size mostly won’t be a problem of legibility, as the sizes are big and contrast with the background. The use of various styling and intensity of grey and white for the text colour goes well with the overall look of the website and logo.

The line height is big enough, but there is no space added in between paragraphs. Some paragraphs have quite big space in between lines which are still under the same paragraph.

Layout

The first thing audience will see is the main image, which is the image of the collection watch. The use of large image of watch and simple background, is a great contrast to direct audience’s attention to the main image.

The second thing audience will see is the carousel of news. It becomes the second thing audience will see is because it’s still above the fold and it is more colourful than the logo. The logo is in pure white. It’s planned well with other navigation menus are in lower brightness.

All the pages are only takes the fold space. Some of the sub-pages use different way to show the content, which doesn’t seem necessary and make the website lack of unity. Some content also shown in a pdf format, which makes the website looks not maintained professionally.

The expansion of news carousel to half of the page is make the page looks messy as the there is no even a translucent black layer covering the back of the news carousel.

Attractiveness

The style is not very neutral for all audience being targeted. It’s more attractive to the younger audience, but the interfaces are still quite simple to be used. So, for the older audience to use the website to find what they need, won’t be a problem.

The use of dark background contrast with white coloured text is a good decision for legibility purpose. The visual aspect is treated very well, like the huge image of watch with clear details and bluring other watches while looking at the selected watch.

8

hublot / USABILITYContent

The content is managed with careful. The explanation of the product’s detail is designed in an attractive way, to see the details the audience has to explore around the visual, without any signs which part is provided with the details. It’s better to have another alternative, either put certain signs on the visual or put the grouped details at the other corner.

Some menus of the navigation lead to new page, which is very good as it is used for clear purpose. Some of the menus are “HUBLOT Nation” and “HUBLOTista.”

Function

The interface is easily used. The audience can understand at once just by moving the cursor around. The functions are working well.

There is a feature which is to take control of the live camera shooting on the product. Even sometimes the audience unable to use because of the low bandwidth, but it’s a very creative way to show the product

There are 10 language options and all are working well without reducing the aesthetic of the website. However, the news is not translated to the language chosen. It is not a majot problem, but it will be much better if the whole website is translated.

Effectiveness

Audience easily finds what is needed, even though the site map is a cycle format. Audience easily meets all the purposes.

9

hublot / CONCLUSION

Overall, HUBLOT website is a good website. It really represents the brand with the colour theme and all design elements used. The visual and interface are undobtedly one of the best. The website can’t be used on mobile browser, because of using flash. But it has the replacement so that audience still find what is needed through mobile browser. However, it is poorly designed.

It just needs to make the navigation menu clearer and give some repetition to show more unity in term of page layout.

10

longines / SCREENSHOT

http://www.longines.com/

11

12

longines / OVERVIEWSpesification

Flash website

Navy blue, black, dark grey, light grey and white background

Light grey and white sans-serif fonts

Aim

To increase sales




Objective



To show the real look of the products from every angle



To engage the customers through the famous people as ambassadors

To provide information about the organized events

To provide customer service



Target Audience

Possible customers

Loyal customers

Collectors

Retailers

Press

Vacancy applicants

Competitors

13

longines / SITE MAPSite Map

Home

Watches

CollectionSelectorVirtual Catalogues3D WatchesInstructions for UseTechnical InformationFilms

Official Retailers

RetailersCustomer Services

The Brand

Company ProfileNewsHistoryMilestone ProductsMuseums

Personalities

Ambassadors of EleganceAmbassadors of Elegance ofthe World of Sports

Events

2011201020092008

Sports Timing

TennisAlpine SkiingGymnasticsArchery

Equestrian SportsPartnerships

Contact Us

Customer ServiceProductsSalesCatalogue Request Form

E-Newsletter

Multimedia

Media Center

Legal & Copyright

Site Map

Search Engine

14

longines / AUDIENCELONGINES’ primary target audience is women in age of 30 to 50. The target audience can be seen from the ambassadors of LONGINES which they find most suitable with their brand’s image. Some of the ambassadors are Kate Winslet, Aishwarya Rai Bachchan, Chi Ling Lin, Stefanie Graf, Ingeborga Dapkunaite, Jane Richard, Ariella Kaeslin, Evgenia Kanaeva and Francesca Schiavone.

Demography





TYPICAL PROFESSION –Housewives, lawyers, physicians, dentists, engineers, accountants, management consultants, professors, architects, economists, political scientists, pharmacists, school principals, administrative assistant, executive assistant, civil service executives and civilian contractors

Psychography

Most of them are financially independent and some are wives from a upper middle class or upper class family.

In leisure time, the young professionals typically going to a café with friends, fine dining, going to cinemas, going for body treatments, shopping, cooking, reading books and magazines, travelling, social networking and clubbing. Most of the time is spent with colleagues, friends, family or date.

While the housewives and senior typically gathering with friends for tea, doing social or charity activities, shopping, reading books and magazines, gardening and travelling. Most of the time is spent with family.

15

longines / DESIGNColour

The navy blue background contrast with white font colour. The translucent navy blue on the main image is not a very good idea. It creates seperation, which will be better if the gradient of image visibility used.

Some of the labels of request form are in red to mark as mandatory field, but the best option is just to mark it with symbol than changing the font colour to red.

The images are not using the same visual styles. Some are elegant, some are more illustrative and very farly different colour style.

Font

The font family is Arial, Helvetica, sans-serif. The size is 26, 12 and 11 pixels. The use of styling and intensity of of grey and white are poorly planned.

There are blocks of text in bold which is not a recommended way to differentiate certain paragraph.

Layout

The first thing audience will see is the main image, which consists of two combined images with almost the same visual weight. The main image should be replaced with one main focus to keep the attention of audience directed from one to another than make audience confused.

The second things audience will see is the logo and the navigation menus. They become the second things audience will see is because they

are quite contrast than the secondary navigation menus below the main image. Again, the logo and navigation menus both have the same visual weight. The logo should be more contrast in size than the navigation menus.

The third thing audience will see is not the secondary navigation or other social website icons, but is the “NEWS” drop down menu.

The last part audience will see is the row of secondary navigation menus with the other social website and application icons. The application icon’s height extend outside the colour bar, which is a bit disturb the order of audience’s attention with its stand out visual contrast.

The page doesn’t fill the whole screen, so the best option is to centralize the page, rather than just let one side of the page left empty. It makes the eye doesn’t feel balance because of the visual weight imbalance.

The layouts on sub-pages are inconsistent. Different sub-pages have different columns, which doesn’t make the website has good unity.

Attractiveness

The style is quite neutral, which is the best decision for a website with audiences from wide range of age. The use of dark background with white coloured text is not a major legibility problem for audience below 50 years old.

16

longines / USABILITYContent

The content is not managed professionally. The navigation menus are not categorized wisely. Some of the contents can be merged and some should not be placed under certain menu. There is also a menu which requires to change the name of the sub-menus yearly.

Though, there is a site map which enable audience to find the content needed. The detail of each product is placed at the same page of the product’s visual, which is good. But the detail is just provided in paragraph, which is not attractive to be read. The detail can be arranged with lines lead to point the part of the watch and also the thumbnails are too small, which audience can’t see which is more attractive to be shown in bigger display.

Function

The interface is working well. The buttons are working and responsive on mouse over.

The image of the watch at the home page leads to misunderstanding. Audience might think the clickable area of the image is to activate the watch, but it’s not. It’s leading to a page with the detail of the watch.

There are seven language options and all are working well. However, the news is still not translated to language chosen.

Effectiveness

Audience easily finds what is needed, even though the content is not well displayed. The only content which audience might fail to find is when audience tries to find the watch only by remembering the image of the watch. Audience can easily navigate from page to page.

17

longines / CONCLUSION

Overall, LONGINES website is not a good website. It has many good design elements, but fail in layouting and lack of user-oriented applications. The website is accessible on mobile browser and it is using the same website as on other common browsers.

It needs a lot of improvements. Starting from the interface, content, layout and design.

18

omega / SCREENSHOT

http://www.omegawatches.com/

19

20

omega / OVERVIEWSpesification

Flash website

Light grey and white background

Black and dark grey sans-serif fonts

Aim

To increase sales




Objective


To do branding by selling of side products







Target Audience

Possible customers

Loyal customers

Collectors

Retailers

Press

Vacancy applicants

Competitors

21

omega / SITE MAPSite Map

Home

Ladies’ Collection

ConstellationSeamasterSpeedmasterDe VilleSpecialitiesNew ProductsProduct PresentationsWatchfinder

Gents’ Collection

ConstellationSeamasterSpeedmasterDe VilleSpecialitiesNew ProductsProduct PresentationsWatchfinder

Accessories

Fine JewelleryFine LeatherFine Fragrance

Ambassadors

George ClooneyNicole KidmanCindy CrawfordZhang ZiyiJames BondDaniel CraigAbhishek BachchanDr. Buzz AldrinEugene A. Cernan

Michael PhelpsGreg NormanSergio GarciaMichelle Wie

Spirit & History

OverviewSporting SpiritPioneering SpiritHistoryArt of WatchmakingSpecial ResponsibilityOMEGA LiteratureHall of FameDownloads & Communities

Store Locator

Search on MapStores by Country / Region

My Favorites

News

Press

Jobs

FAQ

Sitemap

Legal

22

omega / AUDIENCEOMEGA’s primary target audience is men in age of 25 to 80. The target audience can be seen from the ambassadors of OMEGA which they find most suitable with their brand’s image. Some of the ambassadors are Georga Clooney, James Bond, Daniel Craig, Abhishek Bachchan, Dr. Buzz Aldrin, Eugene A. Cernan, Michael Phelps, Greg Norman and Sergio Garcia.

Demography






Psychography

Most of them are financially independent.

In leisure time, the young professionals typically going for drinks at a bar or a café, fine dining, going to cinemas, going for sports, playing games, travelling, social networking and clubbing. Most of the time is spent with colleagues, friends or date.


23

omega / DESIGNColour

The light grey background makes the website looks clean and still elegant. Soft gradient is applied wisely to most parts of the website.

The images used are not all in same colour mode, but yet they still goes well together with the balance feeling.

Font

The font family is Arial, sans-serif. The size is 45, 18, 14, 12, 11 and 10 pixels. The use of various styling and intensity of grey and white for the text colour and some text links in red, goes well with the overall look of the website and logo.

The line height is not big enough. Epecially when moving to a new paragraph, there is no space added to notify the changing to a new paragraph.

Layout

The first thing audience will see is the main image, which is the image of most recent collection. The use of large image of watch and colourful background, surely will keep the order of audience’s attention starts from it.

The second thing audience will see is the carousel of featured contents. It becomes the second thing audience will see is because it’s still above the fold and it is more colourful than the logo.

After the carousel and the logo, audience’s attention will be directed to the navigation menus which are inline with the logo. And at last are the secondary navigation menus at top corner, copyright, secondary navigation menus at bottom corner and other social website icons.

The home page is only takes the fold space. For the sub-pages, the audience will need to scroll down.

The layouts on sub-pages are consistent. Certain elements have difference through the pages to differentiate what are need to be showed differently.

Attractiveness

The style is quite neutral, which is the best decision for a website with audiences from wide range of age. The use of soft background with dark coloured text is also a good decision for legibility purpose. The interface of the main image is a good element to make the user experience better, especially for the younger audience.

24

omega / USABILITYContent

The content is managed with careful. Even though there are lots of sub-menus, but all are not misplaced and well categorized.

The site map is also provided, in case people want to find certain information without wandering around.

The detail is placed at the same page with the product’s visual and the content is well displayed. The full detail is only represented with the categories and will be rolled down when audience click on the detail category.

Function

The interface is easily used. There is also minor interface of the watch hands moving follow the exact time. Instead of adding the watch to favorite list by going to previous page, audience also can do it at display page as well.

There are 11 language options and all parts of the website are translated to the language chosen.

Effectiveness

Audience easily finds what is needed and able to meet the purposes quickly.

25

omega / CONCLUSION

Overall, OMEGA website is a very good website. It really stands out from the competitors. It uses light background when all the competitors use dark background. The website is in HTML, which is accessible on mobile browser. However, the website uses flash as main image, so the website used for mobile is different. The mobile website is more like mobile application. It is content-oriented, but still looks beautiful with the careful usage of typography and colours.

26

rolex / SCREENSHOT

http://www.rolex.com/

27

28

Spesification

Flash website (also provided in HTML version)

Dark green and black background

White sans-serif fonts

Aim

To increase sales



Objective

To provide information of the new and existing collection

To provide information about the brand and organized activities



To provide the press with information that press needs


To do branding by providing downloads of wallpapers or screensavers of the products

rolex / OVERVIEW

Target Audience

Possible customers

Loyal customers

Collectors

Retailers

Press

Competitors

29

rolex / SITE MAPSite Map

Home

Rolex Watches

The CollectionWomen’s SelectionBaseworld 2011Special Features

World of Rolex

About RolexSports and CulturePhilanthropy

My Selection

Dealer Locator

Buying A RolexServicing A Rolex

Press Room

Downloads

User GuidesWallpapersVideosScreensaversE-Brochures

Legal Notice

30

rolex / AUDIENCEROLEX’s primary target audience is men in age of 30 to 70. The target audience can be seen from the ambassadors of ROLEX which they find most suitable with their brand’s image. Some of the ambassadors are Andy Roddick, Justine Henin, Roger Federer, Tiger Woods, Placido Domingo, Tom Kristensen, Michael Bublé, Jonas Kaufmann, and Bryn Terfel.

Demography






Psychography

Most of them are financially independent.



31

rolex / DESIGNColour

The black background and dark green header makes the images stand out than the rest. The dark green is also the branding colour which is good to be used in the website to let the repetition remains at the audience’s mind.

Font

The font used is sans-serif fonts, but the text is saved as images in flash file.

The line height is very well maintained and it supports the legibility. Even the font sizes of title and body text are different, but inserting a small amount of space is still necessary as both are still using the same colour.

Layout

The first thing audience will see is the carousel of content images. The images of watch animate the hands according to the recent time.

The logo is the second element audience will see, as it is placed at the top right corner and it is also the element with colour on it.

Then, followed by navigation menus placed inline with the logo and the most bottom are the secondary navigation menus and other website options.

The sub-menus are drop down menu which will only disappear after a mouse click on the sub-menu or “hide menu” option. The sub-menus are aligned properly and also showing the sub-sub-menus. And also there is more explanation about the sub-sub-menu by auto appear thumbnail.

The sub-pages have several different layout variations for different purposes, but they still have the sense of unity.

Attractiveness

The style is quite neutral, which is the best decision for a website with audiences from wide range of age.

32

rolex / USABILITYContent

The content is managed with careful. Audience can directly see the product’s detail at once when it displays the product. The detail of the watch is displayed using creatively made interface and each detail is shown in a page with special individual page. At the introduction of the product, the paragraph is also shown in summarized form and audience is allowed to read the longer version.

Function

The interface is easily used. The audience can understand at once just by looking at the presence of the signs. The functions are working well and made perfect with transitions profesionally considered.

There is no very special interface, but with all the perfect visual attraction, audience can easily amazed of the website.

There are 11 language options and all are working well and all parts of the website are translated to language chosen.

Effectiveness

Audience can easily find what is needed, unless when the audience wants to find minor information using search function. Because the website is not equipped with search function.

33

rolex / CONCLUSION

Overall, ROLEX website is a good website. It really represents the brand with the colour theme. The visual of each page looks beautiful and different from one to another. The website is a flash website, but there is a HTML version provided. The website is using different version in mobile browser. The website is more content-oriented and designed like mobile application.

It just need to consider about the younger audience as well, for the target audience is ranging from 30 to 70 years old and the website is not very attractive to the younger audience.

34

tissot / SCREENSHOT

http://www.tissot.ch/

35

36

tissot / OVERVIEWSpesification

Flash website

Black, dark grey and white background

Red, black, dark grey, light grey and white sans-serif fonts

Aim

To increase sales



Objective




To provide information about the organized events


To provide online purchasing facility

To provide the press with information that press needs



Target Audience

Possible customers

Loyal customers

Collectors

Retailers

Press

Competitors

37

tissot / SITE MAPSite Map

Homepage

Collections

Touch SelectionT-SportT-TrendT-ClassicT-GoldT-PocketHeritage

Sports

AboutWatchesNewsCalendar

Ambassadors

Danica PatrickBarbie XuNicky HadenSteven StamkosTony ParkerDeepika PadukoneMichael OwenThomas LuthiHuang Xiaoming

Stores

News / Events

The Brand

PresentationHistory

Shop

Jungfrau Collection

Presslounge

Online Catalogue

Contact

Customer Service

Services

WebcamTerms of UseSwiss QualityProduct Support

Watch Selector

38

tissot / AUDIENCETISSOT’s primary target audience is men in age of 20 to 40. The target audience can be seen from the ambassadors of TISSOT which they find most suitable with their brand’s image. Some of the ambassadors are Michael Owen, Nicky Hayden, Thomas Luthi, Steven Stamkos, Tony Parker, Huang Xiao Ming.

Demography






Psychography

Most of them are financially independent. But some might be still sitting in university class room and coming from an upper middle class or upper class family.


39

tissot / DESIGNColour

The black background allows the light effect attracts attention. The use of monochrome of black and white colours also gives contrast with the colour of the logo which uses bright red, black and white.

Some of the usage of colour is inconsistent. The background for body text in some pages are in white, some in black.

Font

The font family is Arial, Helvetica, sans-serif. The size is 12, 11 and 10 pixels. The colours used are red, black, dark grey, light grey and white. The difference colours and styles wisely used to differentiate levels of text.

The line height needs a bit more space for legibility purpose. In certain page, there is no space added in between paragraphs.

Layout

The first thing audience will see is the animation of clock which is created not only as a clock but also functioning as the carousels of content which can be seen when the cursor is moved to the middle area.

The logo is the second element audience will see, as it is placed below the animation and aligned at the centre.

Then, followed by navigation menus placed after the logo and the most bottom are the secondary navigation menus and other social website icons.

The sub-pages have different layouts. The width of columns change from page to page. Local navigation menus placement is different from page to page.

Attractiveness

The style applied on the home page, surely attracts the target audience. The digital clock with bright light as hands shows the digital era theme.

40

tissot / USABILITYContent

The content is managed with careful. All content are placed under the right menus. The detail of the watch is displayed in list and icon instead of paragraph, which is the best way to provide detail.

Function

The interface is easily used. The audience can understand at once just by moving the cursor around. The functions are working well and the animation at the main page is attractively beautiful.

There are language translation based on location. There are 16 region options. However, the news and most of the content are not translated to language chosen.

Effectiveness

Audience easily finds what is needed and easily meets all the purposes.

41

tissot / CONCLUSION

Overall, TISSOT website is a good website. It really represents the brand with the colour theme and all simple design elements used. The website is accessible in mobile browser, but caused by the flash for main image, it doesn’t appear on mobile browser.

It needs to re-layout the pages to have more unity as a whole website and be more consistent in using the colours.

42

CONCLUSIONIn conclusion, between the five websites, the best websites are OMEGA website and HUBLOT website, while the worst website is LONGINES website.

OMEGA website is the best compared to others because the website is beautiful for any audience in any age. It uses light colour background, instead black background, but still able to handle the images and keep the beauty of the products appealing to the audience. The website has very good control overall, from the colour, imagery, layout, font and consistency. It is a good example of user-oriented website.

HUBLOT website is the best in term of show-casing the products. It’s very organized and also showed in interesting way.

LONGINES website is the worst compared to others because the website is lack of control in many aspects. Starting from the home page, the hierarchy is very poor. Then, the layout, imagery control, colour and font not showing a unified website.

So, the website chosen to be revamped is LONGINES website, because there are more rooms for improvement.

revamp proposalLONGINES

45

revamp / INTRODUCTIONObjectives

To increase the number of audiences visiting the website

Reduce the time required to find information

Serve the information in an eye-pleasing way

Reduce the time required to fully load a page

Design Requirements

Reconstruct the site map

Use the colour that represents the brand

Use certain font styling and colour for certain purposes

Layout the pages consistently

46

revamp / DEVELOPMENT

The website is using bright and calm colour background instead of dark background to enhance the visual of the product.

Research on colour usage

From the research and careful planning, here are the decisions made to be included in designing the website.

Colour

The new layout will be using the soft and monochrome colours to overcome with the lack of dark and wide logo. Some soft gradients will be applied to make the website looks more alive and not too dull.

Font

The new layout will use serif fonts to make it more fun and also adding a feel of old antique theme.

Layout

The new layout will be designed based on grid system to make the layout looks clean and easy in placing the massive amount of images. The website design will use a more unique way to display the products.

47

The websites are using serif fonts and different tones of grayscale. The text is legible and fun with playing only with text.

Research on font usage

48

The websites are using horizontal movement with layout in columns. It creates simple, fun and clean websites instead of putting in a lot of design elements.

Research on layout

49

Site Map

Home

Watches

CollectionSelector

Retailers

About Us

Profile & HistoryAchievementsPartnershipsNews & Events

Ambassadors

CelebritiesAthletes

Contact Us

Catalogue RequestCustomer Service

Career

F.A.Q.

Media & Downloads

Virtual CataloguesInstructions for UseTechnical InformationFilms3D DisplayLONGINES iPhone App

Press

Site Map

Legal

Before start doing the wire frame, the content has to be re-organized so that audience can find information easier and faster.

At the right column is the re-organized site map based on content that available within the LONGINES website.

The first group is the primary global navigation. Those are the menus that used most frequent by audience.

The second group is the secondary global navigation. Those are the menus that used less frequent than the first group.

50

Wire Frame

The hierarchy wanted to be shown is from the main image of new collection, logo, primary global navigation, page options (language and search function), social website icons and at last secondary global navigation.

51

Wire Frame

The language option is using the drop down system and push all the rest below the fold.

52

Wire Frame

The sub-menus won’t be showed directly using drop down from the navigation menus. It will be shown after the page loaded.

53

Wire Frame

The products will be displayed in columns and there will be pagination tools that move and replace the first four products to the next four. The details only will be shown when the audience needs the details.

54

revamp / SOLUTIONThe revamp is made using HTML and it’s able to be runned on mobile browser.

Colour

The colours are navy blue, various grayscale amount and white.

Font

The font used is Lora, a serif font face. There are few style varieties for the font face used.

Layout

The layout is based on four columns and mostly there is no vertical scroll. All is made above the fold.

55

56

Mock Up

57

58

Mock Up

59

60

Mock Up

61

62

Mock Up

63

64

APPENDICEShttp://en.wikipedia.org/wiki/Household_income_in_the_United_States

http://en.wikipedia.org/wiki/Upper_middle_class

http://mindfuckx.deviantart.com/art/Motorola-Aura-101622243

http://osec.deviantart.com/art/CAJONO-Interface-62902828

www.skagen.com

http://www.anthonynolan.org/

http://www.myddfai.com/

http://www.twoto.com/

http://www.arnaudbeelen.be/

http://ideaexhibit.com/

http://www.blissfullyaware.com/

http://www.visualboxsite.com/#

http://www.bydelakerbrygge.no/

http://wallpaper.diq.ru/60_~_Longines_Column-Wheel_Chronograph.htm

http://vectorlogo.blogspot.com/2010/03/facebook-icon-eps.html

http://vectorlogo.blogspot.com/2010/03/twitter-icon.html

http://upload.wikimedia.org/wikipedia/en/6/6e/Sina_Weibo.svg

http://www.farlang.com/profiles/nisarg_sutaria/coreblog/categories/watches/

http://global.rakuten.com/en/store/tokeikan/item/l27454732/

http://montresmecaniques.forumactif.com/t680p45-

les-nouveautes-c-est-ici

http://www.watchswiss.com/index.php/brand/longines/longines-conquest.html

http://www.salera.com.au/watches/traditional-swiss/longines/women-s-popular-choices

http://www.wristwatchreview.com/wp-content/gallery/longines-clous-de-paris/Longines-1.jpg

http://www.watchswiss.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/l/i/lindberg_voyager_1000.jpg

http://thumbnail.image.rakuten.co.jp/@0_mall/tokeikan/cabinet/longines/l27454732.jpg

http://www.cellini.ro/images/set/Ceas-Longines-Conquest-L3-656-4-76-0_752_3.jpg

65

Date post:	12-Mar-2016
Category:	Documents
Upload:	daniel-mulyadi
View:	216 times
Download:	0 times

Watch Website Analysis & Revamping Proposal

Documents