case study
Plantae E-Commerce Website
Services: Ecommerce UI and UX in Figma, fast checkout, usability testing
client overview
Plantae is a family owned plant shop based in NW Calgary that wanted to start selling products online. At the time of this project, Plantae did not have an e-commerce website. Customers could only browse products and place orders manually through email, which created friction and limited sales.
The goal of this project was to design a responsive e-commerce product overview experience from scratch, allowing customers to easily browse, filter, add products to cart, and move through checkout with minimal effort.
The Challenge
Plantae’s existing website did not support online purchasing, resulting in a slow and inefficient ordering process. Customers had to email orders and wait for confirmation, increasing the risk of abandoned purchases and lost sales. Key challenges included:
• No online checkout experience
• No structured product browsing or filtering
• High friction in the purchasing process
• Need to maintain Plantae’s friendly and eco conscious brand identity
The challenge was to design an intuitive e-commerce experience that makes online shopping easy while building trust with customers.
project objective
E-Commerce Product Design
Design an e-commerce product overview page from scratch.
Product Browsing & Filtering
Enable easy browsing and filtering by plant type, size, and price.
Checkout Experience Design
Create a smooth add to cart and checkout experience.
Mobile First Design
Prioritize mobile friendly design.
Brand Aligned Experience
Reflect Plantae’s approachable, family run brand.
Scalable E-Commerce Design
Support future growth and scalability.
Users & Business Needs
Target audience
Primary users are plant lovers and eco conscious shoppers aged 25 to 45 in Calgary who prefer online shopping and value sustainability.
User needs included:
• Simple and intuitive navigation
• Clear product categories and filtersy
• Mobile optimized browsing
• A fast and secure checkout with minimal steps
From a business perspective, Plantae needed an e-commerce design that would:
• Increase online sales
• Reduce manual order handling
• Improve customer experience and retention
UX STRATEGY & DESIGN APPROACH
The project began with a mobile first mindset, ensuring the experience would work smoothly on smaller screens before scaling to desktop.
Key UX decisions included:
• Designing a clear shopping flow from browsing to checkout
• Grouping products into intuitive categories
• Adding filtering options to help users quickly find what they need
• Keeping layouts clean and minimal to reduce cognitive load
• Designing consistent interaction patterns to build trust during checkout
Low fidelity wireframes were created to map user flows, followed by high fidelity designs and prototypes that aligned with Plantae’s existing brand identity.
Low fidelity wireframe for desktop
Low fidelity wireframe for mobile
User flow diagram
Browse → Filter → Add to Cart → Checkout
E-Commerce Design Solutions
Product Browsing & Filtering
The final design focused on turning Plantae into a functional online store with a smooth customer journey.
Designed a product overview page with filters for category, size, and price.
Allowed users to quickly narrow down product options.
Checkout Experience
Designed a streamlined add to cart and checkout flow
Reduced the number of steps required to complete a purchase and focused on clarity and ease to prevent cart abandonment.
Mobile friendly design
Touch friendly buttons, clear spacing and hierarchy, and easy scrolling through product listings.
Trust & Usability Enhancements
Consistent button labels and interactions.
Clear navigation feedback so users always know where they are.
Optional wishlist and related product suggestions to encourage engagement.
final outcome
Final Draft for Desktop and Mobile Design.
The final result is a complete e-commerce product overview design that transforms Plantae from an email based ordering system into a modern online shopping experience.
The design:
• Simplifies the purchasing process
• Improves usability across devices
• Reduces friction in checkout
• Aligns with Plantae’s brand values
• Creates a scalable foundation for future e-commerce growth
Skills Demonstrated
E Commerce UX Strategy
Designed a user focused shopping experience that supports easy browsing and purchase flow.
Fast Checkout and Filter Optimization
Streamlined filters and checkout for quicker, easier purchases.
User Flow and Journey Mapping
Mapped the user journey to remove friction and guide smooth navigation.
Wireframing and Prototyping
Developed clear wireframes and interactive prototypes to validate layout and flow early.
Conversion Focused UI Design
Applied visual hierarchy and placement to support engagement and sales.
Mobile First Design Strategy
Prioritized mobile usability to reflect real user behavior and improve accessibility.