Metafields for Merchants
Challenge
Metafields are custom data fields associated with objects in Shopify. They unlock the ability to add additional information about Shopify resources like products and collections, however metafields were purely API based.
There were many customer pain points captured for metafields, but the team was made up of backend developers working on the API part time. They were curious what they should focus on next and what merchants wanted from an API, and brought me on to the team.
My Role:
Design Strategy | User Research | Prototyping | Interaction Design
Employer:
Shopify
Process
DISCOVERY
I ran a “questions and assumptions” workshop with the product manager and developers, and we identified a few areas to explore. Why do merchants want to create and edit metafields? How are they doing this today? What are they using this data for?
I worked with a data scientist to investigate the current usage trends. Merchants in the 99th percentile of metafield creation made up 90% of usage. Merchants who use metafields use them a lot, almost daily.
Next, I conducted a qualitative user research study of over 20 participant interviews (metafield users) and identified two unique types of people who need to use metafields:
- Store builders: people who set the store up with products, orders, etc. and write Liquid code for the online store or backend code to sync with data sources.
- Store managers: people who add products, manage, and maintain the store. They need to update data in Shopify for new products and orders.
WIREFRAMING & MAPPING
Many conversations in the early phases of the project centered around how to present metafields in an understandable way. Should we use developer-centric language or try to simplify the concept?
In addition to designing various parts of the interface, the team needed to align on the data types to offer, and how this data would be managed. I worked with engineering to ensure we had a common language and structure for our data model.
FINAL DESIGNS
Many software platforms have concepts of custom data models and objects, but these can be abstract and hard to understand for a non-technical audience. After creating some initial prototypes, I ran a task based usability test on early prototypes with both expert and novice users (15 participants). Our study findings found technical merchants loved the metafields, novices could not see the value until they saw an example. So I proposed the concept of “smart defaults” that map to real world use cases, to help merchants understand how to use these fields. For example, in addition to the data type number, we offered product dimensions, which allowed merchants to see a concrete way numbers could be used.
Final designs for editing metafields. The pattern was used on any object within the Shopify Admin.
Final designs for creating metafields. Use case based "smart defaults" can be selected.
OUTCOMES
This project shipped at the Unite Conference in 2021 and released GA shortly after, unfortunately I left Shopify before I could gather quantitative usage data. This project has a large impact on all of the Shopify areas – from admin to online store editor, influencing how themes handle data.
It fixed many customer pain points and got highlighted internal and externally by the CEO. Metafields and metaobjects are now leveraged as the content source for online stores.
TAKEAWAYS
- If I could redo the project, I would have found my influential advocates earlier. Alignment across teams took a long time.