Oh Là Leaves

A responsive e-commerce website for a local Mom and Tot plant shop.

UX/UI Designer


Figma, Illustrator

User Interviews, Competitive Analysis, Prototyping, Wireframing, Visual Design, Usability Testing

Aug 2021 - Sept 2021
(4 Weeks)


Oh Là Leaves is a small plant shop in Fremont, California that opened in May 2021. They are a “Mom and Tot” shop that operates 4 days out of the week. Their mission is to bring the healthiest houseplants to the local community at a reasonable price. Each plant is hand-selected and individually inspected to ensure they’re healthy and pest-free. Because of the owner's busy schedule, she has not had the time to update her site to how she would like it.

What is Oh Là Leaves? 

  • A online plant shop where users can checkout the latest plants and purchase them.
  • Shoppers are able to categorize the plants and find a plant that suits their needs.
  • Users are able to learn more about the care of the plant when viewing the specific plant.
  • Plants can be purchased with pot of choice with a preview image available to see what it would look like.


Update the current website to be more modern and appealing to customers by making it more visually appealing. In addition, address user and stakeholder pain points, such as lack of product information, confusing navigation, and not enough filtering options.


How did I actually get there? 

Understanding the Problem Space

Before moving forward with any design decisions, I conducted a stakeholder interview to better understand the owner's concerns and desires. A competitive analysis was also necessary to understand the industry space and design patterns. To better understand the user's perspective when it comes to purchasing plants online and their current opinions of Oh Là Leaves, I organized user interviews and a comparative analysis.  

Research Goals

Stakeholder Interview and Findings

The owner of Oh Là Leaves was interviewed to understand her background, style, clients, and any concerns regarding the site. She is seeking to improve the visibility of their store through a website redesign with a better user experience in mind.

Interview with the owner and her dog

More personality to the site to reach a larger audience.

Oh Là Leaves opened in the midst of the pandemic and gained a surge of buyers because "more people wanted plants while working from home." Her customers are 100% from the Bay Area and about 80% of them are people working in tech. Oh Là Leaves named was inspired by her time living in France. She wants the site to reflect the elegance of the country, but also be fun and vibrant.

"I used to operate out of my home prior to opening a shop and used Instagram to do all my business. It was amazing to see how many people were buying plants during the pandemic, so I thought this was the best time to open. Hopefully everyone can have one of my plants in their home." - Owner

Bringing plant education to the community.

One of the biggest things the owner of Oh Là Leaves is to educate her customers on the various plants she has and how to take care of them. At the moment, she answers their question either in person or on Instagram, but wants to provide a way for her customers to look on her site.

"I always get questions on how much water or sunlight a plant needs after purchasing. Sometimes I get dms at night after I close shop from customers. On my site, I really want to provide some education on what needs a specific plant has. There are so many other plant sites that do." - Owner

Competitive Analysis

An analysis of five different plant shops provided by the owner was done to recognize any patterns and assess their strengths and weaknesses.

Talking with users and what they had to say

I organized virtual user interviews with 5 participants who have shopped at Oh Là Leaves and other plant stores. Each interview was split into 2 segments

User Interview Findings

The online site is used to see what's available in store and filter them to narrow the search.

Several users stated that for an e-commerce site that sells plants, the product images aren't important because it will look different in person. What's important is to see what plants are offered by the store and be able to filter the options as much as they can. Having an informative nav bar also aids in filtering down the search for the perfect plant for the user.

"I don't really care for so many images when looking at plants because it's not going to look like that in real life. I care to see what the store has. For example, if they have rare plants or cacti." - Male, 30

Production information is needed to increase buying confidence.

All the users expressed that when buying a product it's important for them to know more it. Images don't suffice. How to care for the product, where it's from, how hard it is to raise the plant, and the ability to see what the added customizations look like are key to increasing a buyer's confidence in the product.

"When buying anything really, I want to know more about the product. Images are nice, but they never detail what I need to do to take care of it. I'm not going to buy something without knowing anything about it." - Female, 24

Comparative Usability Testing Findings

By having the users test both the Oh Là Leaves and Plant & Friends site, I was able to gain a deeper insight into why certain design elements work or fail. I had participants add a plant to their cart from both sites and review both the homepage and product page.

Homepage Feedback
Product Page Feedback

Defining the User


To further empathize with the users I was designing for, I took my findings from the user interviews and the demographic of buyers reported by the owner to create a persona that represents a part of our target users. By creating a fictional persona, I was able to personify the needs and wants of a portion of the target users into a single person. Catherine Zhou will be used throughout the entire design process to ensure I'm designing for the users.

