Design Objective
For customers:
Small buyers couldn't afford the minimum order quantities.
Buyers have no way of purchasing products on the current website.
For the business:
Baked-in shipping costs were hurting profits on smaller orders.
All purchases have to be placed manually by a sales person.
The Solution
A pallet-based ordering system that allows customers to see shipping costs while making the experience enjoyable.
Key Benefits:
Customers can build their pallet to maximize the value of their shipping costs.
Product catalog is accessible 24/7.
Costing is transparent and upfront.
Orders can be placed without needing to wait for a sales person.
Research Overview
Painpoint
Solution
Hidden or unclear fees
Clearly show shipping and liftgate costs upfront
Order minimums are too high
Pass shipping costs onto customer to remove all order minimums
Early or unexpectedly large orders take up too much space in small shops
Share exact delivery date and order volume before purchase
Flat Rate Pallet System
The website features a new method of visualizing pallet-based shipping.
Key Benefits:
Customers are encouraged to fill pallets to maximize the flat-rate shipping costs.
Flat-rate cost covers all use-cases, whether a customer purchases 1 pallet or 10.
Eliminates purchase minimums, since shipping costs will always be covered.
Sitemap & Integration Into Existing System
The new B2B website is designed to capture and route prospective customers arriving from trade shows, social media campaigns, and e-blast marketing efforts, creating a dedicated conversion path for wholesale and retail partners. At the same time, the original branded website was maintained as a consumer-facing destination for plant care education, inspiration, and product design storytelling.
Component Design System
I built a design system from scratch that handled all the use cases of the ecommerce website.
Key Benefits:
Flexible + adaptable style guide for WordPress development
Modular component system for future updates
Annotated for future UI/UX designers
Low-Fidelity Wireframes
Low-fidelity wireframes were used to quickly map the new B2B customer journey. This phase focused on establishing clear page hierarchy, and identifying navigational flows before moving into visual design.
Implementation and Next Steps
The ecommerce website will convert all existing small customers to a streamlined ordering system.
Phase 1
Converting 500 existing small businesses to the ecommerce website
Phase 2
Extended marketing efforts to generate new leads beyond existing customers