QB Promo System

Promo System

Objective

The objective of this exercise was to explore the visual layout of promotions and up-sells to create an extensible system that would work throughout all of QuickBooks, keeping in mind seasonality, layout, and other considerations. I took this brief forward and created a visual system that makes all the promotions a seamless part of the experience across various platforms.

My Role

Since this was a self-initiated exercise, I was the sole designer working on this project. I was assigned to the project by Design Manager, Shernaz Pavri and reported my progress to Principal Designer Tina Yuan. We were supported by Design Researcher Katja Spreckelmeyer.

Promos comprise 63% of all conversions.

Placement and visibility of the promos play a huge role in decision making for the user. For the home page, promos with motion drew most attention while larger sizes, like screen takeovers, users were inclined towards ignoring.

Left: A heat map of one of the tests done on the promos using the new design language. The heat map shows concentration of elements users see and engage with the most. Warmest being the most engaged element.

I explored various design iterations for style and interaction.

Initial explorations were concentrated on stretching the limits of the new visual language.

Interactions were specifically explored for the homepage. I used Principle to mock the animations

Pricing and product pages need to be specific about promos. So, I designed a drawer interaction with an automatic scroll lock

I proposed bucketing promos into 3 types. Each type, designed for the content on the page.

Landing page

Since the homepage is one of the most trafficked page, it is most likely to evolve and undergo changes. Hence I recommended a flexible system of promos for the homepage and supported my recommendation with an exhaustive number of designs.

Inside page

Promos would occur on inside pages during festive sales like Presidents Day or 4th of July. So I recommended a slim top banner that grabs attention yet isn’t too intrusive to the user experience.

Product page

Based on the insights from design research, it was important to signal where the promotion applies. To do that I designed a drawer interaction with an automatic scroll lock. This ensures, the user knows exactly what product is part of a promo.

The completed system was presented to the design systems team, led by Hetal Soni. It is currently live in selected geographies. So far, the promo system has seen a 44% increase in engagement. 28% of the users engaging with the promo opted for free trial. This was a 73% increase in free trials. 6% of the users engaging with the promo opted to buy. This was a 24% increase.