Perfume Website Product Page

Today I continued with creating the product pages for my website. Here is an image of my product page for the desktop version of my website:

I included all the necessary elements for a conventional product page, for example; price, add to bag button, product description, images of item, quantity button and small amount of information on delivery options.

For the product description, I made up a explanation, describing the scent of the perfume and the products target audience. I also made sure to use simple, clear image so the website user can easily see what is on offer and the appearance details of the product. 

I kept within the theme of my website, as I used the same colours, font styles, similar images and kept the header and footer the same. This is so it is recognisable to the user and so that the website looks tidy and professional.

My product page is quite unconventional, as I have made it look a little bit more like a homepage but with further detailed information on the product,  the option to enter quantity and the button which adds the item to the bag, ready for on the checkout page.

I have started on my mobile version of the product page. So far I have just inserted the image and the add to bag symbol, however a lot of the elements used in the desktop version, needs to be placed in vertically. This is because the mobile is a lot longer in length design wise, and therefore needs some adjusting so I can offer the best possible user experience.

Here is a screenshot of how far I have got:

I will insert an actual image here when I have finished the mobile version. I will also update the image above if I make any more changes to my final website pages.

Here is an updated image of my final product page for mobile:

Here I have added the same image that I used on the desktop version and also added the edits on top to create the fan effect. Although, I cannot actually add the text on top of the image as well, because this would be too small and could not be interpreted for the target audience, therefore representing a bad user experience.