QuickBooks Gmail Add-on

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

In 2017, I joined Intuit's QuickBooks payment team to design faster, easier, and better product experiences 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:
QuickBooks Gmail add-on.

Involvement:
UX/UI design.

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

money_shotmoney_shot

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

The Problem

The QuickBooks invoicing add-on for Gmail was launched in October 2017 and 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 within the first week of launch. Even after fully completed tests in alpha and beta focus groups, general users were not signing in/up and the usage was lower than expected.

As a team, we formed an immediate action plan to redesign the log-in screen. Our hypothesis was that a more visually appealing screen with clear value props and CTAs will reduce the drop-off rate.

Add-on login screen before redesign.

The 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.

requirementrequirement

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.

competitorcompetitor

The Options

My hyper-analytical and very logical 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 wanted the team to ship the following option:

I mocked it up for her as a team player.

I didn’t think it was a job done well, and wanted to push 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?

1/7 of the explorations I quickly brainstormed as better options.

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.

It is not a stated UI component from the Gmail team, but I knew about WebKit's rich capabilities given my past experiences in web development. We can’t add any additional CSS or JS functionalities to the add-on, but we have complete control over what assets to embed.

Why not use a GIF to circumvent the technical feasibility?

I quickly prototyped it and showed it to my team.

And sure enough, my engineer confirmed it was indeed possible to embed a GIF (in the Google App Script framework) after I sent him the prototype and 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, the team jumped on the idea and fully supported my prototype. They even started to comment on the nuances of the GIF out of passion.

I also worked with my content designer to tighten up our wordsmithing efforts.

Results

Hard to say if it was correlation or causation, 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%.

Today, a year later, there has been a total of over 1B invoices sent through the Intuit QuickBooks invoicing add-on.

From here, 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