Designing a High-Trust, Guided E-Commerce Experience for Sustainable Reforesting
TerraTrees Case Study
TerraTrees E-Commerce Experience
Challenge: To transform TerraTrees’ complex e-commerce experience into a trustworthy, simple-to-use purchasing flow. The strategic goal was clear: significantly increase user confidence, simplify the tree-purchasing process, and drive customer retention.
Impact: By restructuring the site’s information architecture (IA) and clarifying the value proposition of each product, we achieved a measurable uplift: an 11% boost in site traffic and an 8% increase in new visitors post-launch. This work directly supported the business objective of scaling sustainable reforestation efforts.
Project Details
Lead Product Designer
- Front-End Development
- High-Fidelity Design
- Information Architecture (IA)
- Prototyping & Wireframing
- Responsive UI Design
- Usability Research
12 Weeks (from Discovery to Launch)
The Situation
Users Overwhelmed by Choice, Undermined by Complexity
TerraTrees’ core mission—making sustainable reforesting accessible to everyone—was being hampered by a digital experience that was hard to navigate and lacked immediate trust signals.
Our initial audit and discovery phase revealed two critical pain points:
Product Overload
Users often abandoned the shopping journey because they were unable to quickly filter or identify the right tree for their purpose, leading to high bounce rates on product pages.
Trust Barrier
The commitment to planting a tree felt abstract. Users needed immediate, visual confirmation of the organization’s credibility and the ecological impact of their purchase to feel confident completing the transaction.
The Task
Design Goals Focused on Clarity and Conversion
The project’s mandate was to transform the brand aesthetic into a strategic UI/UX approach. Based on our audit, we established the following measurable objectives:
Reduce Product Page Bounce Rate
Streamline navigation and improve on-page clarity to reduce product page drop-off by 15%.
System Scalability
Deliver a design system that would allow for future e-commerce growth and easy content management without custom coding.
Increase Transaction Confidence
Integrate transparent impact metrics and a clear path to purchase to boost the checkout completion rate.
Discovery & Problem Definition
Mapping Clarity from Chaos
Our initial audit revealed that the sheer variety of products (different tree types, purposes, and logistics) was paralyzing the user. My first action was to stabilize the Information Architecture (IA).
Action Steps:
- Content Audit and Card Sorting: I cataloged the entire tree inventory and product attributes (e.g., climate, soil type, purpose). By performing a digital card sort and reviewing competitor IA, I discovered that users mentally organize trees by purpose (e.g., “Individual,” “Business,” “Memorial”) rather than technical genus/species.
- Defining a Purchase Funnel: I designed a new sitemap and User Flow that guided customers through a decision tree, prioritizing purpose-driven filters (the “Why”) before displaying the specific product details (the “What”).
- Visualizing the Impact: The brand strategy was updated to visually clarify the organization’s credibility. I crafted a trust-focused visual system and brand voice that emphasized conservation mission and ecological success over traditional sales language.
Design & Iteration
High-Trust, Low-Friction UI
With the core structure defined, the focus shifted to the key conversion points: the product page and the checkout.
Action Steps:
- Wireframing Key Flows: I developed mid-to-high-fidelity wireframes for the homepage, catalog, and product detail pages. A major iteration involved redesigning the product page layout to prioritize three things above the fold: Clarity on Impact, Transparent Pricing, and Immediate Call-to-Action.
- Designing for Confidence: To overcome the “Trust Barrier,” I integrated a visual tracking system (planting location maps, certification badges) directly into the product modules, assuring users of the tree’s journey and guaranteed success.
- Establishing a Scalable UI System: I created a comprehensive Component Library in WordPress WooCommerce CMS, ensuring all UI elements (buttons, forms, cards) adhered to modern accessibility standards and were easily integrated into the WordPress/WooCommerce platform, making the site scalable without future custom development costs.
Implementation & Technical Ownership
The final, stakeholder-approved designs were not simply handed off; I personally ensured the integrity of the user experience by acting as the front-end developer for the solution. This dual role accelerated the process and guaranteed that the pixel-perfect interfaces translated correctly to the live environment.
Action Steps:
- Technical Ownership of E-commerce: I personally developed and configured the WooCommerce solution, building the customized filtering and purchasing logic required to implement the new Information Architecture. This ensured the complex e-commerce functions were perfectly aligned with the tested UX flows.
- Design System Handoff & QA: I translated the high-fidelity UI components directly into clean, maintainable front-end code, ensuring responsiveness across all devices and confirming adherence to accessibility standards during the Quality Assurance (QA) phase.
- Integrated Marketing Assets: I maintained a single, trustworthy brand experience by applying the final visual and UI systems to essential cross-channel touchpoints, including email templates, brochures, and trade show graphics.
Discovery & Problem Definition
Mapping Clarity from Chaos
Our initial audit revealed that the sheer variety of products (different tree types, purposes, and logistics) was paralyzing the user. My first action was to stabilize the Information Architecture (IA).
Action Steps:
- Content Audit and Card Sorting: I cataloged the entire tree inventory and product attributes (e.g., climate, soil type, purpose). By performing a digital card sort and reviewing competitor IA, I discovered that users mentally organize trees by purpose (e.g., “Individual,” “Business,” “Memorial”) rather than technical genus/species.
- Defining a Purchase Funnel: I designed a new sitemap and User Flow that guided customers through a decision tree, prioritizing purpose-driven filters (the “Why”) before displaying the specific product details (the “What”).
- Visualizing the Impact: The brand strategy was updated to visually clarify the organization’s credibility. I crafted a trust-focused visual system and brand voice that emphasized conservation mission and ecological success over traditional sales language.
Design & Iteration
High-Trust, Low-Friction UI
With the core structure defined, the focus shifted to the key conversion points: the product page and the checkout.
Action Steps:
- Wireframing Key Flows: I developed mid-to-high-fidelity wireframes for the homepage, catalog, and product detail pages. A major iteration involved redesigning the product page layout to prioritize three things above the fold: Clarity on Impact, Transparent Pricing, and Immediate Call-to-Action.
- Designing for Confidence: To overcome the “Trust Barrier,” I integrated a visual tracking system (planting location maps, certification badges) directly into the product modules, assuring users of the tree’s journey and guaranteed success.
- Establishing a Scalable UI System: I created a comprehensive Component Library in WordPress WooCommerce CMS, ensuring all UI elements (buttons, forms, cards) adhered to modern accessibility standards and were easily integrated into the WordPress/WooCommerce platform, making the site scalable without future custom development costs.
Implementation & Technical Ownership
The final, stakeholder-approved designs were not simply handed off; I personally ensured the integrity of the user experience by acting as the front-end developer for the solution. This dual role accelerated the process and guaranteed that the pixel-perfect interfaces translated correctly to the live environment.
Action Steps:
- Technical Ownership of E-commerce: I personally developed and configured the WooCommerce solution, building the customized filtering and purchasing logic required to implement the new Information Architecture. This ensured the complex e-commerce functions were perfectly aligned with the tested UX flows.
- Design System Handoff & QA: I translated the high-fidelity UI components directly into clean, maintainable front-end code, ensuring responsiveness across all devices and confirming adherence to accessibility standards during the Quality Assurance (QA) phase.
- Integrated Marketing Assets: I maintained a single, trustworthy brand experience by applying the final visual and UI systems to essential cross-channel touchpoints, including email templates, brochures, and trade show graphics.
Results
Data Validates Design Decisions
The successful restructuring of the purchasing portal and the application of a high-trust visual system directly led to a measurable positive shift in user behavior and business growth.
- Acquisition Lift: The improved Information Architecture and SEO-optimized content led to an 11% boost in site traffic and an 8% increase in new visitors, demonstrating that the service is now more discoverable to the target audience.
- User Confidence: While direct conversion metrics are proprietary, the simplified, purpose-driven filtering system significantly reduced the complexity of the tree-purchasing decision, which was the primary goal to improve user confidence.
- Stakeholder Alignment: The new design system provided the internal marketing team with a scalable, efficient toolkit for generating consistent, on-brand collateral, reducing their design overhead.
%
Increase in New Visitors
%
Boost in Site Traffic
Stakeholder Validation
"Her expertise in website creation surpassed my expectations."
Kim understood our company brand and was committed to helping us bring that vision to light. Her expertise in website creation surpassed my expectations. The look, the feel, and the professionalism are all there—just as I’d hoped. I’m so happy with our collaboration and look forward to working on more projects!
Misty – TerraTrees
Key Learnings & Future Product Vision
Every project presents new challenges, and TerraTrees was a valuable lesson in balancing user empathy with e-commerce conversion psychology.
- Learning: I learned the difficulty of balancing expert-level product detail (tree genus, location) with the need for layman simplicity (what users actually care about, like ‘Memorial Trees’ or ‘Business Trees’). This reaffirmed the importance of structuring IA around user goals rather than product attributes.
- Future Product Vision: If this project were to continue, the next phase would involve A/B testing two distinct filtering interfaces to definitively measure which IA structure yields the highest conversion. I would also introduce a personalized onboarding quiz to automate the tree-selection guidance process.
