OUGD504 - Design Development: Shopping Pages

Shopping Pages


The shopping pages needed to display the products in a neat and clean layout. This is so that they were easy to look through for the user. I didn't want the design to look too overcrowded at all as this could become uneasy to scroll through and might put people off looking through the website.
The initial designs for the shopping section can be seen in the image below. I had initially designed the top of the shopping section using the names of the underwear that the brand has to offer so that the user could click on the style which they wanted to look at. Once clicked on it would display all of the underwear that the company sells in that style in rows of three shown in the second image.

I showed these designs to Sam (the client) and he liked them however suggested that at the top of the shopping page I could use the illustrated images underneath the names of the styles in order to remind the user of what each style looked like. 

I therefore redesigned this section using the idea which he had given me and the result can be seen in the image below. I showed him this design and we both agreed that this was the best option as once again it made the website more user friendly as it presented them with all the information that they needed to know. 

The other part of the shopping section which I needed to design was when an item of clothing is clicked on. The designs for this page can be seen below. I experimented with slightly different layout and different types of boxes for the buttons. I thought that the best option would be to run with the theme of using the corners rather than a full box which are the designs in the top row. This is because it would therefore keep consistency throughout the whole of the website. I discussed these three designs with Sam and the middle design is the one that we decided. This design showed the most consistency with the other shopping page and also was the easiest to understand. It used the name of the product under the image and made it very clear what the price of the product was and how to add it to your bag if you wanted to.