Research
I designed a multi-source research strategy to build data-driven conviction around both the problems and opportunities.
Support ticket analysis revealed quantified patterns: "can't find my metafield" appeared in hundreds of monthly tickets, along with "selected wrong type" and "too complicated." These weren't isolated complaints but systemic issues affecting merchant workflows daily.
Plus merchant interviews specifically targeted merchants at the scaling edge case. I worked with MSMs to connect with merchants managing 30-50+ metafield definitions. These interviews revealed breaking points: merchants used spreadsheets to track field purposes, created elaborate naming conventions to simulate grouping, and many avoided metaobjects entirely due to creation complexity.
Usage data analysis provided behavioral validation. Working with data science, I analyzed field type usage across thousands of stores. The finding that 93% of "file" type usage was for images only proved merchants didn't understand the type system at all. List fields were consistently underutilized despite being essential for many use cases.
Competitive analysis of WordPress Custom Fields, Contentful, and Airtable showed all used human-friendly type names ("Image" not "File with validation"). Most provided inline creation for related objects, but none had solved the scaling organization problem elegantly. This revealed an opportunity to leapfrog competitors.
Three distinct user types emerged, each with different needs:
Non-tech merchants (60% of users) needed clear explanations and visual guidance. Technical terminology and hidden controls created fear of breaking things. Type presets and inline help would serve them best.
Some-tech merchants (30% of users) wanted efficiency without hand-holding. Slow workflows and inability to organize at scale frustrated them. Custom grouping and search would unlock their productivity.
Developers (10% of users, high impact) needed flexible, powerful controls with API parity. UI limitations forced them into API workarounds. Advanced settings and batch operations were essential for this group.
"I have 50+ metafields and can only organize 20 of them. The rest are just... there. I can't even search for them."
Plus Merchant Interview
The strategic insight: the system needed to serve all three personas without compromising any experience. This ruled out "simplification by removal" and pointed toward progressive disclosure as the foundational architecture.
Challenging Existing Standards
During research, I identified an opportunity to challenge Shopify's orthodoxy around content creation patterns. The existing metafield flow followed a "settings-first" paradigm: forcing merchants into definition setup before value creation. This made sense for simple fields but completely broke down for complex, interconnected data structures.
I pushed the team to question fundamental assumptions: Why do merchants need to understand the entire system architecture before creating their first field? This first-principles thinking led to the intent-based approach. Rather than front-loading complexity, detect what merchants are trying to accomplish and adapt the interface accordingly. Reveal complexity progressively as needed.
I also challenged the assumption that "simplification means fewer options." The type preset system proved we could add abstraction layers that serve casual users while maintaining full power for advanced users. This became a pattern applicable across Shopify's admin, influencing conversations with the Product Create team about attributes and the Storefronts team about custom data patterns.
Ideation and Design
I drove design strategy through rapid, prototype-driven exploration, prioritizing learning velocity over perfect solutions. Rather than prescribing solutions upfront based on assumptions, I set a fast pace through weekly iterations that tested fundamentally different approaches.
Exploration velocity:
- Week 1: Separate page vs. modal patterns (tested with engineering)
- Week 2: Type organization strategies (categories, frequency, recommendations)
- Week 3: Grouping paradigms (folders, tags, custom groups, auto-generation)
- Week 4: Relationship visualization concepts (lists, graphs, hierarchies)
I built multiple interactive prototypes using React Flow, Figma, and quick.shopify.io. These weren't polished mocks; they were thinking tools that let the team experience trade-offs directly. This experimental approach let us fail fast on approaches that didn't work (like separate pages creating state confusion) while doubling down on patterns that felt right (intent-based modals).
Working closely with engineering throughout exploration ensured technical constraints informed design decisions early, not as late-stage compromises. This collaboration surfaced the insight that modal patterns already worked well in products and segments, pointing toward an established solution rather than inventing new navigation.
Three Strategic Principles Emerged
I didn't prescribe these principles upfront. They emerged from asking "why does this feel wrong?" and iterating until patterns became clear.
1. Maintain Context Through Intent-Based Flows
Early prototypes explored both separate pages and modals. Testing revealed a critical insight: merchants lost their place when bounced to separate screens. They couldn't remember what they were creating or why.
The breakthrough came from studying existing Shopify patterns. Products and segments successfully used modals for inline creation, maintaining context while enabling focused work. I advocated for adopting this proven pattern rather than inventing new navigation paradigms.
Design decision: Intent-based modal flow that detects when merchants are creating relationships (not just fields), opens contextual creation modal pre-populated with their input, includes one field by default as a starting point, and auto-connects upon save, eliminating manual linking steps.
This wasn't just a UI pattern; it was a strategic shift toward understanding merchant intent and adapting the interface accordingly.
2. Reduce Cognitive Load with Progressive Disclosure
The existing system showed all 30+ field types upfront with technical names. I hypothesized that most merchants used a small subset repeatedly, while the full complexity overwhelmed newcomers.
Rather than simplifying by removal, I designed a two-layer architecture: human-friendly "type presets" that auto-configure common patterns, with the full type system accessible via advanced settings. This approach served both casual users and power users without compromise.
I designed the preset system to include organized categories (Text, Media, Numbers, References, not alphabetical chaos), smart naming ("Image" instead of "File (validation: image)"), auto-configuration (presets include validation rules, list handling, and defaults), contextual recommendations (system suggests relevant presets based on field names), and progressive access ("Show all types" reveals the full system when needed).
The strategic value: This architecture allowed us to continuously add presets based on usage patterns without cluttering the interface. It's an extensible system for growth, not a one-time simplification.
3. Enable Scale Through Flexible Organization
Research showed the 20-pin limit was the breaking point where merchants gave up on organization. But simply increasing the limit wasn't enough. I needed to understand why merchants organized fields.
Through interviews, I discovered merchants organized by role (fields relevant to web designers vs. merchandisers), source (app-created vs. manually created), status (filled vs. empty, show me what needs attention), and purpose (internal tracking vs. customer-facing data).
Rather than prescribing one organizational system, I designed flexible custom grouping that adapts to merchant mental models.
The grouping system includes custom groups (merchants name and organize groups however they want), auto-generated groups (system creates useful defaults like Filled, Apps, Namespaces), multi-select bulk actions (add 20 fields to a group in one action), search across all groups (find fields regardless of organization), and collapsed by default (reduce visual noise until merchants need focus).
Strategic insight: Organization isn't about hierarchy; it's about focus. Different people need to see different subsets of the same data. Custom groups enable team workflows, not just individual preferences.
Advocating for Transformation Beyond Scope
The initial project brief focused narrowly on creation flow improvements: fixing fragmentation and reducing friction. But during exploration, I identified a deeper opportunity that would require taking a risk: what if we fundamentally changed how merchants understand their data structure?
I advocated for going beyond the brief to include relationship visualization, a feature that wasn't requested, wasn't scoped, and would require significant engineering investment.
Building the Case Through Prototyping
Rather than proposing this conceptually, I built an interactive React Flow prototype demonstrating DAG (Directed Acyclic Graph) visualization. The prototype showed metafields and metaobjects as connected nodes, similar to Shopify's Markets platform.
The prototype let stakeholders experience the concept: click a product to see all connected metafields, click a metaobject to see incoming references (back-references), visualize depth and complexity through connection density, and navigate hierarchies by drilling into relationships.
Influencing Leadership Through Storytelling
During the leadership review, I presented this as more than a feature. It was a mental model shift that would unlock understanding at scale. I connected it to leadership's existing vocabulary:
"This is how you got Toby on board with metaobjects originally, with a graph showing relationships. Merchants need that same clarity."
The response was immediate. Leadership recognized this as transformative and allocated resources for Phase 3 exploration.
I positioned it strategically: not competing with immediate Milestone 1/2 deliverables, timeboxed to 2 days to limit investment while validating feasibility, and leveraging existing Markets DAG patterns (proven solution, not net-new invention).
I also built the business case: merchant value (eliminates "where is this used?" support questions), platform value (enables complex use cases like nested metaobjects, circular reference detection), educational value (makes the system teachable, show don't tell), and competitive differentiation (no other platform visualizes custom data relationships).
Result: What started as a creation flow project became a comprehensive vision for metafield/metaobject management: creation, organization, and understanding. The DAG visualization represented the "50% better" transformation leadership was looking for beyond incremental improvements.
Phased Strategy
Milestone 1 (Q3 2025): Intent-based flows, type presets, streamlined configuration
Milestone 2 (Q4 2025): Custom grouping, advanced filtering, bulk operations
Milestone 3 (2026): DAG visualization, impact analysis, smart recommendations
This approach validated direction incrementally while building toward transformative vision. I also identified patterns from this work that could improve other Shopify workflows and documented them to raise the bar beyond this project.
Final Designs
I maintained pixel-level quality throughout, ensuring every interaction felt polished. The unified creation modal demonstrates attention to micro-interactions: context preservation, smart defaults, progressive disclosure, and clear affordances.
Type preset organization used semantic categories (not alphabetical), visual icons for instant recognition, and adaptive ordering based on usage patterns.
The custom grouping interface solved complex layout challenges across screen sizes while maintaining full functionality. I provided comprehensive documentation covering interaction states, responsive behaviors, animation timing, and accessibility requirements, accelerating implementation and reducing back-and-forth.
Outcome and Reflections
The project transformed metafield creation from a fragmented, confusing experience into a scalable system built on strategic principles discovered through exploration. More importantly, it established patterns and precedents that improved Shopify's admin experience beyond custom data, demonstrating system-level thinking that considers local decisions in their broader context.
Impact
Creation efficiency (direct project outcomes):
- 8 steps instead of 12 for creating metafields with new metaobjects (33% reduction)
- Zero tab-switching during creation flow (eliminated context loss)
- Zero information retyping (system carries context forward)
- 60% fewer validation configuration steps (presets auto-configure)
Scale enablement (unlocking merchant growth):
- Infinite grouping capacity replacing rigid 20-pin limitation
- Custom organization adapting to merchant mental models (not prescriptive systems)
- Search functionality across all fields regardless of organization
- Auto-generated smart groups reducing manual categorization burden
System-level impact (beyond the project area):
- Progressive disclosure pattern adopted by Product Create team for attributes
- Intent-based modal flow becoming standard for relationship creation across admin
- Type preset architecture informing discussions about simplifying other technical systems
- Cross-team alignment on custom data strategy (attributes, metafields, metaobjects)
Platform health improvements:
- Unblocked Markets expansion (complex GRC generation was blocked by creation complexity)
- Enabled app ecosystem growth (clearer relationships improve integration confidence)
- Reduced support burden (quantified through ticket analysis post-launch)
Key Lessons
Challenge orthodoxy through first-principles thinking: I questioned the fundamental assumption that merchants needed to understand system architecture before creating fields. This led to intent-based flows that detect what merchants are trying to do rather than forcing upfront planning. This principle initially faced pushback ("merchants need to understand the system"), but research validated that progressive disclosure serves more users better. The 93% stat (file fields for images only) proved merchants don't naturally think in system terms.
Strong opinions, loosely held: When engineering suggested modal patterns, I pushed back with separate page explorations. After implementation revealed state confusion issues, I quickly pivoted based on the critique, demonstrating flexibility while maintaining conviction. I also provided constructive critique to product on the initial brief: "This is incremental. What would 50% better look like?" This pushed the team to think bigger while maintaining pragmatic phasing.
Be resourceful and self-reliant: Rather than waiting for engineering resources to build prototypes, I learned React Flow and built interactive DAG visualizations myself. This demonstrated important work at a fast pace while making abstract concepts tangible for stakeholders. I also proactively pitched the DAG visualization feature based on user needs I uncovered during research, not because someone asked for it. This showed ownership beyond assigned scope.
Own success beyond your area: I recognized this project's patterns would benefit other teams, so I documented progressive disclosure principles for reuse, collaborated with Product Create on attributes strategy, shared learnings with Markets team about DAG patterns, and influenced cross-team discussions on custom data future. This demonstrated taking responsibility for the success and quality of UX beyond my project area, thinking about platform health, not just local optimization.
What's Next
Q3 2025: Milestone 1 ships with early adopter testing
Q4 2025: Milestone 2 development and validation
2026: Milestone 3 exploration (DAG visualization, smart recommendations)
The vision: enabling merchants to understand and leverage complex custom data structures as easily as they manage products today.
