Webplatform, Design System

ShopPad: MESA

ShopPad is the largest developer of high-quality solutions for the Shopify and Shopify Plus eCommerce platforms.

MESA is a stand-alone application that helps store owners create workflow automation for scaling their businesses.

Project Goals

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.

User research
Product strategy
UI/UX Design

Deliverables

Design system
Product design

Link

www.getmesa.com

Year

The Challenge

There were three layers of challenge in this project, started from UX fundamental improvements to incorporate new features and utilize Shopify's Polaris design system.

Improving field token selection

A field token is a representation of field data used to structure and connect data in Shopify orders and workflows. While technical merchants had no problems with the UX of using field tokens, typical merchants were less tech savvy and usually had difficulties understanding the concept and how to use field tokens. I simplified the field token selection experience by introducing a side sheet that:

• Prioritized recommendations based on the selected field
• Hierarchical structure to progressively reveal field tokens by category and type
• Contextual education on token organization and descriptions to help users make informed selections

Streamlining automation step configuration

Automation builder new features and UX improvements based on merchants' feedback:

• Reduced footprint of automation step cards in minimized “read” state and expanded “edit” state
• Simplified UI and interactions for steps requiring multiple sub-step configurations
• Launch of loops (new feature)
• Automation testing and troubleshooting

Improving discovery of automation template

I established designs that would promote discovery and better showcase the benefits of automation to new and advanced users.

MESA Analytics (new feature)

This new feature will help not only the MESA team to improve or expand their features but also their merchants will clearly see the opportunities and difficulties in their online businesses.

Combination of Polaris DS & new, custom DS

I worked on coherence between Shopify's Polaris design system and newly branded local components to achieve a better user experience and consistency inside the product but also between the marketing website and the app.