User Flow

After creating my persona, I started to think about how my user, Catherine might use the website to complete certain tasks. I created a user flow to understand the possible choices she may have when navigating through the site. We can see how each of these decisions points affects Catherine's journey.

Secondary Stakeholder Interview

At this point, I found it necessary to meet again with the owner to discuss what I have planned and if she has any suggestions or changes she would like to see. She mentioned the need for an Instagram section to tie back to her days selling her plants through it and her stores hours listed somewhere on the site. After our meeting, we decided to add a #ohlaleaves section to the homepage and have more of an informative footer to display her hours of operation.

Low-Fidelity to Mid-Fidelity Wireframes

After researching and organizing flows, I started by sketching low-fidelity wireframes while being mindful of what the owner wants for her site. After having a rough plan of what the site should look like, I turned my sketched wireframes into mid-fidelity ones.

Product Gallery Page
Individual Product Page
Checkout Page
Checkout Page 2
Confirmation Page


Style Guide

The owner likes the vibrant green color and wishes to keep the original logo of the Autography font. The current site uses a serif font, but I decided to change it to a sans-serif font for a more modernized look. I wanted the site to be a modern green that closely resembled the colors of monstera leaves which the owner loves to decorate her physical store with. To contrast all the green, I chose a peachy color that would work well with the green. I also included visual elements of leaves to spice up the site.

UI Kit

Before continuing to the high-fidelity designs, I created a UI kit to help keep all of the UI elements across the design. Based on the wireframes, I created elements that were necessary for the final design. By creating the various elements/components helped to bring life to the design. Also, by having all the elements in one place it was easier to make changes to them later on as I continued with usability testing.

High-Fidelity Wireframes

Building off of the mid-fidelity wireframe and using the style guide, I built the high-fidelity wireframes.

Product Gallery Page
Product Page
Checkout Page
Confirmation Page

User Feedback and Testing

Usability Testing

After creating the high-fidelity design, I wanted to test the design with another round of usability testing. I wanted to test the new adjustments to the design and make sure there aren't any frustrating parts throughout the process. I gathered 6 users to test the prototype through Zoom. I had them perform two tasks: 

  1. You are looking to buy an Easy Care plant that is X-Small, In Stock, and New in store, specifically a Scindapsus Pictus.
  2. You will then review the product page and purchase the plant with a terra planter.

Findings and Iterations

There was a 100% completion rate, all participants were able to successfully buy a plant with the correct values and planter. However, there were changes to be made based on the usability testing. Below, I detail out each one.

Footer is overcrowded and information feels disorganized.

Many of the users during testing mentioned that the footer felt compacted with lots of information and the organization felt off. In order to resolve this, I decreased the font size in some areas and made the icons a bit smaller. I added more whitespace for the logo. I also adjusted the hours for the shop to reduce the amount of space the Opening Hours section takes.

"I don't like how the titles for each section aren't aligned, but also if they were the footer feels very compact with information" - Male, 24

Adding Add-ons to Shopping Bag should be separated.

When working through the site, one of the tasks is to add a plant with a planter. Users were confused when they came to the shopping bag to have the plant and planter be put together as one item. The thought that arose was "What happens when a user wants to remove the planter and just get the plant?" For this reason in order to avoid confusion and these types of situations, I separated the two as two items and had the picture depict the single item.

"I like that I am able to add a planter as an additional item, however, I was expecting them to be separated. I felt that because what happens if I decide to remove the add-on? Would I have to remove the entire plant?" - Female, 28

Learning and Takeaways

It was a great learning experience to work with a client. I learned how to balance user needs with the business goals of the client in order to design a product that satisfies both. With more time, I would've loved to update more of the mobile version and build out a section that depicts where in a room a plant should be depending on its genus and its needs. It was an amazing feeling to see that the client loved the final design and wanted to use it for her site in the future. I really appreciate projects like this because we have the opportunity to help those in our community and create experiences that better the business.

What went well?

  1. Working with a stakeholder and bringing her desires into fruition.
  2. Balancing the stakeholder's needs with the users'.
  3. Being able to make the site visually appealing as the physical store.

Areas for improvements

  1. More of the mobile screens for the responsive side of the design.
  2. More plant education for the plant (i.e. watering guide and room placement).
  3. Include a way for users to learn which plants need to be placed in the room.

What is the plan moving forward?

  1. More usability testing and feedback for Oh Là Leaves.
  2. Update the responsive frames and include more features.
  3. Work on the Checkout pages using interactive components to make the process more seamless.