Contextual Nudges

A key payment setting buried in creator settings suffered from low adoption. I conducted a no-code experiment and proved that "contextual nudges" at relevant user journey steps increased adoption. This led to a reusable component, which I then contributed back to the design system.

  • Project Role: Lead Designer

    Year(s): 2022-2023

  • We needed to increase adoption of a feature, but it lived several clicks deep within Settings on a page with low traffic. How might we expose customers to this feature where it's relevant without uprooting our entire information architecture?

  • Design, test, and build a component that cross-promotes features where they're contextually relevant

Context

Teachable's BackOffice automates creator payouts, tax filing, and additional payment methods, potentially increasing conversion by 24% and generating a 2% transaction fee for Teachable. However, low discoverability within the navigation structure hindered adoption, as the opt-in was buried deep within payment settings.

A previous BackOffice integration that I included within a new feature's onboarding flow saw significant adoption growth. Within four months, 127 schools enabled BackOffice, generating an additional $11,573 in transaction revenue. This success highlighted the impact of placement within the onboarding process, but also raised questions about the underlying motivators for adoption and whether the same results could be achieved outside of a potentially coercive onboarding flow.

The solution

Test, design, and build a reusable component that allows us to cross-promote features in places where they’re contextually relevant.

If successful, we could see significant adoption of critical selling tools, which could in total generate an additional $300,000 in revenue after four quarters.

Code-free experimentation

At this point, it was late-November. The team was racing towards the end of the year, and planning for the first half of 2023 was well underway. I had to build buy-in around pursuing this opportunity, and I needed answers fast, so I had to get scrappy. 

Using Pendo, I A/B tested in-app messaging to drive BackOffice adoption. A pop-up on the checkout management page highlighted BackOffice's conversion-boosting features (like PayPal) and directed users to enable it in their payment settings.

A six-week experiment with a contextual pop-up on checkout management pages drove 9.2% BackOffice adoption (32 of 347 eligible schools), projecting $6,400 in additional revenue from the $123,000 GMV of adopting schools. This validated the effectiveness of contextual nudges for feature adoption and influenced 2023-H1 planning. At a company-wide presentation in January 2023, I showcased the value of no-code experimentation, leading to an increase in no-code experimentation throughout the year.

Iterative design

Coming into the first half of 2023, the team's guiding imperative was to bridge the gap between our platform's top-selling creators and the rest of the gap. To do this, we needed to increase adoption of our various sales tools, which are proven to increase conversion, ATV, and more. 

Having proven the value of contextual nudges through the experiment, we decided to design and develop a series of contextual nudges to drive adoption of both BackOffice and various sales tools on the platform. 

Competitive analysis of contextual nudges revealed key best practices: they should supplement the current task, avoid obstructing it, and enable quick action (ideally within the existing flow). The analysis also highlighted the need to adapt mobile-centric nudge patterns to a desktop environment.

I conducted a design jam with the Product Design team to generate low-fidelity mockups of contextual nudges, exploring their platform integration and interaction with existing elements. The exercise revealed that nudges can be element-level or page-level, should be visually distinct yet non-distracting, and require scalable design across use cases and screen sizes.

Over the course of design iterations on contextual nudges, I anchored to the findings from the early design explorations for guidance, as well as critique from collaborators and other designers. 

As an element-level nudge, it nestles within its context relatively seamlessly, but it lacks contrast, requires too heavy of an interaction to perform the task, and doesn't scale to smaller screen sizes. 

This iteration does have enough contrast, but it’s too obstructive—it forces the user to interact and may hide elements that the user needs to perform a task. Additionally, it may not scale seamlessly to smaller screen sizes.

The fill on the card does contrast, but it doesn't adhere to design system standards, and the green color may not successfully scale across use cases.

The use of an illustration helps to spark visual interest without breaking design system standards, but it takes up too much space. 

Final design and implementation

After about three weeks of design exploration and iteration, I landed on designs to hand-off to the team. The final designs consisted of schema for element-level and page-level contextual nudges, in all of the instances that would be present for initial launch. 

Element-level contextual nudge: These types of contextual nudges are placed above or below the element they are addressing. They consist of an icon, title, body, call-to-action, and can be persistent or dismissible. Following the period of iterations, we opted for this design schema because it is scalable, visually distinct enough to drive interaction, and discreet enough to not impede on the task at hand. 

Page-level contextual nudge: These types of nudges are always located at the bottom of a page, and are used when the task relates to the contents of the page broadly. They consist of an illustration, title, body, call-to-action, and can be persistent or dismissible. The illustration provides enough distinction to draw the eye, and the composition enables wide scalability throughout the site. 

In March 2023, we launched eight contextual nudges across the platform, promoting coupons, order bumps, student referrals, affiliates, and BackOffice. These nudges increased feature adoption, helping bridge the gap between top creators and other users. Adoption rates range from 2.2% to 7.1%, enabling iterative improvements to messaging and placement. As of July 2023, over 1,300 schools adopted coupons, 610 adopted BackOffice, 90 created referral programs, and 33 created affiliate programs, generating over $175,000 in additional revenue for Teachable.

Design system contribution

Following the initial success, other Teachable teams requested guidance on implementing contextual nudges. To facilitate broader adoption, we contributed the design schema to the design system. I created a modular, reusable component in Figma using AutoLayout and the Component tool, enabling easy adjustments for designers.