14. - 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:
15. A: Product Detail Page
Please open the files : Overall_A.png
View_Detail_A.png
16. 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 likely
to drive user
to share
Compared with “Shopping bag”
icon expresses more efficiently
17. 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.
18. 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.
19.
20.
21. - 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:
28. B: Product Detail Page
Please open the original file : Overall_B.png
View_Detail_B.png
29. Global Navigation extends
when being hovered
Visual consistency with
Add to Bag button
Video on
all perspectives
A slowly moving up-
down image in full
width.
Content is based on
current item.
Trunkshow
Name
More in this trunkshow
Next one in
this trunkshow
will slide into the white
area quickly from left
to right
30. Items the user
would like to have
along with the
dress.
Play video
when the image is
clicked 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.
32. 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
