Optimising ditto's Shopify UX
When controlled tests met the real world, redesigning a Shopify integration that collapsed under actual user data, and what that taught me about testing in authentic environments.
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
- →Reduced abandonment caused by product data overload during onboarding
As the sole UX designer for ditto, I led the integration process with Shopify. Initially, this integration appeared straightforward, but real user testing quickly uncovered critical flaws in our approach. These issues emphasised the necessity of testing designs in authentic, complex user environments rather than relying solely on simplified, controlled data.
The Challenge
Our initial tests used carefully organised dummy Shopify stores. Internally, everything functioned smoothly. However, integration with real user stores immediately surfaced significant issues:
- Large product inventories caused system overloads and crashes.
- Poorly categorised and inconsistently named products confused our AI, obstructing effective automation.
- Displaying extensive product data during onboarding overwhelmed users, resulting in high abandonment rates.
These challenges revealed a substantial gap between idealised testing conditions and the messy, unpredictable nature of actual user environments.
User Insights & Research
Targeted Usability Testing
Through focused user sessions with small business owners, I gained insights previously hidden by sanitised testing. Real users prioritised intuitive experiences that immediately demonstrated value, without heavy learning demands or unnecessary detail. They sought reassurance of AI competence through tangible outcomes rather than extensive explanations or overwhelming product data.
Cross-Industry Research
I examined successful examples from content marketing and editing tools, which balanced complexity behind the scenes with intuitive, progressively disclosed user interfaces. This research inspired my approach to managing complex information and background processes.
UX Process & Iterative Design
Fundamental Redesign
Instead of minor adjustments, I rethought the integration process entirely, emphasising simplicity, progressive disclosure, and contextual relevance.
Background Processing
I designed a background AI processing architecture that silently handled complex inventory data. This transformed a technical constraint into a smooth user experience benefit by keeping intricate details invisible to the user until necessary.
Tutorial-Based Onboarding
I restructured onboarding to emphasise immediate usability. Users could quickly begin crafting their first campaigns while AI processed data quietly in the background. Contextually relevant tutorials appeared only when helpful, ensuring onboarding was informative without being intrusive.
The design rationale: trust and confidence in AI were built through visible competence, not overwhelming explanation.
Contextual Information Presentation
To avoid overwhelming users, detailed product data appeared only when directly relevant to their current tasks. Basic information surfaced first, with deeper details accessible on-demand. This approach kept the interface clean, intuitive, and manageable.
Iterative Testing and Refinement
Throughout this redesign, I continually tested using genuine user data. I observed task completion and behaviours closely, prioritising practical outcomes over stated user preferences alone.
Results & Impact
Enhanced User Experience. The redesigned integration transformed user experiences from frustrating and confusing to intuitive and productive. Users could initiate campaigns within minutes, significantly reducing abandonment rates.
Improved Confidence and Engagement. User feedback highlighted increased trust in ditto's AI capabilities. Users appreciated that complex data management occurred seamlessly in the background, boosting their overall satisfaction and engagement.
Robust Technical Foundation. The new architecture was scalable, efficiently handling diverse store sizes and product complexity without performance degradation.
Key Learnings
The most important lesson from this project was the danger of controlled testing. Our dummy stores were too clean, too well-organised, nothing like the real businesses we were building for. Moving to live user data earlier would have saved weeks of rework.
The broader principle applies everywhere in product design: the gap between how you think users work and how they actually work is almost always larger than you expect. Building for the messy real world, not the idealised version, is the job.
