QuickBooks Gmail Add-on

With revenue of $4B+ and approximately 9,000 employees, Intuit's QuickBooks provides innovative business and financial management solutions for small and medium-sized businesses.

In 2017, QuickBooks' payments team set out to acquire new customer leads to drive revenue growth. Out of the many channels to expose QuickBooks’ payment services to potential customers, one was to partner directly with Google's Gmail add-on team.

This was the first project I received immediately after being onboarded; I worked fast for a solid turn around, and my effort earned me trust as a new member to our project team.

Collateral:
Platform add-on launch.

Involvement:
UX/UI design, usability testing, and user research.

Tools:
Sketch, Photoshop, JS/HTML/CSS, and Principle.

money_g1.4money_g1.4

For confidentiality reasons actual data values in this case study are omitted.

The Strategy

The team aimed to create a front door to our QuickBooks (QBO) ecosystem with this add-on. At the highest level, we wanted to help provide a functional widget for users who have invoicing needs, further share our payment solutions, and eventually acquire QBO subscriptions when they desire full accounting solutions.

ecosystem1ecosystem1

Internationalization

internationalization1.5internationalization1.5

Web-based Form UX

formform

Micro-Interactions

list micro-interactionlist micro-interaction
sorting Asorting A
sorting B_csorting B_c

Content

Results

Reviewing the data after our first year, there has been a total of over 1B QuickBooks invoices sent through the add-on.

To be continued (Intuit Confidential).

A Case Study

October, 2017

In our first week of launch, we actually faced a high percentage of user drop-offs between installing the add-on from the G Suite marketplace, to logging in. This was an alarming metric to say the least.

As a team, we formed an immediate action plan to improve the first time use experience. We hypothesized that a more visually appealing screen with clear value props and CTAs will reduce the drop-off rate.

Add-on login screen before redesign.

Context

Why did the team deliver the original execution for the login screen? In partnership with Gmail, we were given very strict guidelines on the look and feel, as well as interaction and behavior possibilities.

Just take a look at what other Gmail add-on partners delivered as their login screen. Asana was the only add-on that strived to add some visual polish.

The Options

My ultra-analytical PM gave me immediate requirements to mock up for the redesign. Due to the urgency of the situation, she permutated all the possible UI kit arrangements and suggested the team to ship the following option:

I mocked it up for her as a team player.

As the project team's designer, I didn’t think it was a job done well. And I wanted to push our thinking further to make it better.

Critique:

The header tagline is not only squashed by the QuickBooks logo, it is also swamped by the list of sentences below that are screaming for attention. Not to mention the subsequent illustrations are detached from each value proposition. By the time my eyeflow has reached the CTAs, I am personally confused and find it hard to understand why I would use this add-on, never mind which CTA to choose despite them being binary options.

So I thought to myself a little about feasible UI treatments. Why can’t we use a carousel?

If I could have a carousel to loop through the value props, I wouldn’t have to address a wall of text done within an overly-strict layout.

1/4 of the explorations I quickly brainstormed.

It is not a stated UI component from the Gmail team, however, I knew about WebKit's rich capabilities given my past experiences in web development. We have complete control over what assets to embed.

Why not use a GIF to circumvent the technical feasibility (no custom CSS/JS)? I quickly prototyped it and showed it to my team.

And sure enough, the engineer on my team confirmed it was indeed possible to embed a GIF (in the Google App Script framework) after I sent him the asset.

Team Buy-in

I was met with resistance at first, because I was breaking the prescribed rules from the Gmail team. But when my PM realized I was solving the UI problems by making the issues a non-problem, she jumped on the idea and fully supported my prototype.

The team even started to comment on the nuances of the GIF out of passion.

Impact

In 7 days after launching the login redesign, we improved our G Suite Marketplace ratings from 3.5 stars to 4.3 stars; and increased the install-to-login conversion rate by 5%.

I learned to never stop championing good UX and persevere to find a way; despite being told it cannot be done by admirable professionals in the industry.

A note to self to keep challenging the prevailing status quo.

You are one of the first designers I have worked with that has been creative "outside of the box". It is a breath of fresh air to see a designer come with his own perspective and ideas vs. creating the ideas of others.

- 360° feedback