Redesigning the POWR Popup app

Product Overview

Background

At POWR our mission is to provide customizable, easy-to-use and affordable solutions to help small businesses grow online. POWR provides website owners the tools to build their own apps (like forms and popups) on their website.

I’m on a small product team consisting of me (the designer), three engineers and a product manager. Our team focuses on increasing new activations through different apps.

The Problem

How can the business increase activations and revenue with the POWR Popup App?

The business identified significant opportunities to increase activations and revenue with our Popup app. The app had not been looked at in a few years, so it was my job to research the space and figure out what we could do to meet the business goals.

The Solution

Through my research, I hypothesized that we would increase conversion to active and revenue numbers by:

1. Making visual design updates so popups look modern and professional.

2. Focusing on improving the user experience while creating a popup.

This is the result:

Results

+148% increase in revenue!

To understand the improvement of the new design, we first launched this as an A/B test. The results were a huge success with a 99% confidence.

• +148% Revenue

• +21% Conversion to Active

• +79% Total Upgrades

• +30% LTV

5-Star Reviews in Shopify

My Process

Deep dive into features our competitors offer

I began by familiarizing myself with the types of popups that I could create with various competitors. The goal of this exercise was to get myself acquainted with current popup design, features and trends. I took note of how they visually looked and what features they offered.

Recreate popups to see where our design falls short

I wanted to put myself in our users’ shoes so I tried to create popups with our own editor and noted where ours fell short. I did this with 7 popups from well known brands. Below is an example of a Bombas popup that I tried to recreate using our tool.

As you can see from the example on the right, I couldn’t quite make it look the same. I noted the following issues I had while trying to create it.

Problems I had with our editor:

• Ability to change the color of the “x” icon

• Customize the width of the input or change text from “Email”

• Secondary CTA option

• Flexibility to change the size of the text content area

• Watermark should not be part of the main content area

Summary of features needed to be competitive

After reviewing competitors and trying to recreate popups, I wrote down the major visual design features that our app needed to be competitive in the market.

• More button design options

  • 2 CTA’s per popup

  • Custom border radius

  • Inline style

• More font styles

• Image cropping and focus options

• Opt-in checkbox

• Terms & Conditions text

• Padding flexibility

• Entrance animations

• More types of close “X” icons

• Styling options with email input

Key Takeaway

We need to invest time into making the aesthetic of our popups modern and flexible, so we can have a product offering that competes well with competitors.

Audited 55 POWR Popups to understand common user stories

I wanted to understand what types of popups our users were creating with our app. I looked at 55 POWR popups that were currently live on a website. I found that the majority were either making an announcement of some kind or asking for an email address.

Popup Types

Created user stories and bucketed them into major themes

Now that I understood what types of popups our users were creating, I created all of the user stories that I could think of to make sure our redesign supports these stories.

Key Takeaway

The majority of users use their POWR popup to:

1. Capture emails

2. Communicate an announcement.

Summary of research findings

Our popups need better design style options

I found that our biggest opportunity was to update our design style options so our users can create modern and professional looking popups for email capture and announcement popups. Once we had that foundation, we could build out more features like integrations and popup display options.

Getting to the MVP

Defined user needs and business goals to align the team

User Needs

• I need to grow my email list

• I need to make an announcement

• I need to convert visitors

• I need to target a specific audience with a message

• I need to offer a coupon

• I need to promote a special offer or promotion

Agreed on features the team would build

After presenting all research to the team, I proposed what we needed to build to the team that mapped back directly to the user needs and business goals. The team brainstormed and chatted about it and decided on what we wanted to build for the MVP.

MVP - Design Features

• More than 2 font styles per popup

• 2 button types

• Image cropping

• Popup animations

• Custom success page

• Image layout options (background, left, right)

• Tab and button trigger

• Terms and Conditions text

• Email opt-in checkbox

• Popup layout options (fullscreen, middle, left and right corner)

Key Goals

We increase conversion to active and revenue numbers by:

1. Make visual design updates so popups look modern and professional.

2. Focus on improving the user experience while creating a popup.

Design

Wireframe > Prototype > Test > Iterate

Rapid Ideation

One of the main design constraints for this project was to maintain the same 4-5 tab structure that we use for all our apps. The first tab was going to showcase templates because we had run numerous past A/B tests for other apps where templates performed well, but I had to figure out what the subsequent tabs would look like.

I came up with 3 options for the second tab (seen below) and did some quick and dirty usability tests with people at my company. The 3rd option showed the most promise an least amount of usability issues, so I went forward with that for my first prototype.

Test Prototypes

After usability testing 4 people, I put together a findings presentation to share with the team. The presentation was a great way for my team to understand and then prioritize all the changes I wanted to make with the iteration.

Results

Triple digit increase in revenue!

To understand the improvement of the new design, we first launched this as an A/B test. The results were a huge success with a 99% confidence.

• +148% Revenue

• +21% Conversion to Active

• +79% Total Upgrades

• +30% LTV

Next Steps

Build more form components in Popup

The team knew adding more form components to Popup would better meet more user needs, but the only fields that made the cut for the MVP were Email and Name.

Form fields to build in the future:

• Phone Number: to be able to text users

• Countdown Timer: to drive urgency

• Rating: to capture satisfaction scores and feedback

• Short Text Field: to capture feedback