Aesthetic Redesign of the Product Page

Donna Stam
Redesigning United Wardrobe
3 min readMar 18, 2015

Using the results from the three different tests, we made a functional redesign of the webpage. After this we finally got to the aesthetic redesign of the webpage. Below you can find the original product page and our aesthetic redesign of the product page.

Original Product Page
Aesthetic Redesign of the Product Page

The product page is the page that pops up when the user selects a specific product. We thought that this page did not jump out enough, so we blurred the background. This way the background does not interfere with the product page that much anymore.

Secondly the product page was too crowded with different coloured blocks with information about the product. The organization of this information is not clear and the various bright colours do not make the webpage any clearer. Lastly, the seller of the specific item can personalize the top bar. This neither helps in the provision of a clear product page, since more and brighter colours or pictures are often added here. All these things distract the attention from the product and necessary information to less important attributes of the page.

With the functional redesign as a basis we organized the different features of the product page again. We placed the product in the middle of the page, with no other information above or below. In this middle column there is place for one bigger picture (the selected one) and four smaller pictures of the product below the bigger picture. It would be best if the seller is encouraged to place at least one overview picture, one picture in which the clothing is worn and one detailed picture.

On the left side of the product the picture of the seller is presented. Beneath this picture there is space for a conversation between the seller and possible buyers. On the right side of the product picture the information about the product is clearly presented (product, size, price and condition). Below this information is the ‘Buy Now’-button, since this button should be close to the price. Below this button options to share the product are presented. In the bottom right corner information about how often this product is viewed or saved is presented.

We think the division in three clear columns makes this product page more readable, since there is a clear division between what information is presented in which column.

Besides organizing the page again we also changed the colours of the product page. As said on the original page a lot of information is presented in various coloured blogs and pictures. First of all we made the whole background of the product page grey and eliminated the personalized picture of the seller from the top of the page. Furthermore we chose for only one obvious colour for the ‘Buy Now’-button and greyish colours for the other text.

--

--