Helping SMB’s streamline their form submission workflow
Product Overview
Duration: 4 months to MVP
Client: POWR
Team: Form Builder team
Skills: Research, User Interviews, Wireframing, Visual Design
Tools: Sketch, InVision
My Role: Research, User Interviews, UX/UI design, Visual Design
Background
At POWR I’m on a small product team consisting of me (the designer), three engineers and a product manager. Our team manages all product development for the Form Builder app. With Form Builder, you can create any type of form (without code) and easily embed it on a website. It’s a Freemium product with 4 tiers of pricing. Most of our users find us through app stores in website builders like Shopify, Weebly and Wix.
The Problem
Is there opportunity for POWR to build an email service provider that sends batch and blast emails?
The founders came to me with a hypothesis that there’s opportunity within the small business (SMB) space to offer a competitive email service provider (ESP). This product could attract SMB’s who want to mass email their customers but aren’t ready to pay for a feature-packed ESP like Mailchimp or Constant Contact.
My task was to research our Form Builder users and figure out how they communicate with their customers, especially by email. I also wanted to understand if there was opportunity for POWR to enter the ESP market. I focused on researching Form Builder users because they make up the majority of revenue for the company.
The Solution
An automated confirmation email that facilitates 1-to-1 communication.
From user interviews I discovered most people were satisfied with their ESP. Because of this, I knew it would be difficult to get them to switch to sending email blasts through POWR. The risk to invest in this type of product was too high and I feared we would lose money on it. On top of that, I felt like it wouldn’t be a valuable offering to our customer base.
During the interview process I also discovered a pain point that our users had with email. Once our form users received a new form submission, they would reply directly to the confirmation email and copy/paste an email template as a reply. This was a huge pain point for our users and I knew we could automate this process for them — and make money doing it.
The solution was a drag-and-drop email editor that our users could thoroughly customize that would automatically deploy after a form submission. This would save time for our SMB’S and it was a feature we could monetize.
The POWR Email Editor I designed for the team.
Results
The POWR Email Editor became the most used feature by all paid Form Builder users. This was a HUGE WIN for the team!
The team was also extremely happy with the following metrics:
+60% conversion to upgrade
-15% conversion to downgrade
My Process
Research first!
Surveyed 66 users to find out how they use email
Goals of the survey:
Understand how users send email.
Find users to chat with for user interviews.
From the surveys, I learned the majority of our users used Mailchimp and were satisfied with it. Because they were content with their current solution, I hypothesized that it would be difficult to convince them to move away to to another email provider, but I needed to have conversations with them to validate.
Key survey insights:
71% already used an email service provider.
55% used Mailchimp and of those 72% were satisfied with it.
Interviewed 10 Form Builder users
Goals of the interviews:
Understand how our users communicate with their customers.
Understand if they’re satisfied with their current ESP.
The AH-HA — Common pain point replying to new form submissions
While chatting to users about email, there was a reoccurring pain point that emerged. Once our Form users received a new form submission, they would reply directly to the confirmation email they received and then copy/paste an email template as a reply. This was a time consuming and repetitive action for users with a lot of form submissions.
Example: Sherry’s struggle with email
I chatted with a woman named Sherry who managed her husband’s art website. She would reply to every form submission with the same exact email template you can see below. This was a huge load on her day-to-day workflow, but at the same time she enjoyed the personal touch her email would bring. She wanted a way to automate the “Reply Email Template.”
Key interview insights:
There was opportunity for POWR to improve the 1-to-1 communication, not the 1-to-many communication.
Form submissions start rich conversations.
Users were satisfied with their current ESP.
Opportunity to automate the form submission workflow
After my interviews, I had a pretty clear idea the direction we needed to go to offer value to our users. Because most users were satisfied with their ESP, I knew it would be difficult to get them to switch to another, even at a cheaper price point. The risk to invest in building this type of product was too high and I feared we could lose money, especially accounting for the engineering workload.
I believed there was opportunity to automate the form submission workflow for our users. We could build them an email tool that lets them create an automated email that would deploy to everyone who fills out their form.
Getting to the MVP
Created persona to summarize the users I spoke to
I created Jill, our primary persona, so the team knew who we were designing for. This was the first persona that was ever created at POWR and it helped guide the team’s decisions. It also helped our engineers understand who they were building for.
Jill, our Primary Persona
Defined user needs and business goals
It was important for the team to be aligned on both the user needs and business goals. Alignment on this made sure I was designing a solution to meet both.
User Needs
I want to not have to reply to every email with the same content.
I want form respondents to know that I received their form submission.
I want the email branded to my business.
Business Goals
Increase upgrades
Reduce churn
Create a sticky product
Focus on high value and low effort features
I grouped features into a Feature Prioritization Matrix so the team could laser focus on building what was most valuable. The team focused on discussing the High Value and Low Effort features and then prioritized those into the MVP.
Design
3 iterations of wireframes
When thinking about the design, I felt like an email builder doesn’t need to be reinvented and it was important to focus on UI patterns that were familiar to people. Many users I talked to had used Mailchimp so I felt like a drag and drop functionality was the right way to approach.
Progress of wireframes:
I did quick and dirty usability testing on 5 users and iterated until I arrived at the MVP. Through usability testing I found that everyone understood the drag and drop approach (even on a static wireframe) but there was some ambiguity around the “step” approach and if that was necessary or not. I ultimately decided to drop it and was able to achieve all the necessary actions on the main screen.
Final wireframe:
High fidelity mock:
Results
POWR Mail became the most used feature by all paid Form Builder users. The feature proved to fill a need for users who wanted to automate the after form submission workflow. This was a HUGE WIN for the team!
Key metrics used to measure success:
+60% conversion to upgrade
-15% conversion to downgrade
Iterate
Design is never done!
Since the launch of the MVP, we have iterated on the editor a few times. One of the main things the team wanted to optimize for was upgrades. These emails have a default sender name, sender email address and subject line that the user cannot change on a free account. If a user upgrades, then they can customize the header information.
That functionality was buried in the settings and I hypothesized that if we made the subject line more visible, we would get more upgrades. At the same time from a visual standpoint, I felt like that information was better situated on top of the email since headers are usually situated above the email content in places like Gmail. Below you can find the before and after screenshots of the iterations.
MVP - In red is where the email header settings lived.
Iteration - In red is where the email header settings moved to.
“Final” Design
It was a bit hard to measure the direct impact of this change as we didn’t do an a/b test and it just felt… right. Sometimes when you are a small and nimble team you have to make decisions that you feel are best for the user and the company, and this was one of them.