Product & Service Designer
Bot handover

Contact Us Platform

Streamlines the contact us experience for customers by integrating the Contact Us Platform (CUP) into QuickBooks products.

Intuit QuickBooks Contact Us Platform

How might we help QuickBooks customers quickly find the right answers to their questions?

In the previous experience, customers were directed out of the product to contact us.

In the previous experience, customers were directed out of the product to contact us.

 

Project Goals

Business goals:

  • Reduce escalations to customer service agents

  • Increase callback usage to 50% of all calls

  • Improve the call experience by providing the agent with the context and problem so they can deliver a personalized experience

Customer goals:

  • I want to self-serve (80% prefer to based on voice of the customer)

  • Know me and guide me to the channel that’s right for me

  • Streamline the path to assisted help because my time is important

Team & Role

I led the product design for the CUP integration into QuickBooks Online while juggling multiple high priority projects. I collaborated closely with two product managers, a content designer, a visual designer, and a distributed scrum team. There were multiple stakeholders and shifting priorities, but we successfully delivered the first release on schedule.

Background

CUP is Intuit’s Contact Us Platform. It intelligently routes a customer to the best channels by gathering customer information and passing it to CUP's routing engine. TurboTax was the first Intuit product to integrate CUP. The long-term goal is to integrate CUP into all Intuit products, which will replace all contact us experiences.

This case study covers the first QuickBooks integration for the Online product. I am currently working on the next integration into QuickBooks Self-Employed.

The below flow illustrates how CUP works within QuickBooks Online.

 
 
 

Design Principles

I created these design principles for QuickBooks in-product help experiences after reviewing multiple research studies and insights completed before I joined the team.

Know me

  • Know me, where I am in the product, and what I use.

  • Give me a personalized help experience.

Guide me

  • Show me and take me – don't just tell me.

  • Provide me with contextually relevant content.

Connect me

  • Be transparent and guide me to the channel that's right for me.

  • Let me choose how to engage with help.

Customer Problem Statement

  • I am a small business owner and a QuickBooks Online user. 

  • I am trying to complete an urgent task, but I am stuck and don't know how to proceed.

  • I want to find a solution quickly, but I don't know if I should search for help or call support. 

  • This makes me feel frustrated and stressed, and I am questioning my decision to purchase QuickBooks.

Design research

I joined the project a couple of weeks after the kickoff meeting, so I immediately began learning about the platform and the end-to-end experience.

TurboTax and CUP integration

One of the product managers previously built out the CUP integration within TurboTax and had strong opinions about how CUP should be implemented with QuickBooks. I investigated the TurboTax integration and spoke with their designer to better understand his design decisions and form my own POV.

TurboTax has been able to reduce their contact rate by 20% after implementing the CUP integration. They were able to increase engagement by using the accordion pattern that shows all of the steps from the beginning, which sets the right expectations for the user. Leveraging TurboTax's learnings was useful, but I recognized that the same experience might not work in QuickBooks because the products are different.

 
 
 
 

Competitive Research

I explored other company's Contact Us experience. I found inspiration from Apple, Medium, Sage, Salesforce, Squarespace, Xero, and Zendesk. I specifically looked at how they were communicating multiple phone options, how they were displaying contact us channels, and whether help articles were being shown before displaying channels.

I learned that companies are displaying separate options for call us, callback, and schedule a call. Other companies are also forcing customers to go through a long flow before displaying contact us channels. 

 
competitive analysis.png
 

 Unpacking the Workflow

The more I learned about the platform and the back-end processes, the more I discovered how complex it is to integrate CUP into a product. I started documenting the workflow to ensure that I was capturing all of the requirements. Even though the workflow is complicated, most of it is hidden from the user. 

 
 

Design Execution

Sketches

I started sketching as soon as I began learning about the platform and the end-to-end experience. Sketching helped me to unpack my understanding of the complex processes involved.

The user flow consists of three steps:

  1. Entering a question

  2. Viewing search results and contact us channels

  3. Verifying or editing contact information

sketch1.png

Wireframes

I switched to lo-fidelity wireframes when I started to explore using different interaction patterns for the CUP steps.

I collaborated closely with PM throughout the early stages of design. Creating hi-fidelity mockups enabled me to have detailed requirements discussions with PM. Discussing scope and MVP tradeoffs also resulted.

Collaborating with the Design Systems Team

When I began exploring using an accordion pattern for the Contact Us flow, I realized that the component didn't exist in the QuickBooks library and TurboTax did not have a component that we could reskin. I discussed my options with the Design Systems team, and decided to adapt the step flow component instead. 

design system office hours.png

User Feedback

Because the PMs and I didn't always agree on the ideal customer experience, I decided to get customer feedback on UserTesting.com. I had eight QuickBooks users walk through three different flows. The tests focused on validating the flow and understanding if customers wanted to view help articles while waiting for a call.

usertesting.png
 
 
I found [the new experience] to be simpler and more robust. I am more likely to use this rather than just calling right away which I have done.
— User 3, Small Business Owner

Research Findings

  • Most users expect to see multiple contact us options.

  • All users prefer to self-serve instead of having to contact us. They will view help articles if they appear relevant to their question.

  • Some users thought the experience was tedious, and they weren't sure how many screens they had to go through.

  • Search flow: Users expect that if they add more details to their question, it will improve their experience when talking to an agent.

  • Confirmation screen: Two users would keep the page open because they’re afraid of losing their case number. One user wants the case number sent in an email.

Design Implications

First release

  • Consider using an accordion or indicating the total number of steps.

  • How might we instill confidence that the confirmation page is always accessible?

  • Increase the size of the Contact us link at the bottom of an article/search results page.

Ongoing considerations

  • Display unavailable contact us channels so users know that they exist.

  • Improve search results relevancy. 

  • Create a seamless experience between the product and agent.

  • Should we consider offering callback and call us side by side?

  • Chat is the preferred option and the only channel that can stand alone.


Design Iterations

Based on the user feedback, I revisited using an accordion pattern and also explored ways to improve the separate page experience. 

iterations.png

Final MVP Designs

After multiple iterations collaborating with the visual and content designer, we finished phase one.

 

Customers seeking help will enter a search query in the in-product help panel.

The customer's search query is pre-populated in the search box. They are prompted to add more details. 

After selecting a channel, the customer is asked to verify their contact information, which is pre-populated. 

After selecting a channel, the customer is asked to verify their contact information, which is pre-populated. 

A list of search results are displayed, along with a link to Contact Us. 

When they modify their search query, second search results are displayed along with contact us channels.

When they modify their search query, second search results are displayed along with contact us channels.

Then a confirmation screen is displayed with their case number.

Then a confirmation screen is displayed with their case number.

edge cases.png
 

Next Steps

QuickBooks Online

  • Add community, email, and chat channels

  • Integrate the browse experience into the NLP categorization

  • Expand availability to global products

QuickBooks Self-Employed

  • Integrate CUP into the chatbot

Lessons Learned

Don’t assume that design system components are customizable. I adapted the step flow component by only using the mobile component. I did not realize that the component is responsive and required the UI engineers to make extensive changes. I learned this in the middle of the sprint after having Slack conversations with the engineers and followup discussions with the Design Systems team. In hindsight, I would have invested the time to better understand what was involved with modifying existing components before including them in final designs. 

Adding a new contact us channel requires extensive testing. I presented this project to the broader design team and received feedback that launching one channel is not an ideal experience. I agree with that sentiment, but PM needed to release the available channels so that they could test the frontend, backend and agent experiences. I was not aware of this until the project was well underway. Ideally I would have gained a better understanding of the testing process so that I could have made more informed decisions during scope conversations.