Prior to starting to design and develop this website in the Shopify platform, I completed a thorough audit of the old website and found specific areas that could be improved. First, the old website included a lot of content across the website that needed to be ordered in a way that was both informative and easy to use by the user. Second, the website needed to be made more personable, reflecting the fact that Greenes is a family company that serves families and their homes around the world. Knowing these two goals, I formed my new landing page design to start the project, displayed below.

The new landing page serves as a bearer of information and call-to-actions for the user when they first arrive on the website. In 30 seconds, the user gets a sense of who Greenes is and what the company does on a daily basis. From this, the user is directed to visit other areas on the website, including to explore products. The landing page is very clean and structured, using white space to the advantage of the design to direct users to specific areas. Below the above photo is more sidebar content sections and a product overview section that is being completed by the company's management.

The goal of this project was to create a template for Greenes to use and update in the future. All other pages besides this one (above) are merely content pages with headers and paragraphs, explaining things like contact information, shipping and receiving, and return policies. The product-type page above, and the individual product pages, follow a grid structure with pictures that users can click on to be taken to the page.

Individual product pages are designed differently than the old website. Hover-enlarging images are employed, with a easy-to-read breakdown of information on the right. A customer review widget was also implemented. For those products that can be bought at stores like The Home Depot and Lowes, links were added next to "Buy At" that brings users to those respective pages. All of this was accomplished through revising the back-end code, specifically CSS scripts.