top of page
leafygems-header2.jpg
Overview

The Problem: Niche Inventory, No Trust

The client, a new Vancouver-based boutique specializing in highly niche and delicate products (rare exotic plants and young tissue cultures), lacked a trusted, scalable, and responsive 

e-commerce platform capable of simplifying a complex inventory for a nation-wide customer base. They needed to build trust with their specific customer base.

The Goal: Trust-Driven, Responsive E-Commerce

The goal was to design and implement a clean and cozy e-commerce experience for Leafy Gems that establishes brand trust, ensures 100% responsiveness across devices, and clearly structures product categorization (plants vs. tissue cultures) to drive reliable sales conversions.

I designed and developed a comprehensive, responsive e-commerce website for Leafy Gems, a boutique plant seller based in Vancouver, Canada, specializing in rare exotic plants and tissue cultures. The primary design goal was to create a digital experience that felt clean, cozy, and trustworthy, accurately reflecting the brand's quality focus. The resulting site structure and visual design prioritize product elegance and user clarity, ensuring a seamless and reliable purchasing journey for both desktop and mobile users interested in specialized botanical items.

Leafy Gems (E-Commerce Shop)

Responsive Website
(Shopify E-Commerce Shop)
Lead UX/UI Designer (Freelance)

Market & User Research, Wire Framing, Prototyping,

High Fidelity Designs

Paper & Pen, Figma, Photoshop, Gemini Nano Banana, Google Docs

Disclaimer: The Leafy Gems Webshop is currently being built and tested. It will presumably be online starting February 2026. The link to the online shop will be added once published.

empathize.png

Empathize

Define

ideate.png

Ideate

prototype.png

Prototype

test.png

Test

Understanding the Canadian Rare Plant Market

The target audience - collectors of rare exotic plants - is highly engaged, but primarily connects and exchanges information through informal, tightly-knit communities like niche Facebook groups, Discord servers, and local plant trade forums. For example the Facebook Group "PLANT AUCTIONS AND SALES CANADA" with 17k members, that is strictly regulated. In these spaces, transactions involving high-value, often delicate items like rare cuttings and tissue cultures are heavily reliant on personal reputation and community trust. This insight was foundational, emphasizing that the Leafy Gems website needed to immediately establish credibility through a clean, transparent, and trustworthy e-commerce design to convert customers who are accustomed to relying on personal referrals.

This section offers an in-depth look at the some of the leading Canadian competitors in the rare plant market, detailing their core strengths and outlining the opportunities that inform Leafy Gems' design and logistical strategy to become a successful e-commerce shop.

​

It shows there is an opportunity in local pickup, offering care guides and pictures of each actual individual plant, allowing the user to see the specific plant they are purchasing.

competitor-leafygems.jpg
Research

What Plant Enthusiast Appreciate

To validate and understand the specific needs of the rare plant collecting community, the initial user research for Leafy Gems was conducted through a combination of competitive analysis of existing Canadian e-commerce platforms and research within dedicated online groups and forums. This two-pronged approach allowed me to not only identify the operational strengths and weaknesses of direct competitors but also to gather qualitative data by observing user discussions, common complaints, and unfulfilled desires. Ultimately, this ensured that the identified pain points - such as the demand for visual trust and the complexity of local logistics - were accurately reflective of real user experiences. 

 

One significant finding from my user research is that while several competitors offer strong services, users consistently prioritize visual trust and prefer sites that guarantee the exact plant shown in the photo will be the one they receive. They view this commitment as non-negotiable for high-value purchases.

 

For those in the Vancouver area, there is a strong desire to utilize local pickup whenever possible, viewing it as the safest, most economical, and least stressful logistical option.

 

Lastly, irrespective of the item's cost, buyers emphasize the paramount importance of receiving detailed, post-purchase care and acclimation guidance - a crucial factor in their buying decision, as it directly influences their confidence in keeping their rare new plant happy and healthy.

Pain Points
Shipping Damage Fear

High-value plants are sensitive, and users worry constantly about inadequate packaging, heat/cold damage, or prolonged transit times causing stress or death to the plant.

Intimidating Acclimation

Enthusiasts are highly intimidated by the process of acclimating challenging plants like Tissue Cultures, often finding current instructions too technical or scattered across forums.

Affordability Anxiety

Aspiring collectors struggle to find affordable entry points to rare genetics, making the jump to high-value plants feel risky without proper guidance.

Generic Photography

Websites use stock or generic photos for rare, high-value specimens, making it impossible to assess the plant's variegation, health, or size before buying.

Looking at Different Types of Buyers

Based on the project's focus, two distinct personas were created to guide the design of Leafy Gems: Liam, The Established Collector, and Aanya, The Aspiring Enthusiast. Liam, a high-earning Vancouver local, requires visual authenticity (WYSIWYG) for his high-value purchases and a seamless, scheduled local pickup process. Conversely, Aanya, a budget-conscious enthusiast located outside Vancouver, seeks detailed educational guidance, especially for complex items like Tissue Cultures , and transparent national shipping protocols. These personas ensure that every design solution addresses the specific needs of both the core, local collector market and the wider, knowledge-seeking national audience.

