I wanted to make sure that I was familiar with the process of building a page selling a product online, since eCommerce is such a huge part of what people do on the internet. I needed a plant stand, so I decided to make up a store and make a page for this one.

First, I did some research looking at the layouts and features of different product pages. I looked at what worked and made some notes on what needed to be on the page. I decided that if I was making up a store that sold stuff for plants, and people generally garden because they enjoy it or it brings peace to them in some way, the overall aesthetic I was going for was going to be soothing and uplifting for the user. Lots of monochromatic greens in the color palette, clean lines and rounded edges, etc. Then I picked a color palette for the store, made up a name, chose a font, and made a couple wireframes for mobile and larger screens on Figma.

The finished site has basic JS in place for the main images, accessible hamburger menu, and the accordion-style "details" and "trial and return policy" sections. It is responsive to screen size and has some fun little hover effects on the "add cart" button and the h1 link. In the future, I could see adding a carousel for the review section at large screen sizes and fixing the images in place so they aren't pulled down when you open those accordion sections. I kind of liked that, but a user might find it jarring.

Edit 12/18/22: Working on making the accordion menu accessible with the help of this codepen from Christina Deemer. Not yet as responsive as it needs to be, but you can tab through the whole page now.