Plant Ecommerce Site

Website Design

Project Overview

As a UX/UI Design intern at Qamera, I was tasked with creating an app, website or other outward facing deliverable either using Webflow to publish to the web, or Figma to prototype the full functionality of the app idea. I decided to design an ecommerce website to help plant parents like myself - who just can't help but accidentally kill all of their plants. This included concept, research, design, and build - plus live user testing to get feedback on the project. My process was broken down into these steps: empathy -> ideate -> design -> build -> test

My Contributions

I was responsible for managing every step of this process, but I did get valuable insight and tips from my mentor and colleagues during video conferences. I conducted user research and put together a user persona, wireframes, low fidelity designs, prototypes, high fidelity designs, and finally usability testing. My finalized plant ecommerce website design was also included in their broader ongoing project, featured on Qamera's website: Qamera Design Lab, which is showcased to clients to demonstrate examples of work made by the team, and visualize how their web/app ideas could come to life.
I also conducted market research and findings from other Qamera projects, and applied what I learned to my design process as well.

Empathy

This was a fictional company to the real problem of finding a plant suitable for a user's home environment, time, and resources. I, like many others, have struggled with finding the right kind of plant for me, and being able to keep that plant alive for more than a week. However, because I was only employed as an intern at Qamera for 3 months, I had to use my limited time wisely. Therefore, I didn't have the resources to research real users, so I used online tools such as ChatGPT to act as a theoretical user. I conducted research of who this person was (background, job, age), what their goal is, and what barriers they face in achieving that goal. Finally, I created the user persona below with the information given to me, which helped me in building a website to fulfill user's needs.

Ideate

Using the user persona example I put together, I created this site map to visualize what my website needed to include. There are three main pages, as highlighted with the red dots: home page; plant quiz; shop. I designed all three of those pages to be responsive in Figma.

Design

Next, I created a low fidelity sketch of what the landing page should look like. I focused on creating a visually appealing layout through harmony and balance in shapes and values, and how this would lead the user to naturally navigate through the page. I made sure to incorporate contrast and size hierarchy in my design process to draw the user's attention to the most important elements on the page. I also labeled more specifically what should be included in the margin to the right. I also put together a mood and inspiration board, looked at competing companies and brand websites, and curated a color palette for my website design.

Build

I followed my low fidelity model and created high fidelity designs of the hero section, landing page, navigation bar, and footer, as well as the plant quiz pages, and the quiz results page that takes the user directly to their recommended plant to shop.

Test