Persona-LG-Aanya.jpg
New to Tissue Culture

Sarah loves watching plant tutorials and is moving beyond common tropicals, aiming for high-end variegated plants. She sees Tissue Culture as an affordable way to access rare genetics, but the acclimation process fills her with anxiety. She invests time reading every care guide available, trusting sellers who act as transparent educators and provide the critical, detailed information she needs to prevent plant loss.

Persona-LG-Liam.jpg
The Experienced Collector

Liam maintains a precise, climate-controlled plant cabinet for his rare Alocasias and Monsteras, viewing them as high-value investments. His purchasing decisions hinge entirely on visual trust. He must verify the exact variegation and health before buying. He actively avoids shipping because he views transit as an unnecessary risk to his valuable specimens, strongly preferring the speed and control of local pickup in Vancouver.

Translating into Design

The user findings regarding trust, logistics, and guidance translated directly into three core design goals for Leafy Gems: Authenticity, Clarity, and Empowerment.

​

The design approach for Leafy Gems leverages the efficiency of the Shopify Horizon template to ensure a clean, mobile-responsive foundation and effortless implementation, allowing me to focus specialized attention on the user experience.

 

To achieve the required emotional connection for high-value collecting, the site rejects traditional sterile white designs in favour of a luxurious and cozy aesthetic: a primary palette of dark green is used to emulate a deep, exotic jungle, punctuated by pink accents to highlight the vibrant, rare variegation of the plants. This colour combination is paired with a clear, logical structure that guides the user through the entire process, from simple browsing and filtering to a transparent checkout flow.

 

This is reinforced by dedicated information pages covering shipping, local pickup logistics, and contact details to solidify user trust.

Authenticity: Establish Visual Trust

Guaranteeing WYSIWYG (What You See Is What You Get) photography for all high-value, unique rare plants to eliminate buyer anxiety and build confidence.

Clarity: Streamline Logistics

Creating a seamless, scheduled local pickup process for Vancouver collectors integrated transparently with safe, Canada-wide shipping protocols.

Empowerment: Ensure Customer Success

Providing detailed, plant-specific care and acclimation guides immediately post-purchase to support users like Aanya and protect their investment.

Design

Design & Prototype

Defining the Structure

The site structure for Leafy Gems is designed to be clear, simple, and intuitive, adhering to a standard e-commerce architecture to ensure ease of navigation. The flow is logically organized into three main sections stemming from the Homepage: Products, Cart, and Other.

 

The Products branch facilitates browsing through collections, categories (Alocasias, Monsteras, Tissue Cultures), and individual product details.

 

The Cart branch provides a frictionless purchasing path from reviewing cart contents through the checkout process to the order confirmation.

 

Finally, the Other section groups essential trust-building and administrative pages, including the crucial Shipping & Pickup page, Contact information, and legal documentation. This structure minimizes clicks and ensures users can easily find both products and key logistical information.

sitemap-leafygems.png

Testing the Flow with Low Fidelity

To translate the defined strategy into a functional interface, the design process began by creating simple mockups for the core screens in Figma. These initial wireframes were structured using the Shopify Horizon theme as a foundation. This ensured the inherent responsiveness of the design, with dedicated mockups being created for desktop, tablet, and mobile screens.

​

To ensure immediate familiarity and reduce cognitive load for the user, the wireframes were intentionally designed to follow a common, recognizable e-commerce shop experience. By adhering to established patterns, such as having a prominent global navigation, a standard product filtering system, and a three-step checkout process, the design allows users to easily navigate the site and find products without needing to learn a new interface. This focuses their attention instead on the high-value content, like the WYSIWYG images and the logistical choices.

Leafy Gems - Homepage.jpg
iPad Pro 11_ - Homepage.jpg
iPhone 16 - Homepage.jpg

Wireframe Test Findings

During early user testing conducted with the low-fidelity prototypes, a crucial piece of feedback emerged: users felt a lack of immediate connection and trust with the brand. Specifically, they were missing a dedicated section or page explaining who Leafy Gems is, its mission, and the passion behind the rare plant selection. This indicated a need to humanize the brand, validating our strategy to ensure that the site doesn't just look luxurious, but also feels trustworthy and cozy, reinforcing that a real, knowledgeable seller is behind the specialized inventory.

​

They were also wondering what the process of choosing shipping or pickup will look like and how the pickup will be arranged.

Who is Leafy Gems

Users felt a lack of trust as they couldn't find a dedicated section explaining who Leafy Gems is and what they stand for

Checkout: Shipping or Pickup

Users wanted to know what the process of picking either shipping or pickup would look like

Creating the World of Leafy Gems

It begins with a familiar, clean foundation built on the Shopify Horizon template to ensure user familiarity and responsiveness. The visual experience is anchored by a sophisticated palette of dark green and pink accents, creating a cozy, exotic, and high-end "jungle" feel. This deliberate choice supports the site's primary goals:

 

Using high-contrast design to emphasize visual authenticity (WYSIWYG) and structuring the flow clearly to manage the complexities of scheduled local pickup and transparent national shipping.

