Turns out I need a budget. OK. We need a budget… I’ve been using Quicken for a long time… However double-ledger accounting is darn complicated to use, and even more difficult to explain. I found YNAB via Wirecutter, and tried it. What follows are some thoughts about their on-boarding process.
TL;DR: Consistency implies dependability which leads to trust. There are many good things about the YANB on-boarding process, a significant number of inconsistencies, and a few frustrating issues.
This is good! Financial data should be strongly protected, and defaulting to a iOS generated password is the best UX. The neat thing they did here, by using what I think is a WebView, is this password is stored in the device and, by default, replicated to all iOS & macOS devices, so it’s automatically available to the user everywhere. This level of good is *rare*.
- Philosophically, I believe that navigational elements should be named, and look consistently. “Log Out” even though semantically correct, should be “Cancel” to be consistent with the previous screen. “Cancel” is correct from the user’s perspective, is consistent, and therefore less thinking & deciding.
- Good clear display of pricing right next to the “Try” button. +1.
- $7 times 12 is $84, not $83.99. The whole world knows the .99 trick… However, I took it as a jarring lack of attention to detail.
Lots and lots of problems. This is the screen that got my dander up enough to write this post…
- Button Text Padding: The Learn More button should have the same text padding as the other buttons on the screen. Consistency is good.
- Button colors: The Next button introduces a new tint color from the previous screens. Why? Consistency is good.
- Text: “In the meantime…” good to tell me how to resolve this problem. “you can add transactions in the web and mobile apps…” Gah! I’m in the mobile app now! What? (Thinks the completely unknowledgeable user.) The text in general assumes that the user knows what’s coming, and they don’t…
- Status bar: There’s no reason to cover the status bar here, and by partially covering it, it looks… sloppy. That’s the second jarring thing to me. It irrationally bugs the hell out of me.
I would do the following:
- Consistent button sizing & coloring.
- Never ever cover the status bar.
- Full black title & subtitle.
- Text Header: Link in Maintenance.
- Text Body: “Gah, bad timing! Our link to <thing name> is in maintenance. We’ll notify you when it’s available. In the meantime, we can get started with your budget, and you can link this account later.”
- Buttons: “Learn More” which would take you to a screen explaining that you can manually enter transactions, and the file-based import option.
Why is US Bank blue? Why doesn’t the US part have a red background? This was the third jarring thing for me.
- Wow did I want to tap on Step 1 & Step 2 as navigational elements. They aren’t, but I expected them to work like a segmented button and shift between those two activities. Wrong, but that was my expectation by this point.
- Button UX: This screen introduced another button type, this one with a shadowed background. IMO, this is the nicest looking button so far, and the rest of the buttons should be updated to conform to this UX.
- The animated tree, as an activity indicator, is beautiful. Truly. I’d use it damn never everywhere in lots of sizes. +1
- Button UX. First place an inactive button shows up. Not a big fan of it. In other places, buttons disappear when inactive. Need to be consistent, one way or the other.
- Temporary Unavailable Warning is good. It sets expectations, and tells the user what to do next. I would struggle hard to make it fit on one line.
- Add New Connection should be a first class button like the “Let’s Get Budgeting” button from previously. Or at least a button with an outline like the “Learn More” button. There’s no reason to have a different button UX for it in this scenario. As a counter example, there are a reason to have the remove button be different. First, we don’t really want users to tap it. Second, there’s tight space constraints given the width of the table. Lastly, many repeated instances of a bordered Remove button wouldn’t look pleasing.
This screen is presented when logging into your bank, after their two factor authentication. It’s pretty slow process, and lots of steps. The most important information on this screen isn’t “Connected”, my accounts, their associated balances, or the name of my bank, even though it’s repeated. It’s the instruction to “Select the account you’d like to link.”
Did I read that the first time through?
Nope. I happily read “Connected,” and didn’t notice the instruction to select accounts, so I happily tapped the X button, because that’s all I could figure out to do.
At a floor minimum, if the user clicks away from this screen without selecting an account, an alert dialogue should keep them on this screen unless they confirm that they don’t want to link accounts.
I felt stupid, because that threw away all of my previous work, and it took me back to a screen without any visible reference to my bank.
I believe that the user logged into their bank intentionally, so it’s highly likely that they wanted to link accounts. Therefore, I would make all accounts default linked in, via a checked checkbox, with the option for the user to deselect accounts, before tapping a visible next button in the lower lefthand corner.
That’s as far as I got! I like the idea of YNAB a lot, so as a motivated potential user, whose free trial is burning away, I am going to give it another go over the weekend.