This e-commerce website is an interactive demo site for a fictional commercial product, the Natural Leader Bag. The purpose of this project was to demonstrate how a commercial product could be sold online; from display to purchase. I created a fictional product, product description, sales images and a website to advertise the product.

The Natural Leader Bag's target audience is confident women. The typeface Mr Dafoe is used for the headings as the bold script carries an elegant strength which represents the product well. It also plays upon the concept of being 'the alpha' - a strong leader, a woman who is not afraid to take charge. All of the models chosen to display the product were picked based on this personality.

Quick navigation is available using the top navigation bar with links to about, buy now and contact. At the top, the landing of the website displays the name of the product and image of the product, a model using it and the slogan: Here to Lead. It follows with a product description and some quotes of reviewers recommending the product. The images below show a quick walkthrough of the main features of the website.

Visit the Natural Leader Website here.



Here, it gives the option to buy the Natural Leader Bag, starting by chosing a colour, which is demostrated by the bag shown in each one available. If you hover over each option, it shows how the bag looks on a person. If you click on the image, you have selected that colour for purchase.






Scrolling down, you can select from three styles: clutch, handbag and shoulder bag. Again, hovering over each image shows it being used by a model. To emphasize the style more than colour in this section the photos in this part are black and white. If you click on one of the styles, a description, price and option to type out how many you'd like of that item appears. If you click on more than one style, all the styles you selected will be displayed. Clicking it again will hide it. Javascript is used to calculate the total of each style as a subtotal, and a final total of all the styles selected for purchase is given, automatically updating as numbers are entered.




Continuing, payment and shipping information fields are there. Because this is just a demo website, the fields take the information but you cannot submit the information as that would require a server to store the information. All of the other functions of the website work though. After this part, a Contact Us form field is there for any customer inquires.