Onboarding is half-baked. How to reduce the cognitive overload.
If you like this article, check out my work to solve personal finance at fiskal.app.
Pinch to zoom is not an intuitive gesture. The reason everyone “got it” was because Steve Jobs showed us and we copied. As app designers and developers, we need to expose core concepts and build upon those over time when the user is ready. “Explaining” too many concepts, too quickly creates cognitive overload for users. Thinking that all a user needs is a good onboarding is an anti-pattern. Instead we need to hold the user’s hand and guide them through learning our application’s lexicon.
Level 1: Core Mechanics
The app I work on is a budgeting app. The core mechanic of the app is to take your total monthly salary (i.e. $300), divide it by the days in the month (i.e. 30) and show a daily limit (i.e. $10 a day). This gets broken out by daily, weekly and monthly guides.
Even with this very basic concept there are many incidental complexities. For instance, “When does a week start and end?”, “Why does it remove my bills from the calculation?” and more importantly “What happens when I spend less or more than my daily limit?”. There’s a lot to soak in on this screen. The real way to evaluate this screen is to see with you’re own personal numbers. It feels completely different when you’re looking at real money in your bank account.
Level 2: Overspending & Rollover
Hopefully we’ve got users to understand Level 1. More importantly than understanding is to gain trust. The next cognitive level (Level 2) is to explain how a number today affects them in at the end of the month.
First we need to define overspending and underspending. When a person spends more than they have for a day, that amount gets spread over the rest of the month and the daily amount is slightly less each time. This lessens the pain of one day over spending.
When someone does good and underspends, the complete amount gets rolled over into the next day. In the first version of the app this was buried deep inside a screen 5 taps away that almost no one goes to.
Uncovering the buried treasure: Rollover take 1
Rollover is a great reward people to incentive good habits. “Saving to play” is a much better habit than “borrow today to pay back later with interest”. The first take at exposing Rollover was to give it a dedicated page.
This page lead to an interaction I call “the mystery gift”. Every time a person navigates to this screen they get a mystery gift. It’s either going to be this happy moment of seeing Rollover or a horrible feeling that their sliding further into debt. After about a month in production we pulled feature.
Back to the drawing board: Rollover take 2
The first attempt didn’t go so well. But it’s a great part of the app. We need to go back to square one to find out what was missed the first time.
We started out by listing out all the potential goals we wanted people to get from this feature. We then narrowed it down to the most important goals and prioritized them. This a critical step in my process. When evaluating the good and bad parts of any implementation it gives me clear criteria. I can be more objective, methodical when judging the trade-offs of an idea.
The ah-ha moment was realizing that overspending/rollover is not binary (either good or bad) but should be singular (only good). When doing the math it’s always going to be either positive or negative for the day. but positive reinforcement should be treated differently to people than negative feedback. Here’s a few of the (ugly) sketches from my ramblings to deconstruct the feature.
Killing the mystery box to progress to Level 2
The first step was to kill the mystery box. We don’t want people checking rollover if there’s nothing there. Only when people have positive Rollover do we want them to look for it.
The solution ended up being fairly simple. We hide the Rollover beneath the main daily spendable graphic. Sliding it left or right (yes we thought about lefties) would pull out the Rollover. The feature is always present but we are careful as to when to expose it to people. It’s like the secret warp pipe in Super Mario Bros 1. The key to reducing the user’s cognitive load was how to explain the feature to the user.
When a person has positive Rollover we added a slight pulse animation behind the daily graphic. In terms of eye movement and importance of elements on a page animations are the most important. Animations are more than text, size, color, everything. We really want users to see that pulse and feel happy. It’s a little queue that says you’re doing awesome, there’s a reward waiting for you.
Now that we have a great interaction we need to expose it to the user. Displaying lots of text is horrible. We all know nobody reads anything. We want to bring that same enjoyment that Steve Jobs did when we say pinch to zoom.
What we did was first add some heuristics to the app. We’ll wait until the person had the app for at least 2 days AND the they have never used the pull to check rollover AND they currently have rollover. When these criteria are met and the main screen is loaded we play an animation of the pulse, directly followed by sliding out the Rollover number then hiding it again. This is quick animation. It’s all done in under 2 seconds for the entire sequence. But that’s all it takes. People got it, they copied the interaction and liked it. We guided them along to Level 2. The more Rollover you can build up the better you’ll be at the end of the month.
Market Validation
We launched the feature with zero fanfare. There was no mention in the release notes, nothing on the site, press, no in-app notification, nothing. But just after the launch we got positive feedback from users. Two months after the “silent” release of the feature we got featured on the Today show. The host explained the core concept of the app very succinctly and then pulls over the daily graphic and show exactly how Rollover works. Teach people through careful, targeted animations, expose complexity slowly over time and reward good habits.
