Senior UX Designer
Integrate with Shopify to streamline fulfillment and provide flexible shipping methods for jewelers
UX, Marketing, Engineering, Product, Legal, Copy
Background
JM Shipping Solution is a shipping + insurance SaaS product part of the Zing Marketplace. An authenticated platform made to help jewelers run their business by offering several different services.
My Design Framework
I follow this design thinking process to discover, ideate, define, prototype, and test solutions to find what best solves the problem.
1
Frame the Opportunity
Clearly define the problem/opportunity
2
Understand the User
How do they work?
Why do they need this?
What do they really want?
3
Explore Design Options
What happens today?
What happens if..
4
Define the New Concept
Clearly define the solution and the impact it will deliver
5
Create a prototype
Visualize the idea for the user
6
Validate with Users
Test the concept with real users
The Problem
Jewelers faced a disjointed and manual process for handling fulfillment on shipping and insurance for jewelry purchased by their customers. This led to significant operational inefficiencies, increased risk of errors, constant context switching and a time-consuming workflow for our partners.
Discovery
To kick off this project, I held several meetings with product, sales, and engineering to understand technical constraints, business goals, and gather any insight from existing customers.
The integration involved multiple technical layers—including three distinct carrier APIs, Shopify store-specific requirements, and maintaining harmony between our 2 systems: JM Shipping solution and the legacy system that powered it.
Understanding these constraints was critical to designing a solution that was both feasible and scalable.
Key takeaways from cross-functional partner insights💡
In this discovery phase, I learned that the solution was going to be an integration with Shopify. We were aiming to provide a solution to integrate JM Shipping Solution with the jewelers’ Shopify stores.
I also learned that the solution needed to be scalable to other ecommerce integrations on the roadmap. It needed to be able to fit with other similar integrations.
Business Needs JM Shipping Solution
Expand market reach by integrating with Shopify
Enhance satisfaction and retention of jeweler partners
Offer a modern, competitive, and scalable solution
User Needs (Jeweler)
Direct integration into Shopify workflow
Reduced manual data entry for shipping insurance
Clear and easy configuration of shipping defaults and methods
Automated syncing of order data for label generation
Understanding the user through client interview
Recruiting jewelers for user testing proved challenging, as our testing platform lacked this niche demographic. To gather insights quickly, I partnered with sales and account managers, who connected us with an active client. Through direct conversations, we uncovered key pain points:
Jewelers were juggling Shopify, Monday.com, and JM Shipping separately, creating a fragmented workflow.
Manual entry often led to costly mistakes in shipping details.
These insights validated the need for a unified, automated solution.
To ensure compatibility with the ecommerce store, the application needed three core sets of information. Because this was a shipping solution, the following information was needed for successful integration:
1
Origin Defaults
Company Name
Contact Name
Address
City
State
Phone Number
2
General Defaults
Cargo Type
Weight
Notification settings
Insurance Claim Reporting
3
Shipment Methods
Flat Rate
Percentage Rate
Fallback Method
Exploring Design Options
After gathering information about the project and gaining a firm understanding of the business and user needs, I began exploring different design options.
Tab #1 Origin Defaults
First tab of 3 that users need to fill out
Includes Origin information such as company name, address, phone number, city, state, zip as input fields with validation.
Reasoning for tab group
The legacy system that powered JM Shipping solution needed to save each of these areas of information separately.
It leverages existing components and patterns from the design system, breaking the user effort into three manageable parts while also ensuring development speed.
Tab #2 General Defaults
This tab covers
Cargo Type
Weight
Notification settings
Insurance Claim Reporting
Tab #3 Shipping Methods- Exploring 2 options
The first was a table layout where users would see their shipment methods laid out as a traditional table with rows. For the second option, I opted for a grid layout with cards showing the shipment methods created.
Option 1 uses a table layout to organize the content.
Option 2 uses a grid layout with cards.
I presented the 2 ideas to my stakeholders and at first they were skeptical of the card layout design. Respectfully, I pushed back and said that it would be the better choice due to the enhanced visual clarity, scannability, and it’s responsiveness to other devices. The table layout was great for desktop but failed across smaller devices, limiting jewelers in their workflow.
Testing
To ensure a user centered design, I set up 5 moderated user interviews in usertesting.com to gather insights on which of the 2 shipment method designs users would align with most.
Before
After
Results
Increase
Customer Satisfaction
-70%
Task Completion Time
Expanded
Market Reach
After launching this integration, jewelers are now able to streamline their label generation, fulfillment, and insurance workflow. Boosting customer satisfaction, reducing manual tasks, and expanding market reach for JM Shipping solution.