Optimising ditto's Shopify UX
ditto's Shopify integration worked on our tidy test stores and broke on real ones. I redesigned it to handle the large, messy inventories small businesses actually have.
Impact
- Identified a critical gap between controlled testing and real-world Shopify environments
- Rebuilt the product import flow to handle large, messy, inconsistently named inventories
- Every store's structure was different, and the same UX had to hold for all of them
At ditto, the AI marketing assistant I co-founded and designed, the Shopify integration was how the product learned what an online store actually sold. Connect your store, and ditto could write about your real products. I led the design of that integration, and it looked straightforward. Then real stores connected to it, and it fell apart in ways our tests never hinted at.
The Challenge
We had tested with small, tidy dummy Shopify stores, and everything worked. Real stores were massive by comparison, and messy. Most belonged to single-operator businesses that didn't have time to keep a store organised, so products sprawled across different lines, collections, and sales, with names that didn't follow any system.
- The larger inventories overloaded the system and caused crashes.
- The inconsistent naming and overlapping collections confused the AI.
- Showing all that product data during onboarding overwhelmed users, and they abandoned the flow.
We hadn't tested with anything like this, and no two real stores were structured the same way. We had to recalibrate, and the same integration had to work for all of them.
User Insights & Research
Usability testing with real stores
Sessions with small business owners showed what the dummy stores had hidden. People didn't want to learn the integration or scroll through their own product data. They wanted to see that the AI could handle it, and one real result reassured them more than any explanation. We saw the same thing across all of ditto's trust work.
Looking at other tools
I also looked at how content marketing and editing tools deal with heavy processing. The good ones keep it out of sight and reveal the interface a piece at a time, and that shaped the redesign.
Competitive research and user insight mapping
UX Process & Iterative Design
Starting over
Patching wasn't going to work, so I redesigned the integration end to end. In a two-person company that wasn't a free decision. I had to argue for a rebuild with the developer who'd do it, my co-founder, and convince him patching would cost more in the long run.
Processing in the background
Inventory processing moved entirely behind the scenes. Users saw the result, not the work.
Onboarding while the AI works
Onboarding was restructured so users could start their first campaign while the AI was still crunching their store data. Tutorials appeared only where they helped.
Information on demand
Product data only appeared when a task needed it: the basics first, more detail on request. That kept the interface manageable however large or messy the store behind it was.
Testing against the mess
From then on, every iteration was tested against real store data. We didn't go back to dummy inventories.
Redesigned integration flow
Results & Impact
ditto was small enough at this point that I watched every store connection myself, so I don't have dashboard percentages.
Store owners who had been abandoning the integration started campaigns within minutes of connecting. The feedback changed too. People stopped asking whether the AI understood their products and started talking about the content it made. And because the new setup no longer depended on how large or messy a store was, the fix held as inventories grew.
Final integration screens
Key Learnings
Our dummy stores were small and well organised, nothing like the businesses we were building for. Testing with real store data from the start would have saved weeks of rework, and I haven't trusted clean test data since.
