Creating a New B2B Ecommerce site for a Food Distributor
B2B Ecommerce Responsive Design
Introduction
Shamrock Foods’ current customer experience for ordering, order guide creation and management, and account management was split across two legacy platforms: MyShamrock, a responsive mobile-first platform; and ShamrockORDERS, a desktop-oriented experience.
Problem: Users had to switch between two legacy sites in order to make a purchase, and/or manage their orders, order guides and account information, which created a confusing experience.
Goal: The UX team was responsible for designing a new responsive ecommerce website that would combine the most important features from the two legacy sites, and create one platform that users could easily place orders, and manage their order history, order guides and account information.
Process: The UX team conducted research to gain insights on the current digital experience, had onsite discovery workshops with the client to create the new design, did a moderated usability test to gain feedback on our work, which ultimately lead to the UX/UI/Development sprints to launch the Beta site on December 12, 2023.
Team: Executive Director of UX, UX Designer (Me), Project Manager, UI Designer and External Development Team
THE SOLUTION
The current experience had many areas to improve upon and we created interesting solutions for the Beta site for the following areas:
Navigation: The current experience did not provide an easily accessible global search field for the user on either legacy sites, which is why we added a global catalog search to the top header so that users could immediately find items within the catalog. To prevent any confusion, we made the order guide search more secondary while still providing access to the global catalog search to the user.
​
Product Detail Page: We improved the MyShamrock tab structure by adding an “Overview” section, which helped organize the information better, and we made the tabs sticky so that the user could switch between the tabs at any point as they scrolled down the page.
​
Product Card: The current experience had two different sized product cards, which is why we created a new product card that had larger images, font, and quantity field, which helps the user add items to the cart more efficiently (bigger click box).
TITLE OF THE CALLOUT BLOCK
Success
The client was thrilled with the Beta launch and the new mini-cart that sits in the global navigation. He liked the mini-cart design so much that he applied for a patent.
