Moda Operandi Product Detail Page UX Redesign

07-2013

By Xiaoye Lin

These are not working well

Heavy Texts

Confusing: Am I now on Argentinean store?

Better to have country names writtenin their own language

Duplicated InfoNavigation is unclear

Zoom In responds slowlyor even does not respond

Clickable areas makes user move too much

Generally, small types are more legibility innon-Sans-serif, especiallyon HD screens

Information may be out of window by extending vertically

Related info arenot together

Error report asks user to do additional operations.It does not tell the users where to find out “size”.

Back to Top button might be missing in this case

The information occupies too much spaces and is little helpful

- Highlight the most relevant product details clearly and prominently

-Best present the product photography in a way that is enticing and relevant

-Allow user to explore.

-Contextualize the product.

Close to industry standards and leverage designs produced by other sites that customers would be accustomed to.

A:

A: Product Detail PagePlease open the files : Overall_A.png

View_Detail_A.png

Helps user to discovery

Indicates the user is currently in US store

From “Home” makes the user understand where he comes and is.

Keeps information in a certain range

Frequently clicked areas’d better to be close to each other and in the middle of the page for catching eyes.

perspectives views

Helpful information

This info is more cared by those users who are adding it into bag

Related info is together

Visual info is likelyto drive userto share

Compared with “Shopping bag”icon expresses more efficiently

Regard to a small cluster, image is better than texts.

Speaks the customer’s language They probably do want to know the name of the collection

Keep that in middle with semi-transparent background

Avoid of unnecessary info, “more” is enough.

When the photography is being hovered, its details will show up and updates based on mouse’s position in real time.

Showing the cursor’s position, which allows the user to navigate easily.

- Highlight the most relevant product details clearly and prominently

-Best present the product photography in a way that is enticing and relevant

-Allow user to explore.

-Contextualize the product.

A: New and innovative approach to the Product Detail Pages

B:

Competitive Audit

Interactive full screen image

Zoom in by sliding

Product displayLV US store

See it in action

Zoom in

Show theactual colors

Product displayShopbop

ProductContextualizationGUCCI official store

Related-item list

Indicating the opportunity of exploration

Recommendationsgo first

Flattened infofor easily comparison

Product displayApple US store

Help user

ProductContextualizationMC official store

Suggestions from the user’s perspective

Suggestions from the seller’s perspective

B: Product Detail PagePlease open the original file : Overall_B.png

View_Detail_B.png

Global Navigation extendswhen being hovered

Visual consistency withAdd to Bag button

Video onall perspectives

A slowly moving up-down image in full width.Content is based on current item.

Trunkshow Name

More in this trunkshow

Next one inthis trunkshowwill slide into the white area quickly from leftto right

Items the user would like to have along with the dress.

Play video when the image isclicked or the play button is clicked

Customer help just goes after item

Moves with cursor when cursor is on the navigation area, and then the corresponding content show up. NO click is required.

View Detail when mouse is hovering on the dress

Overall:Try to have important information on first screen. Most elements are dynamic, title bar image moves and changes based on current content. Item will slide in smoothly by clicking the arrow. Product/detail/shipping/fit respond to the cursor’s position when cursor is on them.

Thumbnail with purchase info is disabled because for such expensive item, customer may prefer to take a close look on a detail page and then add it to bag.

Decreasing clicking is one of the good ways to provide more info and drive new users to explore.

Information hierarchy is being layered out by different colors:Item: (Deep color)Item video, title, price, purchase and shopping bag

Contextualizition and exploration: (Light colors)Purchase-related tips, help, recommendations, navigation