Zabar’s
Products
Web
Mobile
Team
Project Manager
UX Architect
UX Designer (Me)
Developers
What I did
UX/UI Design
Style Guide
Scope Analysis
Subscriptions
The Brief
Zabar's approached RafterOne for assistance in transitioning their website to the Salesforce Commerce Cloud's Storefront Reference Architecture (SFRA). They aimed to preserve the core functionality of their existing website while elevating its design to bring Zabar's brand presence online. Acknowledging the existing website's shortcomings in mobile responsiveness, Zabar's prioritized updates to improve mobile user experiences. This initiative focused on critical enhancements to site navigation, ensuring users could effortlessly locate products.
Design Approach
Initially, we established clear objectives to enhance the website's performance and evaluate how Zabar's existing site could transition to SFRA. In collaboration with the project manager, UX architect, and developers, we meticulously reviewed the current website's scope to outline a realistic budget and timeline. This review focused on understanding the site's existing functionalities and identifying which aspects would be seamlessly integrated into SFRA. Subsequently, I conducted audit of the site's design compared to their physical store experience, aiming to pinpoint specific elements that could be effectively translated to their online presence.
STYLE GUIDE
My primary goal was to develop a design system for Zabar's that would encapsulate the essence of their brand online. The brand's in-store packaging boasted a unique blend of charm, character, and personality, aspects I was keen to reflect in the website's design. By incorporating a variety of fonts from their packaging, I sought to infuse the website with Zabar's classic elegance, complemented by modern UI elements to create a cohesive and inviting online experience.
NAVIGATION & TAXONOMY
We streamlined Zabar's cluttered navigation by simplifying the main menu, removing unnecessary top-tier links. By introducing icons for in-store and local ordering, we clearly differentiated between online and in-store shopping options in the main navigation. We also added flexible top navigation links for promotions, allowing for easy updates with seasonal content, catering to Zabar's business requirements.
SUBSCRIPTION ORDERS
Additionally, I addressed the need for customizations beyond the standard SFRA offerings. This involved direct collaboration with Ordergroove to enhance the Z-Peat auto-ship feature, implementing tailored adjustments on the product detail pages, shopping cart, and throughout the checkout process. A significant aspect of this customization was the integration of a calendar feature, designed to align with Zabar's existing operational practices, thereby enabling customers to specify their preferred shipment dates. This approach ensured a seamless transition of Zabar's unique brand identity and operational functionalities into their new SFRA-based online platform.
Final Designs
Zabar's website was successfully launched on the SFRA platform in record time, just before the holiday season. I developed a design system that elegantly fused their enduring style with modern design elements and advanced user interfaces, elevating Zabar’s online presence as a top-tier gourmet destination. Throughout the project, we navigated through necessary customizations, especially for the Z-Peat subscription orders with Ordergroove, while managing budget constraints and prioritizing an enhanced user experience.
On the product detail page (PDP), I collaborated closely with Ordergroove to leverage their out-of-the-box functionality for Z-Peat auto-ship orders.
I implemented customizations to the SFRA account to integrate Ordergroove's Z-Peat auto-ship feature.
We incorporated customizations in both the shopping cart and checkout processes to integrate Ordergroove. To maintain consistency with their existing site, we also introduced a calendar feature within the checkout, enabling customers to select their preferred shipping dates for orders.