Vector-1
iPhone-12-Mockup

Houseplanted

Project Background

What: Houseplanted is a brick-and-mortar family-owned plant store. They want to design a website for their customers to be able to order plants for delivery and receive plant care advice. I designed a website to address these needs. 

Houseplanted's Business Objective: To build out a platform that is manageable for Houseplanted, and intuitive for their users to purchase plants and trust they will receive support to keep their plants alive

User Problem: People don't know how to shop for plants

Design Solution: Search wizard function that filters criteria based on city, location of the plant, amount of sunlight, pet friendly

User Problem: People wish they knew how to take care of their plants better

Design Solution: Ruby: A real-life person you can connect with via in-home visits or video conference 

User Problem: People are skeptical about having plants delivered

Design Solution: Video demonstrating how each plant is packaged for delivery 

Assignment: Create a responsive website for an e-commerce platform. Instead of designing for the suggested project brief for a clothing store, I chose to create an e-commerce site for a fictional plant shop.

Tools Used: Figma, Whimsical, Maze.co

Areas of Highlight in this Case Study 

Interviews 

Branding  

Responsive design 

Prototype

Why Plants?

I knew people bought houseplants, but I never really thought too much beyond this. I figured people bought them because they add value to their environment and it provided some type of hobby. I had never considered the pain points surrounding being a plant owner and felt this would provide an interesting topic to design for. 

plants

How About We See What Problems People That Buy Houseplants Face? 

Research Goals 

To learn why people buy plants

To understand if people are hesitant to buy plants online and why

To determine their online shopping pain points and successes


Market Research 

 

Industry Environment 
Plant sales have soared due to Covid in both brick-and-mortar and online platforms. 

Only 20% of businesses had online shopping prior to Covid, and since, 45% have
implemented (out of a study of 300 stores).


 

 

 

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Competitors 

Houseplanted's two main competitors are bloomscape and The Sill. They are both trendy (the cool kids of the online plant stores) with great UI design. Both are also popular because they deliver and offer great plant maintenance advice.

logos

f

Interviews

Luckily for me as a researcher in this study, owning plants does not fall into a niche demographic. So many people buy plants, and just by owning a plant, you can provide insight. Finding people to interview was not difficult. 

From my interviews, I deduced there were three main problems when it came to buying plants


1. People didn’t know how to buy plants that were meant for their living spaces
2. People wished they had someone to reach out to regularly to get advice on their plants
3. People are nervous to have plants delivered to them 
     

Quotes From Interview Participants 

"I don't understand why my plants died when I moved from Seattle to Denver."

   "It's really upsetting when a plant dies after caring for it for 10 years."

User Persona

After completing the interviews, the person most likely to shop at Houseplanted is Paige, a 30something, city dweller. She doesn't have a car, which makes it difficult for buying plants. She yearns for more nature and appreciates how adding plants to your living environment can mitigate her city atmosphere. 

Paige has difficulty knowing which plants will survive in her apartment based off the amount of light the plants require, and also would not like to spend too much money on this hobby. She does have some disposable income allocated to this however. 

Information Architecture  

I then built out a site map to include all the categories and pages of Houseplanted's e-commerce site, as well and a user and task flow to demonstrate the process of a user navigating the site and placing an order for a plant. 

HOUSEPLANTED-FLOWS@2x-1-1

Sketching

I sketched out landing page concepts considering the solutions to the problems.  

homepagemockthree-1
homepagemockone-1
homepagemocktwo

Lofi Wireframe Mockups with UX Solutions to the Three Main Problems 

 User Problem

 User does know which plant 

 to buy

 

Design Solution

Search wizard function (highlighted section). This is the first element the person sees. 

Filters criteria based on: Location/Price/Sunlight/Pet Friendly/Placement of plant

Why this solution?

People's biggest complaint with buying plants was not knowing which plant to buy based off the amount of sunlight they receive in their living environments. Price was also a big factor in choosing plants. With this search wizard function, the user can immediately isolate the plants that align with their needs and wants. 

Wizardhighlightpink

 

User Problem

The user feels lost on how to maintain plants

 

Design Solution

