Urban Leaf
A seamless online shopping experience for the aspiring indoor gardener.
Overview
Urban Leaf is a budding e-commerce company that provides people with the knowledge, confidence, and tools to grow beginner-friendly indoor herb garden kits suited for urban spaces. The company is on a mission to inspire everyone to live healthy and sustainable lifestyles through Urban Leaf's products. My team and I joined the company to assess the user experience of their website's checkout process. We utilized the double-diamond design process to create a mobile-first website redesign to address user pain points and opportunities we uncovered from our user research and interviews. We involved the client in the design process throughout the project, including them on ideation workshops and informing them of our research findings. By establishing open collaboration and communication, we ensured that our solution aligned with both the users' and businesses' needs and that the client would have a thorough understanding of how we arrived at our solution.
ROLE & DURATION
UX Designer, 4 weeks
The Business Challenge
Users are leaving the website without making a purchase.
Urban Leaf spent the past year funneling the majority of promotional efforts and sales into their Amazon presence, resulting in a decreased conversion ratio on their primary website. My team and I were responsible for discovering users' needs, wants, and frustrations in the end-to-end checkout process of the current site, as well as in general e-commerce shopping and purchasing plants. Our goal was to improve the website experience based on our research, with the intent to increase the CRO and grow the company's revenue outside of Amazon.
Homepage
Find products
Cart
Checkout
The Solution
Two-tiered solution: Quick wins & an investment project.
From our findings and research insights, I created a two-tiered solution to accommodate the business' constraints.
​
1. Cost-effective, quick, low impact:
Implement recommendations from our heuristic evaluation & impression tests on current site.
​
2. High effort, high impact:
Design a new website, implementing our user-tested design and incorporating improved heuristics.
Discover & Define
We hypothesized the site lacks clarity and is difficult to navigate.
Before diving into user research, my team and I needed to get familiar with the company and the industry. We studied the indoor garden marketplace and Urban Leaf's top competitors and discovered that the industry is growing significantly, particularly with Millennials. This piece of data paired with data that showed Millennials as the largest age group visiting the site allowed us to scope the focus of our user research to users who were 24-38 years old.
​
We conducted an audit of the current site. We found that while the website was clean and bright in appearance, there were several usability issues littered throughout both desktop and mobile versions. In completing a heuristic evaluation, we concluded that our hypothesis going into user research was that several touchpoints in the customer journey were unclear and could cause friction in the process, causing customers to leave the site before purchasing.
Simplify double header nav so that it's easier to navigate. Website elements should be intuitive and match users' expectations.
Intuitiveness
Tagline should provide a clear idea of the value proposition.
Persuasiveness
Hero image should clearly communicate information on the product.
Persuasiveness
Suggestions to improve heuristics of current site.
Users weren't understanding Urban Leaf's value proposition.
Google Analytics showed that the majority of customers coming to the website were leaving early on in the site — on the homepage and multi-product pages. We kicked off user research by running 15-second impression tests of the homepage to uncover why people were leaving at the start of their experience. This testing revealed that while participants understood the site was related to plants, no one grasped that the site sold indoor herb garden kits. This was an incredibly significant discovery, it spoke volumes as to why users could be leaving early on. The details of a site won't matter if users don't understand the purpose.
“I wasn't entirely sure what the purpose was at first—if it was just information or if a product was being sold.”
- Impression test participant
Key Interview Takeaways
Cater to varied
expertise
Beginners are more intimidated to grow herbs as they are more likely to blame themselves if it doesn't grow. Experienced users understand the trial & error nature of germinating seeds.
Save money
& the world
While most users do purchase from large corporate e-commerce businesses for their ease and affordability, they're unsatisfied when the companies' values don't align with their own.
Help the users' imagination
When online shopping for non-essential items, users value aspirational imagery where they can easily envision themselves enjoying the product.
Annabelle experiences several points of friction throughout her journey.
Develop
Goals in designing a user-centered solution.
Clear
Engaging
Welcoming
Forming and testing divergent concepts.
1. Keeping the users engaged and learning about the product as they shop.
2. Keep the copy clear and conversational.
3. Aspirational and informative visuals.
4. Emphasize beginner-friendliness of product.
Each team member created a divergent concept to solve the problem, based on our user research. My concept focused on:
What Tested Well
Emphasizing the ease of use through friendly visuals
Organizing products by sub-category within larger categories
Walking the customer through the shopping process by choosing by type of kit
Usability Testing
In creating a design solution, I was responsible for creating the homepage. I took into account what had tested well during concept testing to create a solution that would be engaging, clear and welcoming. Once a cohesive design solution was formed, we tested the mid-fidelity prototype with users to determine whether we achieved our goals.
Participants
-
6 users
-
Millennials/Gen Xers
-
City dwellers
-
Interest in indoor gardening
Methodology
-
Lab testing
-
Retroactive probing
-
Concurrent think aloud
Goals
-
Does the solution meet users' expectations?
-
Do users immediately understand the value proposition?
-
What obstacles do users encounter with the new design?
Homepage
6 of 6 users
-
had an accurate first impression of what the site sells and its value proposition.
-
responded positively to the presence of the product finder quiz, especially for beginners.
2 of 6 users
-
need further clarity on the 3 step pictogram section and its significance.
Multi-product page
6 of 6 users
-
navigated the multi-product page and multi-category page quickly and with ease.
5 of 6 users
-
were excited to see that the bottle garden kit involved recycling your own bottles.
Single-product page
5 of 6 users
-
liked having thorough but scannable information about each product.
5 of 6 users
-
were confused by or missed the dropdown menu to add a bottle to their order before the Add to Cart CTA.
-
were excited to see that the bottle garden kit involved recycling your own bottles.
Checkout
5 of 6 users
-
liked the option to go back in the checkout process if necessary.
4 of 6 users
-
believed the checkout process was intuitive and familiar.
The Iterated Design Solution
In creating a converged solution, I was responsible for creating the homepage. I took into account what had tested well during concept testing to create a solution that would be engaging, clear, and welcoming. In testing the first converged design, we found that users responded positively to the homepage and immediately understood the value proposition of Urban Leaf, which was a huge win. Below is the final iterated mobile design, with annotations on what tested well.
Homepage
.png)