Hygienee
Towards the end of the schoolyear 2020, I was approached by a fellow student at the University of Twente. She asked if I could make a website for her: A webshop. This website was meant to serve as an experimentation ground for her research towards shopping behavior relating to sustainable packaging. The focus of the website was on personal hygiene products. We separated these into 3 distinct categories: Shampoo, Oral Care & Deodorant. The elegance of this website originates from the fact that everything is generated from a database. The website essentially only has 3 pages: The homepage with all the products, the shopping cart page, and the product-specific page with more detailed information about the product.
Homepage
The homepage is quite simple. It simply lists all the products of a specific category. You can switch said category in the banner above, which also provides feedback about which category you're currently in. Every product is then presented in rows of 4. You can access the product-specific page of a product by clicking it or add it to your cart right away by clicking the shopping cart button.
Due to the limited number of products we had available for this experiment, there are no separate pages for each category. Meaning, all products of a category, for example shampoo, are shown on a single page together.
Product page
The product specific page shows more detailed information about the product. It also provides more possible interactions, such as: Clicking the image to enlarge it, switching the packaging type, and adding greater quantities of the same product to the cart. If you choose to change the packaging of a product (this isn't an option for every product), the price and image changes accordingly.
The product specific page also features a "Discover more" window. Here, 3 comparable products are presented. This is not a "frequently brought together" thing since we have no data on that. Rather, it simply takes 3 random products from the same category (Shampoo, Oral Care & Deodorant) that aren't the product you're currently looking at.
Shopping cart
This page shows you the items you currently have in your shopping cart. It shows the quantity, packaging, and total price as well. These items can be interacted with on this page too, meaning you can adjust the quantity and packaging of a product in your shopping cart and the thumbnail image and price will adjust. You can also click the thumbnail image to go to the product specific page of a product. If you click the "Check out"-button, you'll be taken to another page that thanks you for your participation in this experiment.