As someone who has a love for both plants and website design on Figma, I was happy to create a plant website prototype. This website, named Sage + Sprouts, takes a unique twist on the typical online plant purchasing website. Sage + Sprouts' website includes a individualized and personalized plant quiz. This quiz takes into consideration how often you are home, any pets you have, and even how green your thumb is! Check out the working website here.
Home Page
I wanted this website to have a fun and outgoing personality to go along with all the fun plants! The homepage contains all of the information you'd expect to see in any homepage. It links to all of the different pages you can explore, as well as the personalized Plant Quiz.
Merchandise
For the merchandise pages, I wanted to include all of the necessary information you'd need before buying a plant online. This includes any tips and tricks to keep your specific plant alive. This part required a lot of research so no details would be missed. All plants have a pop-up when added to the cart.
Shopping Cart
This is how the hypothetical shopping cart would look like if this website were to be real. Since Figma doesn't have an option to type in boxes, I replicated that feeling with the blinking line to emulate the typing motion. You can also add plants to the shopping cart, and change the amount.
Personalized Quiz
This Personalized Quiz is the most interesting part of the website. I wanted the website to be very user friendly, especially for those who had never bought a plant online before. Buying plants for the first time can be overwhelming, so I created this quiz to make that process easy, and individualized to each person who takes it.
Coding the Quiz
Coding the Personalized Quiz was challenging. Figma doesn't have a straight forward way of completing this task. I was able to create a quiz that was able to remember your last answer, and base your "perfect plant" on all of your answers, like a real quiz would! This quiz makes it easy for anyone to find a plant that is perfect for them.
Prototype 1
I spent the majority of this prototype section creating the layout design for the Home Page. This part determined the design of the entire website. I chose to use a blue-green instead of a traditional green seen in every other plant shop, for individuality. For my secondary color, I chose a rusty orange to emulate the color of a terracotta pot.
Prototype 2
For Prototype 2, I continued fleshing out my design. I also added lots of plants for online browsing. All plants are put into a few sections (such as low light, high maintenance, good for pets, etc) for easy user experience.
Prototype 3
This is the part of the project that I started coding the website to function like an actual website. The hardest part of this prototype was figuring out how to get the quiz to function like an actual quiz, and make it remember your previous answers. If you take the quiz now, you will get a different answer depending on your answers. I was really proud of this part.
Prototype 4
I took the final steps to finish up the Sage + Sprouts website. I tested all of the buttons and bugs to make sure everything worked properly, and made some last minute changes to the quiz and checkout page.