Tangerine's tax experience re-imagined.

Preparing for tax season is never fun. Tangerine's existing tax experience was cumbersome and resulted in a high volume of clients calling customer service for help. I was the design-led on this project from conception to launch. 

Main Contributions

+ UX Design Lead

+ Concept ideating

+ Prototyping

+ Responsive design 

Year

Client

Deliverables 

2018-2019

Tangerine

+ High-fidelity Invision Prototype

+ Integration/deployment strategy

Who is Tangerine?

Tangerine is a digital-only bank based in Toronto, Canada. Tangerine is passionate about helping clients live better lives by providing world-class banking tools. Artefact provided design consultant and creative direction for Tangerine for over 4 years.

In a nutshell

Tangerine customer service was overwhelmed by customers calling in to ask about tax statements (In Canada tax statements are called tax receipts). Clients were calling customer service frequently to find out when their tax receipts were ready, and often asked for a tax receipt that they never qualified for the first place. Artefact and Tangerine's  Design Strategy team worked together to reimagine how Tangerine can better support their clients in preparation for and during tax season. 

Let's take a look.

In order for Artefact to best support Tangerine in its effort to revamp their tax experience; we worked closely with Tangerine research to see what were the gaps in the existing experience. From user research, the Artefact team gleaned that the greatest opportunity was in the tax statements collection phase. For this project, we focused primarily on how clients view and download their tax receipts. 

The current tax experience had a couple of key issues that had to be addressed in the re-design including:

  • Generated tax receipts had the same name. Clients were not able to differentiate them from one another. 

  • Clients were very confused about what each tax receipt did, and how they were supposed to use them. 

  • Only primary account owners received a tax receipt, but that was never explained. This resulted in joint account owners to think that they're missing a tax receipt. 

Existing Tax Receipt page 

Process

Following customer insights from Tangerine's research, the team set out to conceptualize improvements. Throughout this project, the design team collaborated with Tangerine's in house marketing and research team to clearly understand user needs and Tangerine's in house development team to prioritize design features. 

I helped the design team to define what to focus on by distilling all insights into 3 key opportunity areas.

1

Help clients prepare

How might we help our clients be more prepared for tax season so that when tax season comes they are not scrambling?

2

Help clients find reciepts

How can we help clients find missing tax receipts, so that they are not flustered by the  looming tax deadline?

3

Help clients understand

I a client did not qualify for a tax receipt, how can we help them understand why they didn't so that they don' t need to waste their time calling into Tangerine's customer service. 

Early concepts

To help clients prepare for tax season I looked at different notifications or CTAs that can let clients know when tax season is here. 

Seasonal Buttons

What if there was a seasonal button that appeared on a client's homepage when their receipts were ready? This idea was quickly rejected because changing a client's homepage deemed disruption to a client's experience. 

Clear labels

I knew that clients were not thinking to click 'Statements' to get to tax receipts based on existing homepage metrics. I considered updating the label so that 'Documents' were also included. The team decided that adding to the button label was not sufficient to inform a client that their receipts were ready. 

To help clients find their tax receipts, I prioritized updating how receipts were organized on the tax receipts home page. My assumption is that the hero experience was the tax receipts home page, and this page had the most potential for positive impact on a client's experience. 

Receipts grouped by account type

On default, all tax receipts are in a collapsed accordion state. Receipts are organized by bank account. After meeting with tax experts at Tangerine the team learned that tax receipts are not organized this way. I learned that clients only received one tax receipt type per entire account. 

Expanded State 

Tax receipts distribution chart 

To help clients find missing receipts we initially looked at a tax receipt request tool. We found out later that most clients looking for a tool never qualified for one to start with. It was very rare that there was a truly missing receipt! 

UX Map of full tax receipt request tool

Final concepts

1

How might we help our clients be more prepared for tax season so that when tax season comes they are not scrambling?

From existing clients' frequent calls to Tangerine's call center we knew that clients often felt unprepared for tax season. The team wanted to prevent clients from feeling unprepared, and possibly miss the deadline for filing their taxes. 

Final recommendations include 

  • Seasonal notification banner on the homepage

  • Tooltip and Insights integration to increase awareness

Utilizing insights space to notify clients

Seasonal banner 

Tooltips is an existing feature within Tangerine's design system.  

2

How can we help clients find missing tax receipts so that they are not flustered by the looming tax deadline?

At the core of this design challenge was the need to organize a client's tax statements; in a way that was easily understandable for the client. Clients needed to find what they came here for, and easily understand what tax statements were related to which accounts. 

Tax receipts are organized with clear descriptions. 

Tax receipts are arranged in a table. All receipts are shown. If a tax receipt is not ready the date in which it will be read is shown. Receipts that are not applicable to clients are shown too.

Retrieval Modal 

All download-able tax receipts are displayed in a modal, with detailed account information such interest earned displayed. 

3

If a client did not qualify for a tax receipt, how can we help them understand why they didn't?

Clients frequently reported that they were missing a tax receipt - when they actually didn't qualify for the tax receipt to begin with. This new feature is a self-diagnostic tool for clients to help them understand why they didn't qualify for a statement; saving them the need to call into Tangerine's call center. 

Contextual Information 

Clear explanation for 'missing' receipts 

A new tax experience 

Teach me about tax

What is each tax receipt used for? Should I be worried that I didn't get one? Key education information regarding specific tax receipts and how they should be used is located on the tax landing page. 

Help me understand, so that I don't have to call in

Each call received in Tangerine's call center cost $10. We knew that clients called in often to ask for missing receipts. What we discovered was that most clients were not qualified for that receipt in the first place. This self-diagnostic tool is designed for clients to learn why they didn't qualify for a receipt and to prevent calls to Tangerine's call center. 

Tangerine's design system

Tangerine has a robust, thorough design system. Tax receipts followed Tangerine's design system closely. Examples of correct feature implementation include: 

Accordion Spacing 

Separate table categories never touch. 

Tool-tips 

Tooltips should never re-state descriptions. The correct tooltip pattern is redlined above. 

Modal layout and spacing 

All modals used in the tax receipt experience adheres to Tangerine's design system. 

Responsive Considerations

Throughout the design process, all responsible modes of tax receipts were considered. Tangerine's platform includes web browsers, mobile web, and native app. 

What we learned

Throughout the design process, all responsible modes of tax receipts were considered. Tangerine's platform includes web browsers, mobile web, and native app. 

1

Ask yourself why a user might be experiencing a pain point.

The challenge presented to the team at the beginning of the project was that Tangerine's customer service was inundated with calls from clients who had missing tax receipts. Time was spent creating solutions to help clients find tax receipts. It was much later that we learned that the clients who thought they had missing receipts never should have gotten one in the first place. We changed gears to help clients understand why they didn't qualify for a tax receipt to start with. 

2

Features within a solution need to be prioritized in order for development feasibility. 

When developing features we need to carefully consider the dev cost of each item. Does the impact of the feature warrant the cost? Consider how much code can be reused from the previously existing tax experience. When considering each feature we need to prioritize it so that development can understand which items are low hanging fruit, and which ones are just nice to have.