Role
Senior Product Designer (Lead)
Team
Product Manager, Backend Eng, Frontend Eng, Creative Director, Comm Ops Director, Myself
Timeline
~3 weeks
Date Completed
April, 2023
Category
E-comm
Problem
Bath & Body Works wanted to communicate five different fulfillment deadlines as early in the customer’s digital journey as possible to avoid customer disappointment and frustration, and to support holidays and timed-promotional events.
Solution
Video displaying the fulfillment module updating
automatically as time passes.
Why it Works
Reusability
The card component is
the building block of the module.
Fulfillment module with 3 cards.
Module instance with 2 cards.
Module instance with 1 card.
Desktop variant of module.
The final solution is aligned with our design system, so the module can be reused with predictable guidelines for efficiency gains. Crafting these lego pieces in a deliberate and hierarchical manner delivered structure, visual consistency, and increased accessibility.
Self-Serviceability
Fulfillment module self-serviceable fields & attributes.
Introducing a reusable, responsive component made development work self-serviceable and automated. This led to a reduction in time to production, site maintenance, and asset creation. Simultaneously, adherence to WCAG guidelines increased legibility.
Strategic Storytelling
Leveraging systems thinking allowed us to tell a clear story to the customer. As a result we intentionally placed the module under the main feature to drive urgency in conversion and contextual fulfillment information.
Detailed Handoffs
Reach out to Nathan for handoff examples that display the level of detail that handoffs hold for engineering. Specifications include anatomy, instances, content guidelines, behavior, interactions, and logic.
Impact
Customer care calls decreased.
Operational efficiency increased.
Time to production decreased.
Marketing costs decreased.
Let’s Connect
Role
Senior Product Designer (Lead)
Team
Product Manager, Backend Eng, Frontend Eng, Creative Director, Comm Ops Director, Myself
Timeline
~3 weeks
Date Completed
April, 2023
Category
E-comm
Problem
Bath & Body Works wanted to communicate five different fulfillment deadlines as early in the customer’s digital journey as possible to avoid customer disappointment and frustration, and to support holidays and timed-promotional events.
Solution
Video displaying the fulfillment module updating
automatically as time passes.
Why it Works
Reusability
The card component is
the building block of the module.Fulfillment module with 3 cards.
Module instance with 2 cards.
Module instance with 1 card.
Desktop variant of module.
The final solution is aligned with our design system, so the module can be reused with predictable guidelines for efficiency gains. Crafting these lego pieces in a deliberate and hierarchical manner delivered structure, visual consistency, and increased accessibility.
Self-Serviceability
Fulfillment module self-serviceable fields & attributes.
Introducing a reusable, responsive component made development work self-serviceable and automated. This led to a reduction in time to production, site maintenance, and asset creation. Simultaneously, adherence to WCAG guidelines increased legibility.
Strategic Storytelling
Leveraging systems thinking allowed us to tell a clear story to the customer. As a result we intentionally placed the module under the main feature to drive urgency in conversion and contextual fulfillment information.
Detailed Handoffs
Reach out to Nathan for handoff examples that display the level of detail that handoffs hold for engineering. Specifications include anatomy, instances, content guidelines, behavior, interactions, and logic.
Impact
Customer care calls decreased.
Operational efficiency increased.
Time to production decreased.
Marketing costs decreased.
Let’s Connect
Role
Senior Product Designer (Lead)
Team
Product Manager, Backend Eng, Frontend Eng, Creative Director, Comm Ops Director, Myself
Timeline
~3 weeks
Date Completed
April, 2023
Category
E-comm
Problem
Bath & Body Works wanted to communicate five different fulfillment deadlines as early in the customer’s digital journey as possible to avoid customer disappointment and frustration, and to support holidays and timed-promotional events.
Solution
Video displaying the fulfillment module updating
automatically as time passes.
Why it Works
Reusability
The card component is
the building block of the module.Fulfillment module with 3 cards.
Module instance with 2 cards.
Module instance with 1 card.
Desktop variant of module.
The final solution is aligned with our design system, so the module can be reused with predictable guidelines for efficiency gains. Crafting these lego pieces in a deliberate and hierarchical manner delivered structure, visual consistency, and increased accessibility.
Self-Serviceability
Fulfillment module self-serviceable fields & attributes.
Introducing a reusable, responsive component made development work self-serviceable and automated. This led to a reduction in time to production, site maintenance, and asset creation. Simultaneously, adherence to WCAG guidelines increased legibility.
Strategic Storytelling
Leveraging systems thinking allowed us to tell a clear story to the customer. As a result we intentionally placed the module under the main feature to drive urgency in conversion and contextual fulfillment information.
Detailed Handoffs
Reach out to Nathan for handoff examples that display the level of detail that handoffs hold for engineering. Specifications include anatomy, instances, content guidelines, behavior, interactions, and logic.
Impact
Customer care calls decreased.
Operational efficiency increased.
Time to production decreased.
Marketing costs decreased.
Let’s Connect
Role
Senior Product Designer (Lead)
Team
Product Manager, Backend Eng, Frontend Eng, Creative Director, Comm Ops Director, Myself
Timeline
~3 weeks
Date Completed
April, 2023
Category
E-comm
Problem
Bath & Body Works wanted to communicate five different fulfillment deadlines as early in the customer’s digital journey as possible to avoid customer disappointment and frustration, and to support holidays and timed-promotional events.
Solution
Video displaying the fulfillment module updating
automatically as time passes.
Why it Works
Reusability
The card component is
the building block of the module.Fulfillment module with 3 cards.
Module instance with 2 cards.
Module instance with 1 card.
Desktop variant of module.
The final solution is aligned with our design system, so the module can be reused with predictable guidelines for efficiency gains. Crafting these lego pieces in a deliberate and hierarchical manner delivered structure, visual consistency, and increased accessibility.
Self-Serviceability
Fulfillment module self-serviceable fields & attributes.
Introducing a reusable, responsive component made development work self-serviceable and automated. This led to a reduction in time to production, site maintenance, and asset creation. Simultaneously, adherence to WCAG guidelines increased legibility.
Strategic Storytelling
Leveraging systems thinking allowed us to tell a clear story to the customer. As a result we intentionally placed the module under the main feature to drive urgency in conversion and contextual fulfillment information.
Detailed Handoffs
Reach out to Nathan for handoff examples that display the level of detail that handoffs hold for engineering. Specifications include anatomy, instances, content guidelines, behavior, interactions, and logic.
Impact
Customer care calls decreased.
Operational efficiency increased.
Time to production decreased.
Marketing costs decreased.
Let’s Connect