Increasing profile growth and sign up form's engagement with spin to win

Overview

Timeline

4 weeks from ideation to solution
4 sprint for development*

*See Impact & challenges section

Role

Lead Product Designer

Abstract

Have you ever noticed that within the first few moments of browsing a website or shopping online a sign up form tends to pop up? There's a pretty high chance that the form is actually from Klaviyo.

The goal of these forms is simple; the more contacts our users can get the more marketing outreach to their customers they can achieve. To even get customers to give their personal info in the first place means the form has to pique their interest, so the question becomes how might we make these forms more engaging? Well adding gamification is certainly one way.

Background

Since 2020, many of our major customers have been asking for some element of gamification (i.e scratch to reveal, spin to win, mini quizzes, mystery box, etc) for their sign up forms. Up until recently, if our users wanted to add such a component to their forms, the work around was that they needed to use a third party platform integration with the their Klaviyo form, and even then they face challenges with cookies and tracking. These third parties were typically one of our competitors, so our users often found it was hard to justify paying and using two marketing automations platforms with similar features.

Problem

Klaviyo had a competitive gap as many of our major competitors like Privy, Justuno, Yotpo, Sender, Attentive, Amped, OptinMonster, Optimonk, Wisepops, Poptin, Omnisend, and many more offered some form of gamification feature with their sign up forms.

In addition, many of our customers had been requesting for gamification for years to increase profile growth and engagement. My PM and I pulled the dozens of gamification requests from Productboard and found that offering the spin to win wheel was a good place.

Problem Area Metrics

+10

of our competitors had some gamification functionality

+~30

major customers have been requesting this feature for a long time

Productboard feedback

"Customer would like to use Klaviyo to build a wheel of fortune-style Sign up Form. At this time, they can build it with other platforms but then customers aren't cookied from submitting the Form. It would be great to have the feature available and have the benefit of cookie-ing the customer from the Form."

- Customer Support Rep

"As annoying as they are, marketers find great success in gamified signup forms such as spin to win modals. "

- Customer Support Manager

"We would consider leaving Wunderkind if you offered this feature."

- Customer A

"We use Wheelio forms to employ spin to win as of now. We would like to move all forms to Klaviyo but haven't due to this limitation."

- Customer B

Ideation

Competitive research

I decided to do some competitive research mostly focusing on the UX of the spin to win features. I noticed most if not all competitors ended to follow a similar design patterns in the way users set up their wheel slices, allocated probability, styled elements. On top of this, all of them offered pre-made template when creating the sign up form.

Early Designs

I decided to follow some of these established design patterns as they were working for our competitors' customers. After all, our objective was to close the competitive gap, not (literally and figuratively) reinvent the wheel.

Another consideration I had to think through was how might we set up multi-step outcomes (success steps). In the long term I wanted the the multi-step outcome to be applicable for quizzes, surveys and other element blocks, so I designed with that in mind.

Template concepts

Wheel configuration concepts

Multi-success steps concepts

User testing

Goals

Validate the user flow
Gauge feedback for my initial designs

Test Outline

I would walk through the proposed user flow and early designs
As I would present, I would pause to ask specific questions, such as where they thought they could find the spin to win element to add to the form, how they would configure the wheel, and edit the outcomes
Lastly inquired how they felt with the overall flow presented, i.e what did they like, and what was confusing?

Participants

Representatives from 5 different companies participated
7 participants in total

Results

Participants found the designs and how to set up the wheel to be straightforward
Participants expressed they would want more template options especially those that are industry specific
Were interested to see if we had other gamification features in the pipeline

Next steps

Since the proprosed user flows and designs received such positive input, the next steps from here were to get early leadership approval for the project and start on high-fi wireframes.

Although customers expressed interest in diversified templates, in discussing with the PM, having the ability to add and edit the wheel for form was more important than offering templates as a whole. Later on in the project we hired a Visual Designer who was tasked to come up with aesthetic templates and the team added them right after launch.

Stakeholder Alignment

Design team

I brought early designs to design studio, a time where users can either brainstorm designs or critique presented wireframes, to get feedback from Marketing App pillar design team. Their feedback helped validate I was on the right path with my design choices.

PM & Engineering team

I wanted to work through a few open questions I had around functionality and implementation, so I sent a written up message along with a progress update video inquiring around the multi-step success UX.

Leadership review

My PM and I went through the company's standard procedures of design reviews and a product requirement document (PRD) pitch where higher up leadership gets a chance to review and sign off on finalized designs and product requirements.

Impact

Impact metrics were monitored for about a month and a half post release and here's what we saw:

~750 accounts used the spin to win wheel on their forms, and they collectively amassed ~400k customer sign ups
The accounts that used spin to win, have more active forms published post-launch than pre-launch, we speculate these accounts are experimenting with A/B testing using the wheel
At an aggregated level, those who used the spin to win wheel on their forms saw an increase of 28% in their submission rate
This project also initiated overall updates to the form screens, aligning them with the current design system and editor components for consistency across the platform.

Challenges

Although initially it took engineering a few sprints to do the bulk of the development, there were a few factors that delayed launch by a few months:

Near end of development, the legal team wanted to make a few changes. One example was NOT allowing for 0% or 100% probability at all; the decision came from a precautionary measure for if spin to win applied to sweepstakes law locally or state wide. However, this decision was later reversed when beta users expressed concerns that there's still a possibility for their customers to land on a "losing" slice, especially since other competitors allow for the extreme probabilities.
Site reliability team had an issue with how a sign up form as a whole could potentially be resurfaced again if a customer took specific steps to clear their browsing history, so the engineers had to address this issue first before the team could even launch any other features including spin to win.