Overhauling the Sign-up Funnel
Conceptualize a new version of our sign-up funnel that would allow for greater experimentation. And a fresh, new redesign based on qualitative and quantitative insight.
Contribution: I worked closely with product and engineering to help conceptualize this new sign-up funnel rebuild. I did qualitative and quantitative research. And I created the visual design for the entire funnel.
Our sign-up funnel is a series of screens that our leads go through to open an account with Aspiration. Submit email, create password, agree to terms, enter personal and contact information, link a bank account, make a deposit, etc.
The funnel we inherited was very difficult to change. We were limited to small changes and the existing screen order. Every time we made a larger change, things would break. We wanted to test new designs, new screen/form field orders, and remove entire sections.
Although our funnel was difficult to change, we managed to run 20+ split-tests. These tests significantly improved the conversion rate. But they revealed some major flaws in the design. There's too much copy on each section. The form fields and buttons are below the fold. The screens are way too long. There are too many screens.
It was time for an overhaul.
The funnel was created around 5 years ago for Mutual Funds, was duplicated and slightly modified for the Cash Management Account. It was very difficult to change because each screen was connected to multiple APIs.
Our problems were multifaceted. The underlying code was very opinionated and rigid—often described as “spaghetti”. This held the optimization team back. The inefficiencies of the underlying code limited our creative potential.
Complicated API structure limited our creative potential
We needed to rewrite our funnel code so we could develop better experiences for our customers.
We needed something that would allow us to try new signup experiences without breaking the underlying API. So we conceptualized an open api that accepts data regardless of screen or form field order. This also included moving sign-up onto its own production branch and building it in React + React Native for our mobile app funnels.
After tons of collaboration, we created a presentation to pitch our concept to stakeholders. It was an easy sell. Leadership wanted faster iteration. Engineers wanted better code. I wanted to test new ideas and experiences. Win Win Win. Once we had buy in for the concept, work began. The developers started creating a flexible api layer that reflected our vision. I started exploring new design solutions based on the data we’d been collecting in split-tests and qualitative user research.
New API structure opened up the possibility for a redesign
The funnel redesign was based on a lot of qualitative research and dozens of split tests in the old funnel. Everything from reducing the amount of copy on certain pages, bringing buttons above the fold, removing entire sections, isolating certain form fields from others, etc. All of these tests increased our number of "Funded Accounts" so we felt comfortable incorporating the concepts into the redesign.
As a team, we decided that it would be best to roll this change out in phases. The first phase applies new styles to the same funnel order. We would do this to establish a new baseline. After this, we would iterate toward our north-star ideal of a "Sign Up + Setup" journey. More on this later.
Form field style explorations
Layout, color, and style explorations
The API rebuild would allow us to build the funnel in new ways. So for the redesign, we decided to split the funnel into two “steps”. The first was “Sign Up”. In Sign Up, we asked for personal and contact information. The second step was “Setup” which contained crucial actions for a functioning account. Things like, linking an external bank account and transferring money to Aspiration. This "two step" process was compatible with people’s mental models of what opening a new bank account is like.
New Customer Journey
New styles. Address Autocomplete. Moment of delight.
Transition screen. Opening Deposit. Pay What is Fair.
I ran a user test focused on perceptions of the funnel duration. The scenario was,”Imagine you are signing up for a bank account.” I then asked them, "Based on this first screen, how long do you think it will take to sign-up for a bank account?” Those who saw the old design gave a wide range of answers. Mentioning the two form fields, some said 10 – 30 seconds. And some said up to 30 minutes—they referenced the bubbles at the bottom. Not having a prominent progress indicator led to inconsistent and inaccurate expectations about the funnel duration.
Those who saw the new design with the progress bar at the top gave more consistent and accurate answers. They all said something between 5 – 20 minutes. Some even explained that the simple progress bar gave them peace of mind.
I asked if they were okay with this amount of time. The testers all felt good about it. Most said that it SHOULD take 10 – 15 minutes because of all the information required for a bank account. Any shorter would be suspect. Any longer would be too burdensome.
Progress Indicators: Old Progress Dots vs. New Progress Bars
In our interviews with users, they often praised big banks for the customer service and loved that they could walk in and get help when they needed it. I wanted to bring something like this to our sign up funnel. First, I noticed that all our current “help” functions were scattered about the page. So I consolidated them all into a Support menu on the right. You’ll find page relevant FAQs, easy access to support, and more.
Support for Desktop and Mobile
"Pay What is Fair" is a really unique feature which sets us apart from other banks. A customer can choose to support us monthly and we’ll give 10% of it to charity.
However, this page in our current design often confuses customers. They quickly skim through all the copy and often express doubt. We say most people pay $50/month for their big bank account when they think they pay $0! “I don’t pay anything for my account at Chase.” So, the new copy ignores the specifics of big banks and talks about Aspiration and our member support.
But more importantly, the new design allows users to tell us what charities they value most. This will allow us to create personas based on their interests and help us determine where to direct the money. It could open up the possibility of sending creative and customized messaging to different cohorts.
Pay What is Fair Current (Left) vs. New (Right)
As this is being written, we are in Phase 1 of the build. The developers are building out the screens in React, and working on the new API structure. After Phase 1 is launched and we have a stable baseline measurement, we will begin work on Phase 2. We will most likely get to Phase 2 by gradually testing the new concepts like, Sign Up + Setup, PWIF, Support, and more.