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

Immediate info on their money back guarantee policy - helping the users to trust the purchase and the company.

Above the scroll has clear, simple copy that gives the readers info on the company and product.

The stakeholders were curious about my concept of a product finder quiz. We tested the idea with users, and it was met with an overwhelmingly positive response. 

Engaging copy and visuals to quickly explain to the user the process.

Reflection

We delivered our design solution and recommendations to the client, who have implemented changes to the homepage per my redesign (Urban Leaf). The company's analytics shows that with the updated design we were able to increase the site's conversion ratio by 300%. Although we produced a successful redesign, in hindsight and with more time, it could have been valuable to do usability tests of the original site, both desktop and mobile, in addition to impression testing and user interviews to further uncover user pain points. Despite the tight timeline, we were able to create a tested significantly improved user experience.

Client Testimonial

"I had the pleasure of working with Sabrina and her team as part of a Flatiron UX Design Sprint, aimed at improving the customer experience and conversion ratio of our eCommerce website. Over the course of the 4-week project, Sabrina uncovered valuable new insights about our customer base which she then used to rapidly prototype, test and validate a number of exciting new ideas for our website. Our entire founding team was delighted by the creativity of the ideas Sabrina proposed, the quality of her work, and the professional manner in which she conducted this project. I would welcome an opportunity to work with Sabrina again in the future."

Nathan Littlewood, co-founder & CEO of Urban Leaf 

Copyright © 2020 by Sabrina Zain.

Get in touch - sbmzain @ gmail dot com

LinkedIn.png