HighFidelity-Leafy Gems -Home.jpg

Color

The color palette is built on a foundation of Neutrals (Black, various Greys, and White), anchored by the Base colors of Green (dark) (#092C21) and Green (light) (#3A564D) to evoke a deep, cozy jungle environment. These greens are accented by two shades of Pink (#E78FAC and #F0BBCC), which serve to highlight key interactive elements and accentuate the vibrant variegation of the rare plants.

Screenshot 2025-11-18 at 19.16.43.png

Typography

For typography, the design uses the elegant serif typeface Playfair for headers and titles (Accent), lending a sophisticated, luxurious feel. This is paired with the highly readable sans-serif typeface Cabin for body text and descriptive elements (Base), ensuring that crucial information, such as care guides and logistics, remains clear and accessible across all screen sizes.

Screenshot 2025-11-18 at 19.17.35.png
Screenshot 2025-11-18 at 19.17.23.png

Testing the High Fidelity Prototype

Moving from the foundational wireframes, the designs were fully realized in Figma, transitioning the simple structural mockups into high-fidelity screens incorporating the defined dark green and pink accent color palette and the Playfair/Cabin typography. This process involved detailed refinement of all components, ensuring the final visual outcome reflected the luxurious, exotic aesthetic while maintaining clarity and readability.

 

The culmination of this work was a fully functioning prototype, allowing for interactive testing across desktop, tablet, and mobile breakpoints. This prototype showcased the seamless user experience, demonstrating the key flows—from filtering products with WYSIWYG images to successfully navigating the integrated Shipping vs. Local Pickup decision point and visualizing the final order confirmation screen.

​

Note: The phone prototype is the first prototype. Tablet is the version that was iterated one. Desktop is the final prototype after all iterations were made.

mockup-leafygems.jpg
Iterations

Neccessary Iterations

Following initial prototype testing, several iterations were implemented to strengthen user trust and clarity:

 

A newsletter subscription popup was added, offering a 10% discount to immediately notify collectors when new, unpredictable rare stock arrives. This also bonds the user to the shop and will make them return.

 

The Shipping & Pickup page was significantly clarified to detail temperature-controlled shipping and scheduled Vancouver local pickup procedures.

 

A dedicated box was placed on product pages assuring users that plant-specific care guides would be digitally delivered post-purchase.

 

And finally, a more robust explanation of who Leafy Gems is was integrated on the landing page to build brand credibility and connection.

Newsletter Popup: Capture Inventory Demand

Added a sign-up popup with a 10% discount to immediately notify collectors about unpredictable new rare stock arrivals.

Logistics Clarity: Build Shipping Trust

The Shipping & Pickup page was enhanced with explicit details on temperature-controlled shipping and scheduled Vancouver local pickup procedures.

Care Guide Assurance: Post-Purchase Success

A dedicated notice was added to product pages confirming plant-specific care guides will be sent digitally right after purchase.

Brand Identity: Establish Connection

A clearer description of "Who Leafy Gems Is" was integrated to humanize the brand and strengthen credibility with users.

Leafy Gems - Homepage - Popup.jpg
       Adding a Newsletter Popup

 

Collectors like Liam needed a reliable way to secure unpredictable, limited stock before it sold out. This was solved by adding a newsletter popup that immediately notifies subscribers of new arrivals and offers a 10% discount as an incentive, turning a high-friction inventory problem into a valuable loyalty driver.

       Adding Clearer Explanations for Shipping & Pickup

 

Users expressed anxiety about the safety of high-value plants in transit, especially during Canadian winter, and confusion over the local collection process. This was solved by comprehensively detailing the logistics on the Shipping & Pickup page, explicitly outlining temperature-controlled packaging and the clear, scheduled procedure for Vancouver pickup, thus building critical trust. The explanation was also added during checkout.

Leafy Gems - Shipping.jpg
Leafy Gems - Careguide.png
       Care Guide Assurance

 

Aspiring enthusiasts like Aanya were nervous about plant failure due to a lack of trustworthy, specific acclimation instructions and lack of experience. This was solved by placing a prominent assurance box on product pages confirming that plant-specific care guides would be delivered digitally immediately after purchase, providing pre-purchase confidence and post-purchase guidance.

       Brand Identity for Trust

 

Early users felt a lack of connection and were hesitant to trust an unknown seller with high-value purchases. This was solved by integrating a clearer description of "Who Leafy Gems Is" into the site, humanizing the brand and establishing the expertise and passion required to solidify buyer confidence.

leafy Gems - Who we Are.png

Final Thoughts

Beyond the successful implementation of the design goals—Authenticity, Clarity, and Empowerment—the long-term strategy focuses on community and sustained engagement.

 

To solidify trust and foster loyalty, future iterations should include launching a dedicated Facebook Group, providing an active platform where users can share photos of their purchased plants growing, exchange detailed care tips, and receive personalized advice.

 

Furthermore, integrating rotating content like a "Plant of the Month" feature or a "Care Tip of the Month" will keep the inventory and educational content fresh, transforming the site from a transactional shop into a trusted, dynamic resource and community hub.

logo-leafygems.png
bottom of page