Shipt
Preview Panel
An ETL tool to simplify data maintenance workflows and accelerate the onboarding of new retailers on Shipt’s marketplace.
Shipt
Preview Panel
An ETL tool to simplify data maintenance workflows and accelerate the onboarding of new retailers on Shipt’s marketplace.
Shipt
Preview Panel
An ETL tool to simplify data maintenance workflows and accelerate the onboarding of new retailers on Shipt’s marketplace.
Timeline
6 months
Jun-Dec 2024
Company
Shipt
Role
Product Designer
Team
Aditi, Design Manager
Jordan, Product Designer
Walt, PM
Timeline
6 months
Jun-Dec 2024
Company
Shipt
Role
Product Designer
Team
Aditi, Design Manager
Jordan, Product Designer
Walt, PM
Timeline
6 months
Jun-Dec 2024
Company
Shipt
Role
Product Designer
Team
Aditi, Design Manager
Jordan, Product Designer
Walt, PM
Summary and impact
I redesigned a key feature in Shipt’s internal data management tool to improve workflow efficiency and usability. The updated experience helps Catalog Operations users work faster and with greater confidence leading to more accurate product data on the Shipt marketplace.
Summary and impact
I redesigned a key feature in Shipt’s internal data management tool to improve workflow efficiency and usability. The updated experience helps Catalog Operations users work faster and with greater confidence leading to more accurate product data on the Shipt marketplace.
Summary and impact
I redesigned a key feature in Shipt’s internal data management tool to improve workflow efficiency and usability. The updated experience helps Catalog Operations users work faster and with greater confidence leading to more accurate product data on the Shipt marketplace.
Context
Shipt’s marketplace relies on the Catalog Operations team to maintain accurate product data from grocery retail partners.
Shipt is an online grocery delivery platform. It partners with retailers, each sending product data in their own formats. Previously, engineers were responsible for setting up and maintaining pipelines to handle this data.
To solve this, we created the C3, an internal tool that empowers operations team members to manage pipelines themselves—reducing engineering overhead and speeding up new retailer onboarding.
I led the redesign of the mapping step UI within C3, where users define how incoming data fields map to Shipt’s internal schema.
Context
Shipt’s marketplace relies on the Catalog Operations team to maintain accurate product data from grocery retail partners.
Shipt is an online grocery delivery platform. It partners with retailers, each sending product data in their own formats. Previously, engineers were responsible for setting up and maintaining pipelines to handle this data.
To solve this, we created the C3, an internal tool that empowers operations team members to manage pipelines themselves—reducing engineering overhead and speeding up new retailer onboarding.
I led the redesign of the mapping step UI within C3, where users define how incoming data fields map to Shipt’s internal schema.
Context
Shipt’s marketplace relies on the Catalog Operations team to maintain accurate product data from grocery retail partners.
Shipt is an online grocery delivery platform. It partners with retailers, each sending product data in their own formats. Previously, engineers were responsible for setting up and maintaining pipelines to handle this data.
To solve this, we created the C3, an internal tool that empowers operations team members to manage pipelines themselves—reducing engineering overhead and speeding up new retailer onboarding.
I led the redesign of the mapping step UI within C3, where users define how incoming data fields map to Shipt’s internal schema.
Problem
Users take a long time to complete the mapping step of the data pipeline
Without feedback from the UI, users don’t know if they’ve written the mappings correctly. This forces them to troubleshoot manually and escalate to engineering—adding hours of delay to every new retailer onboarding.
Problem
Users take a long time to complete the mapping step of the data pipeline
Without feedback from the UI, users don’t know if they’ve written the mappings correctly. This forces them to troubleshoot manually and escalate to engineering—adding hours of delay to every new retailer onboarding.
Problem
Users take a long time to complete the mapping step of the data pipeline
Without feedback from the UI, users don’t know if they’ve written the mappings correctly. This forces them to troubleshoot manually and escalate to engineering—adding hours of delay to every new retailer onboarding.
Design Question
How might we help users write mapping specs faster?
How might we help users write mapping specs faster?
How might we help users write mapping specs faster?
Current UI that docks the preview panel at the bottom of the screen.
Who are the users?
As a Catalog Operations Specialist...
I need to map and load retailer product data into Shipt’s systems so that our members see accurate selections and pricing.
Today, I rely on engineers to validate my mapping specs. Without real‑time feedback, I waste time troubleshooting errors instead of onboarding new retailers faster.
Who are the users?
As a Catalog Operations Specialist...
I need to map and load retailer product data into Shipt’s systems so that our members see accurate selections and pricing.
Today, I rely on engineers to validate my mapping specs. Without real‑time feedback, I waste time troubleshooting errors instead of onboarding new retailers faster.
Who are the users?
As a Catalog Operations Specialist...
I need to map and load retailer product data into Shipt’s systems so that our members see accurate selections and pricing.
Today, I rely on engineers to validate my mapping specs. Without real‑time feedback, I waste time troubleshooting errors instead of onboarding new retailers faster.
Current state + user flow
The current UI space is not helping users in their workflow
Write code snippets to fill in the mapping spec fields.
Check if mappings are correct by looking at product data.
Troubleshoot if necessary by referring to secondary content such as a code library, existing data transformations, and additional external resources.
Finish the pipeline.
How can we show content that is relevant to users in their workflow and speed up the iterative process helping users determine when their mapping specs are correct?
Current state + user flow
The current UI space is not helping users in their workflow
Write code snippets to fill in the mapping spec fields.
Check if mappings are correct by looking at product data.
Troubleshoot if necessary by referring to secondary content such as a code library, existing data transformations, and additional external resources.
Finish the pipeline.
How can we show content that is relevant to users in their workflow and speed up the iterative process helping users determine when their mapping specs are correct?
Current state + user flow
The current UI space is not helping users in their workflow
Write code snippets to fill in the mapping spec fields.
Check if mappings are correct by looking at product data.
Troubleshoot if necessary by referring to secondary content such as a code library, existing data transformations, and additional external resources.
Finish the pipeline.
How can we show content that is relevant to users in their workflow and speed up the iterative process helping users determine when their mapping specs are correct?
User workflow
User workflow
User workflow
Ideation
Reinventing the Preview panel to be more accessible
My coworker and I started ideating what the preview panel would look like.
Ideation
Reinventing the Preview panel to be more accessible
My coworker and I started ideating what the preview panel would look like.
Ideation
Reinventing the Preview panel to be more accessible
My coworker and I started ideating what the preview panel would look like.
In the old UI, users spend the most time in the main work area while the preview panel is collapsed by default.
Early iterations of the preview panel.
User testing
Validating the preview panel with users
What we did:
Created a test on usertesting.com for 3 participants to observe how they interact with the new preview panel.
Key findings:
✅ Positive reception of the new layout. 100% users found the interface more intuitive and aligned with their workflow.
🧠 Strong validation for adding action buttons — users surfaced multiple use cases, confirming their value.
🔎 Search was frequently mentioned as a desired feature for finding specific products or fields within the preview
Next steps:
Collaborate with engineering to understand technical feasibility and scope of implementing search functionality in the panel
User testing
Validating the preview panel with users
What we did:
Created a test on usertesting.com for 3 participants to observe how they interact with the new preview panel.
Key findings:
✅ Positive reception of the new layout. 100% users found the interface more intuitive and aligned with their workflow.
🧠 Strong validation for adding action buttons — users surfaced multiple use cases, confirming their value.
🔎 Search was frequently mentioned as a desired feature for finding specific products or fields within the preview
Next steps:
Collaborate with engineering to understand technical feasibility and scope of implementing search functionality in the panel
User testing
Validating the preview panel with users
What we did:
Created a test on usertesting.com for 3 participants to observe how they interact with the new preview panel.
Key findings:
✅ Positive reception of the new layout. 100% users found the interface more intuitive and aligned with their workflow.
🧠 Strong validation for adding action buttons — users surfaced multiple use cases, confirming their value.
🔎 Search was frequently mentioned as a desired feature for finding specific products or fields within the preview
Next steps:
Collaborate with engineering to understand technical feasibility and scope of implementing search functionality in the panel
Clustered user feedback from the user tests to find insights.
User feedback
“The preview shelf is definitely an upgrade from what we were previously using.”
User feedback
“The preview shelf is definitely an upgrade from what we were previously using.”
User feedback
“The preview shelf is definitely an upgrade from what we were previously using.”
Developer handoff & iteration
UI refresh
I handed off an initial version of the UI to developers. Shortly after, our design system released new components. To stay consistent with the updated system, I reskinned the UI using the new components and collaborated with engineering to ensure a smooth transition without disrupting development timelines.
Developer handoff & iteration
UI refresh
I handed off an initial version of the UI to developers. Shortly after, our design system released new components. To stay consistent with the updated system, I reskinned the UI using the new components and collaborated with engineering to ensure a smooth transition without disrupting development timelines.
Developer handoff & iteration
UI refresh
I handed off an initial version of the UI to developers. Shortly after, our design system released new components. To stay consistent with the updated system, I reskinned the UI using the new components and collaborated with engineering to ensure a smooth transition without disrupting development timelines.
V1 using the old design system.
V2 using the new design system.
What's the Impact?
Accelerating workflows while meeting strategic goals
This tool supports Shipt’s strategic goal of expanding the aisle by making it faster and easier to onboard new retailers and products. By reducing data issues at the source, it ensures a more accurate marketplace experience for members.
What's the Impact?
Accelerating workflows while meeting strategic goals
This tool supports Shipt’s strategic goal of expanding the aisle by making it faster and easier to onboard new retailers and products. By reducing data issues at the source, it ensures a more accurate marketplace experience for members.
What's the Impact?
Accelerating workflows while meeting strategic goals
This tool supports Shipt’s strategic goal of expanding the aisle by making it faster and easier to onboard new retailers and products. By reducing data issues at the source, it ensures a more accurate marketplace experience for members.
🚀
Reduced learning curve
The redesigned UI is more intuitive for new users with clearer in-context feedback.
🚀
Reduced learning curve
The redesigned UI is more intuitive for new users with clearer in-context feedback.
🚀
Reduced learning curve
The redesigned UI is more intuitive for new users with clearer in-context feedback.
📈
Faster retailer launches
Users complete their workflow 20% faster using Preview 2.0.
📈
Faster retailer launches
Users complete their workflow 20% faster using Preview 2.0.
📈
Faster retailer launches
Users complete their workflow 20% faster using Preview 2.0.
🛠️
Less engineering involvement
This frees up dev resources and allows them to only support when needed.
🛠️
Less engineering involvement
This frees up dev resources and allows them to only support when needed.
🛠️
Less engineering involvement
This frees up dev resources and allows them to only support when needed.
“Preview 2.0 helped us launch faster, reduced engineering dependency, and empowered more Ops team members to improve product data quality.”
Walt, Product Manager
“Preview 2.0 helped us launch faster, reduced engineering dependency, and empowered more Ops team members to improve product data quality.”
Walt, Product Manager
“Preview 2.0 helped us launch faster, reduced engineering dependency, and empowered more Ops team members to improve product data quality.”
Walt, Product Manager
Reflection
Collaboration and iteration
This multi-year project taught me how to design within a large, evolving scope and collaborate across teams to modernize a legacy tool. I supported developers post-handoff, adapting designs as new use cases surfaced. It was rewarding to see the tool evolve through multiple iterations and contribute to a high-impact system.
Reflection
Collaboration and iteration
This multi-year project taught me how to design within a large, evolving scope and collaborate across teams to modernize a legacy tool. I supported developers post-handoff, adapting designs as new use cases surfaced. It was rewarding to see the tool evolve through multiple iterations and contribute to a high-impact system.
Reflection
Collaboration and iteration
This multi-year project taught me how to design within a large, evolving scope and collaborate across teams to modernize a legacy tool. I supported developers post-handoff, adapting designs as new use cases surfaced. It was rewarding to see the tool evolve through multiple iterations and contribute to a high-impact system.