Webplatform
ShopPad: MESA
ShopPad is the largest developer of high-quality solutions for the Shopify and Shopify Plus eCommerce platforms. MESA is a standalone application that helps store owners create workflow automations for scaling their businesses.
In May 2026, five years after the design was completed, ShopPad launched MESA AI on Product Hunt. It ranked #3, beating ChatGPT 5.5. The original design system held. Scott Perket, CEO of Forge Studio: "Awesome to see a product we designed almost 5 years ago continue to evolve without the design changing much at all."
Project summary
To transform the successful MESA Shopify app into a standalone product, I led the transition from Shopify's Polaris Design System to a custom design system. This involved zero-to-one development of new features and ongoing UX improvements driven by customer feedback, ensuring a seamless user experience and a distinctive product identity.
Expertise
Header 4
User research
Product strategy
UI/UX Design
Deliverables
Design system
Product design
Link
Year
2021 - 2023
2021 - 2023
The Challenge
Three layers of challenge ran through this project: fundamental UX improvements, incorporating new features, and transitioning from Shopify's Polaris design system to a custom one that could support MESA as a standalone product.
Improving field token selection
A field token represents field data used to structure and connect information in Shopify orders and workflows. Technical merchants had no difficulty with the existing UX, but less technical users struggled to understand the concept and how to apply it. I simplified the field token selection experience by introducing a side sheet that:
- Prioritised recommendations based on the selected field
- Used a hierarchical structure to progressively reveal field tokens by category and type
- Provided contextual education on token organisation and descriptions to help users make informed selections
A field token represents field data used to structure and connect information in Shopify orders and workflows. Technical merchants had no difficulty with the existing UX, but less technical users struggled to understand the concept and how to apply it. I simplified the field token selection experience by introducing a side sheet that:
- Prioritised recommendations based on the selected field
- Used a hierarchical structure to reveal field tokens by category and type progressively
- Provided contextual education on token organisation and descriptions to help users make informed selections
Streamlining automation step configuration
Automation builder improvements and new features, developed in response to direct merchant feedback:
- Reduced the footprint of automation step cards in the minimised "read" state and expanded the "edit" state
- Simplified UI and interactions for steps requiring multiple sub-step configurations
- Launch of loops as a new feature
- Automation testing and troubleshooting
Automation builder improvements and new features, developed in response to direct merchant feedback:
- Reduced the footprint of automation step cards in the minimised "read" state and expanded the "edit" state
- Simplified UI and interactions for steps requiring multiple sub-step configurations
- Launch of loops as a new feature
- Automation testing and troubleshooting
Improving discovery of automation template
I designed experiences that promoted discovery and better showcased the value of automation to both new and advanced users, making it easier to find relevant templates and understand their application before committing to a workflow.
MESA Analytics (new feature)
A new analytics layer giving the MESA team and their merchants visibility into what was working and where friction existed. Merchants could clearly see opportunities and difficulties in their online businesses, turning usage data into actionable insight.
Combination of Polaris DS & new, custom DS
I established coherence between Shopify's Polaris design system and newly branded local components, achieving consistency inside the product and between the marketing website and the app, while giving MESA a visual identity distinct from the broader Shopify ecosystem.
More projects
Cardinal
A product visibility and decision-making tool built during Y Combinator's Winter 2023 cohort. Designed the core product from early stage through acquisition, shipped fast, iterated on real user feedback, and built something worth buying.
Design Systems
Design systems work across fintech, web3, gaming, and enterprise platforms. Each project is different: different team size, different maturity, different constraints.