Business Owner

User Experience Design For Customer Tax Exemptions

Shopify is a commerce platform that enables merchants to sell to their customers on multiple sales channels both online and in person.

THE PROBLEM

The existing checkbox made it impossible for merchants to accurately collect tax on orders placed by their customers with tax exemptions.

After receiving various support tickets around the limitations of the existing customer tax exemption feature, the project manager decided this would be the problem we solve for.

Edit Customer Settings

THE PROCESS

We used the design thinking framework to approach this problem.

MAJOR PAIN POINTS

To comply with tax laws and regulations, merchants were forced to endure costly workarounds every time their tax-exempt customers placed orders.

Since the product wasn't set up to deduct specific kinds of sales tax, the only way to accurately collect tax on orders from customers with specific tax exemptions was to do so manually.

 

This was time-consuming for merchants and made their tax reports inaccurate. On top of that, these workarounds resulted in a clunky customer experience for their buyers, as shown in the two examples below:

Customer is tax-exempt checked:

Pay the customer’s sales tax

The tax was completely removed from the order. When remitting to the government, merchants paid for the percentage of tax that should have been applied to the order.

Collect too litter and lose money

Customer is tax-exempt not checked:

Refund for over-charging customer

The full tax amount was applied to the order. The merchant would calculate the percentage that should have been exempted from the order and refund it to the customer.

Collect too much and lose time!
User experience designer in front of whiteboard

MY ROLE

As the product designer, I created the end-to-end experience so it seamlessly integrated into Shopify's existing responsive web and native mobile apps.

 

MY RESPONSIBILITIES

  • Creation of UX design assets 

  • Facilitation of design critique

  • Conducting usability tests

THE TAX TEAM

INTERESTING FACTS

This project took 13 weeks to design and ship. I was part of the in-house R&D team.

TEAM ROLES

  • Product designer

  • Product manager

  • Product support

  • 4 Engineers

KEY GOAL

Make it easy for merchants to process orders from their tax-exempt customers.

Together, we improved the customer tax exemption experience within Shopify’s web and mobile apps. 

Tax Exemption UI

​We worked in one-week sprints, both in-person and remote. Like any great team, we had ups and downs throughout the process.

 

Our weekly retrospective meetings helped us continually improve and build trust. We found ways to celebrate our wins and have fun along the way as we shipped product features that improved the experience for merchants and their customers.

SETTING THE SCOPE

We decided the first release of this feature would focus on merchants with customers in Canada

Each country has its own set of tax rules so it would take a long time to figure out all the customer tax exemptions in the world.

 

In order to deliver value quickly, we decided the first release of this feature would focus on Canadian customers only. Especially since most support tickets were coming from these specific merchants.

This approach allowed us to deliver value and get feedback as we continued to design and implement this feature in other countries.

 

However, it also placed some interesting constraints on the project. We would need to keep the "customer is tax-exempt" functionality for those who are using it for customers outside of Canada.

To stay consistent with our merchant's mental models, we opted to keep this feature on the customer profile page for now.  

4 personas emerged from the journey map & secondary research

Secondary research included data from support tickets and past merchant interviews conducted during a past project regarding Canadian taxes.

PERSONAS.png

We identified assumptions we had that informed the design and required further user research.

Personas helped identify key user flows

Tax exemption user flows

Based on the user flows I explored various concepts of key screens with low-fi wireframes

The wireframes were built in Sketch and exported to InVision clickable prototypes to gather feedback from merchant facing teams and stakeholders.

Tax exemption wireframes

I turned two concepts into clickable wireframes to get early feedback from merchant facing teams

User Research Session

Usability testing with merchants validated assumptions and identified some UI issues to solve for the first release

Options are Overwhelming

Tax Exemption UI Conecpt

"I sell to resellers and I charge GST and they have to claim it back. I wouldn't want to be on the hook for them not paying their taxes."

"There's no fishery that buys from my store. This might be overkill."

Tax detail card is benefical

Tax Details UI Concept

“If we get audited, which we have, this makes it easier for us to explain why there's a tax exemption for each person.”

Annotated user flows helped streamline implementation

uxflowspecs.png

Considering various scenarios makes it clear to engineers how the components function based on store settings

Edge case documentation

THE OUTCOME

BEFORE

Merchants couldn't accurately collect tax from exempt customers.

Before Experience

AFTER

Merchants can accurately collect tax from exempt customers in Canada.

After Experience

Below are videos of interactions within the live product:

Like what you see?

Let's chat.