A responsive e-commerce website for a local Mom and Tot plant shop.
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.
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.
VIEW FINAL PROTOTYPEBefore 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.
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.
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
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
An analysis of five different plant shops provided by the owner was done to recognize any patterns and assess their strengths and weaknesses.
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:
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
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
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.
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.
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.
.png)
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.
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.
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.
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.
Building off of the mid-fidelity wireframe and using the style guide, I built the high-fidelity wireframes.
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:
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.
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
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
VIEW FINAL PROTOTYPEIt 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.
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}
.svg){kind=small}