Ruby (highlighted section).  A real person that you can book advice sessions with for home visits or video chat.

Why this solution?  

Another struggle the user faced was not understanding why their plants would die when they would take care of them accordingly. By being able to connect with Ruby, the plant expert, whether with a home visit or video chat, they will feel more assured in their choices on plant maintenance. 

Rubyhighlightpink

User Problem

User is concerned about buying plants for

delivery

 

Design Solution

Video showing how specific plant is packaged for delivery (highlighted section).

Why this solution? 

Understandably, the user is concerned about how well the plant would hold up in the delivery process. Houseplanted has a video demonstrating how each individual plant is packed for delivery to help the buyer feel more at ease in purchasing decisions. 

 

plantdeliveryvideohighlight

Branding

I am by far not a graphic designer. Furthest from it. However, I am proud of the

UI side of this project, especially considering I do not come from an artistic background, so

wanted to include this aspect of the project in this case study. 

 

Logo Concept 

LOGOSKETCHES

Logo sketches. Thought of connection with plants and houses. Wanted geometric and modern. 

HPLOGOS-removebg-preview

Numbered and sent over to friends

for their three favorites.

#1 was in everyone's top three. 

UI Kit and Style Tile 

Usability Testing Plan 

Objectives

Due to time constraints, I was able to test one user flow:

The wizard function to find a plant that fits all their specifications and needs.

 

Subject of the test: What am I testing and what state is it in?

Testing a low functioning prototype via high fidelity wireframes with Maze.co.

 

Hypothesis


The word “wizard” is going to confuse people. Does it need a different name?

Usability  Testing Plan 

Objectives

Due to time constraints, I was able to test one user flow:

The wizard function to find a plant that fits all their specifications and needs.

 

Subject of the test: What am I testing and what state is it in?

Testing a low functioning prototype via high fidelity wireframes with Maze.co.

 

Hypothesis


The word “Wizard” is going to confuse people. Does it need a different name?

What didn't go so well... 

I used the prototyping platform Maze.co for my users to test the complete user flow of buying a plant: Utilize the wizard function, choose a plant, add to cart, login, and check out. 

Most of my testers were not familiar with prototyping. As a result, the majority were confused. They were expecting the prototype to be higher functioning, and were frustrated by its limited functionality.  They also had a difficult time understanding how to use Maze's platform as first-time users. As the person administering the test, there was a fine line of giving too much information to influence the true results of testing the prototype, while managing users' expectations

Overall Findings 

Luckily, once people understood what the task was, they found the flow understandable and were able to fully complete the tasks given to them. 

The word "wizard" was confusing for people, which confirmed my hypothesis. And, there were general comments that some of the sizings of the elements could be better. 

Iterations

People were confused by the word "wizard", so I changed to "SEARCH FILTER" (highlighted section).

 

I redesigned the section below the header and placed the other categories below to isolate the search filter even further so it's even more apparent to the user when landing on the site (highlighted section).

Slice-2

Responsive Homepages 

Homepage-Desktop

Macbook Pro 

d

Homepage-Mini

iPad Mini 

Designer

Homepage-Phone

iPhone 8

iPhone 

Post-Mortem

Overall, this project was very rewarding. As a student, this was a hand-holding project where every step of the way was given to us with assignments. This method hopefully is a good guide to prepare us to be able to follow the UX design process on our own for the next projects.

For all the time and effort put into the project, it would have been nice to test the other hypothesized solutions to the user problems, but am also looking forward to working on a new project.

As far as testing, I wish I had tested a more interactive prototype. Had the prototype been more interactive, the usability testing would have gone smoother. People not understanding how to use Maze.co was a really big hindrance for understanding if people really knew how to use the site. It was a learning experience seeing how people reacted to attempting to follow Maze.co having never used the platform, and are not in the world of UX.  

From a UI standpoint, I definitely would not have capitalized everything. WE DON'T NEED THE APP TO BE YELLING AT PEOPLE. (Rookie mistake.) 

I appreciate the fact that I have started using and learning new design tools, and am happy to be fostering my creative side. It's very refreshing to be involved in projects that are entirely different than my paid job.