Belk
Introduction
I had the opportunity to collaborate with the Belk team on a variety of initiatives. These included enhancing user experience, streamlining internal design workflows, and optimizing operational efficiency. Our engagement was initially driven by the urgent need to rapidly develop a new Buy Online Pickup In-Store (BOPIS) feature for their e-commerce platform.
My role:
Sr Product Designer/ Design Consultant
- Product Design
- Research
- Establish workflow for design collaboration
- Design System Creation and Ownership
- Usability testing
- Dev handoff
TEAM
- Head of Design
- Product Owner
- CMO
CHALLENGE
Belk, a respected department store chain, sought to expand its online presence while remaining competitive. They observed a rise in the "Buy Online Pickup In-Store" (BOPIS) trend, particularly during and after the COVID-19 pandemic. Customers increasingly desired the convenience of online shopping with the immediacy of in-store pickup, a service not yet offered by Belk. Competitors like Amazon, meanwhile, emphasized fast shipping times.
UX Challenge:
Simplifying Size Selection for BOPIS(Duration: 6 weeks)
The implementation of a Buy Online Pickup In-Store (BOPIS) feature for Belk's e-commerce platform was hindered by the existing user experience (UX) design of the product detail page. Specifically, the size selection process was confusing and inefficient for users, particularly when dealing with BOPIS-only items. The complexity of the existing UX design made it difficult to seamlessly integrate the BOPIS functionality without introducing additional friction or confusion for custom
Design Challenge:
- Clarity and efficiency: Streamline the size selection process to make it more intuitive and efficient for users.
- Dynamic CTAs: Ensure that the call-to-action (CTA) button dynamically adjusts based on the selected size and item availability, displaying either "Pick Up" for BOPIS-only items or "Add to Bag" for items that can be shipped or picked up.
Approach:
- Rework size selector: Redesign the size selector to provide a more straightforward and user-friendly experience.
- Dynamic CTAs: Implement a mechanism that automatically changes the CTA button based on the selected size and item availability.
- Clear communication: Ensure that the user interface clearly communicates the availability of the item for BOPIS or shipping, reducing confusion.
Bandaid approach due to technical restrictions.
Due to technical constraints and the existing development infrastructure (technical debt), implementing the ideal solution was deemed out of scope. This meant that a compromise or alternative approach would need to be considered.
Approach:
Back to the drawing board, create a new bandaid solution for the meantime and come back after to implement best experience. Trying to solve the same BOPIS functionality but with larger limitation was not easy task. We had just a few weeks left from our delivery date to be able to create a new approach that could be dev simple to implement.
Simplification is the key.Focusing on communication by implementing labels
Adding a badge/label to the SKUs that are Bopis only, within the size select modal. Depending on the selected size and the delivery options tied to the SKU, the main cta will dynamically change.
Users will be prompted right away to see which sizes are available for regular shipping and which sizes are available for pickup instore only.
BOPIS Results:
- Increased Store Traffic: Increase in foot traffic to physical stores as a result of BOPIS.
- Customer Loyalty: We saw a significant increase of customer loyalty and repeat purchases.
- Stakeholder Satisfaction: Product Owner and CMO, were highly impressed with the work done by the product team.
Work
Additional Context: (Other Major Flows /Functionality)
Same-Day Delivery Feature: Building on BOPIS Success
Duration ( Duration: 3 weeks)
Introduction
The successful implementation of the Buy Online Pickup In-Store (BOPIS) feature provided a strong foundation for Belk to explore additional delivery options. Capitalizing on this momentum, Belk decided to introduce a Same-Day Delivery service, offering customers even greater convenience and flexibility.
Approach
Functionality Research:
- Scenario Analysis: Thoroughly evaluated various scenarios to understand the potential impact of same-day delivery on the entire customer journey, from product discovery to post-purchase experience.
- Competitive Analysis: Studied competitor strategies and best practices for implementing same-day delivery to identify potential pitfalls and opportunities.
Integration Across Platforms:
- PLP (Product Listing Page): Integrated same-day delivery as a prominent option on the product listing page, clearly indicating its availability for eligible items.
- PDP (Product Detail Page): Provided detailed information about same-day delivery, including if item was eligible for same day delivery
- Checkout: Incorporated same-day delivery as a selectable option during the checkout process, allowing customers to choose their preferred delivery method.
Tipping Functionality:
- Optional Tipping: Implemented an optional tipping feature for delivery drivers, empowering customers to show appreciation for their service.
- Clear Communication: Clearly communicated the tipping option during the checkout process, ensuring transparency and customer choice.
Design System Figma (Duration: 1 month)
Overview
The Belk.com design team lacked a central design system, forcing each project to start from scratch. This inefficiency became apparent during a tight deadline for the BOPIS (Buy Online, Pick Up In Store) feature. Without a pre-built component library or color palette in Figma, creating pixel-perfect designs was time-consuming.
Solution:
Identified an opportunity to improve our workflow by proposing a design system.
Action
We scheduled a meeting with design executives and product owners to showcase the benefits of a design system. Despite Belk's Fortune 500 status, obtaining C-level buy-in initially proved challenging. Through persuasion, emphasizing the system's impact on efficiency and productivity, ultimately securing leadership support.
Results
- Improved collaboration: The design system fostered stronger communication and teamwork between design and development teams.
- Standardized components: A centralized repository of reusable components accelerated development and ensured consistency across the ecommerce
- Enhanced efficiency: The design system reduced the time spent on repetitive tasks, allowing teams to focus on more strategic work/ user testing..
- Cost savings: The design system's long-term benefits included reduced development time and improved maintainability, leading to cost savings.
- Increased developer satisfaction: A well-organized design system made it easier for developers to understand and implement design specifications.
Highlights:
To effectively introduce and promote the newly created design system, a comprehensive video presentation was developed tailored to Belk. This presentation provided a detailed overview of the system, including its purpose, usage guidelines, and collaborative processes.
The presentation was attended by over 20 individuals and was met with enthusiastic reception. Its success paved the way for expanding the design system's implementation to other departments in need of increased efficiency, such as the inventory management product team and the mobile app team.
