GreenHouse is a website designed to introduce users to indoor plant cultivation through a calm, organic browsing experience. Inspired by the growing popularity of houseplants during the pandemic, each section focuses on a specific houseplant, using smooth scrolling instead of constant clicking to create a fluid interaction. Overall, GreenHouse aims to provide an intuitive and visually soothing way for beginners to learn and care for houseplants.

Our main design focus was a highly interactive and responsive experience based off our user’s cursor movements. We decided to create our own 3D plant models to help enhance the overall experience of our website.

As users scroll, text gradually appears alongside 3D plant models that move and turn in sync with the cursor, creating an engaging and fluid experience. Hovering over models triggers animations, and transparent information boxes display icons representing each plant’s sunlight, water needs, colors, and special features. This interactive design allows users to explore and learn about plants in a visually dynamic and intuitive way.

GreenHouse was built using HTML for content structure and a CSS stylesheet for organization and design.
JavaScript library Animate On Scroll (AOS) was used to enhance interactivity, which enables plant images to fade in as users scroll.

The main focus during this stage was to ensure the technical aspects of our website was running smoothly. We implemented the 3D models and tested the interactive elements of the user's cursor while scrolling.

Changes to implementing the website's design and navigation, the team explored ways to make the layout more visually appealing, such as making models respond to the cursor when hovered over. We also planned to simplify the design by using a single background color and removing the scrolling information box. Additionally, we implemented  the project's logo, icons, and text box designs for the final prototype.

This project was a valuable experience that helped me better understand the design process from research to prototyping. Although some traditional and standard UX design methods were not used, working with a team allowed me to understand different perspectives on how we can improve our design decisions through collaboration and feedback. Creating design solutions to be more user-centered focused has shown me the importance of having a clear communicated design process with continuous iterations. Going forward with future projects, I would focus on conducting more usability testing and continue to refine the design towards the user to further improve the overall user experience.