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, UX Designer
Walt, PM
Timeline
6 months
Jun-Dec 2024
Company
Shipt
Role
Product Designer
Team
Aditi, Design Manager
Jordan, UX Designer
Walt, PM
Timeline
6 months
Jun-Dec 2024
Company
Shipt
Role
Product Designer
Team
Aditi, Design Manager
Jordan, UX Designer
Walt, PM
Summary and impact
I redesigned a data management tool to improve workflow efficiency and usability. The updated experience helps users work faster and with greater confidence leading to more accurate product data on the Shipt marketplace.
Summary and impact
I redesigned a data management tool to improve workflow efficiency and usability. The updated experience helps users work faster and with greater confidence leading to more accurate product data on the Shipt marketplace.
Summary and impact
I redesigned a data management tool to improve workflow efficiency and usability. The updated experience helps users work faster and with greater confidence leading to more accurate product data on the Shipt marketplace.
Context
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 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 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 and more accurately?
How might we help users write mapping specs faster and more accurately?
How might we help users write mapping specs faster and more accurately?
Old UI
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
Design Deep Dive
Reinventing the Preview panel to be more accessible
My coworker and I started ideating what the preview panel would look like.
Design Deep Dive
Reinventing the Preview panel to be more accessible
My coworker and I started ideating what the preview panel would look like.
Design Deep Dive
Reinventing the Preview panel to be more accessible
My coworker and I started ideating what the preview panel would look like.
Old UI
The old UI had 3 sections:
Users spend the most time here where they write code
This area contains reference code that is not often used.
The panel is collapsed by default but critical for users to validate their code in the work area.
But I noticed users frequently alternate between the work area and preview panel…
The new UI is simpler with only 2 sections side by side for easier viewing.
New simplified UI with only two sections.
Design Deep Dive
Redesigning preview content
The existing preview panel only has basic information but we want to surface additional data that will help users quickly validate the accuracy of their code.
Design Deep Dive
Redesigning preview content
The existing preview panel only has basic information but we want to surface additional data that will help users quickly validate the accuracy of their code.
Design Deep Dive
Redesigning preview content
The existing preview panel only has basic information but we want to surface additional data that will help users quickly validate the accuracy of their code.
Old preview panel
New preview panel
1.
Search
A new capability to search for specific kinds of products to view.
1.
Search
A new capability to search for specific kinds of products to view.
1.
Search
A new capability to search for specific kinds of products to view.
2.
Limit to two products cards
Users really only need to see two product cards at a time.
2.
Limit to two products cards
Users really only need to see two product cards at a time.
2.
Limit to two products cards
Users really only need to see two product cards at a time.
3.
Show additional fields
We surface more data for additional context while QA'ing.
3.
Show additional fields
We surface more data for additional context while QA'ing.
3.
Show additional fields
We surface more data for additional context while QA'ing.
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
What's the Impact?
Accelerating workflows while meeting strategic goals
What's the Impact?
Accelerating workflows while meeting strategic goals
🚀
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.