TARIFF GUIDE is a public-facing tool built to help merchants importing products into the United States quickly find applicable tariff rates and HTS codes for their goods.

The problem

In February 2025, new tariff announcements in the United States created widespread disruption and uncertainty for small businesses.

More than half of Shopify stores (56%) are based in the US, which meant many of our merchants were directly affected. The uncertainty surrounding tariff classifications added strain to already tight financial conditions.

At the time, finding the correct tariff rate required manually combing through complex government websites, staying up to date with changing regulations, and already knowing the correct HTS codes.

These codes determine how much a merchant pays in import taxes, whether trade restrictions apply, and if products qualify for reduced rates under certain agreements. Having this information upfront helps merchants estimate costs accurately, price products fairly, and avoid customs delays or penalties.

Goals

Shopify’s COO requested a public-facing tool that could help merchants identify tariff rates quickly. It would not be locked behind a Shopify login but would still be built by Shopify. This gave the team freedom in both visual design and branding while allowing the tool to exist as a standalone resource for all merchants.
‍
The project was time-sensitive. The team needed to launch it before Shopify’s next earnings call to demonstrate that we could move quickly to help merchants respond to global trade changes.

Our goals were to:

• Help merchants get an idea on import costs and avoid compliance issues through a tool that is simple to use.
• Strengthen Shopify’s reputation as a partner that supports merchants through confusing or uncertain times.

The design principle was to make the experience simple, direct, and fast. That also meant having a straightforward flow:

• The user lands on the site.
• They enter their product description and country of origin.
• The tool provides the applicable tariff rate and HTS code.

The innovative difference in our tool was that it was also powered by a large language model (LLM) to make sure information was up to date. 

Piloting a new process

Our product manager first drafted the concept using ChatGPT, and I refined it into wireframes in Figma, starting with a simple form layout. Around this time, Shopify was introducing the use of AI tools to speed up our process. This project felt like the perfect opportunity to experiment with vibe-coding, so we used v0 to prototype page flows and align quickly with stakeholders before finalizing designs in Figma.

Challenges

While prototyping, we learnt that even after entering a product description the LLM often required additional context to return an accurate result. To solve this, we added a refinement step where merchants could choose the best match for their product. This improved accuracy while keeping the experience intuitive and simple.

Design considerations

Since the tool was powered by an LLM, we drew inspiration from the conversational simplicity of chat interfaces. That became the foundation of our design system.

The tool did not need to follow Shopify’s standard branding, so we explored a lighter and more approachable visual style with rounded colours and soft shadows. Color was used to signal system activity, such as when the model was processing and moving to the next step.

While designing, we wanted the experience to feel fast, mobile-friendly, and easy to adjust:  

• We made sure users could easily return to previous steps to make edits
• The interface was optimized for mobile since many merchants check updates on the go
• Smooth transitions and micro-interactions made the tool feel responsive and modern
• Using plain, comprehensible language was key

I also designed a custom logo featuring a compass to symbolize guidance and direction. The compass represented pointing merchants toward clarity during a time of uncertainty.