Background: When the QuickBooks website for self-employed customers went live, data was captured and analyzed to established a customer interaction baseline. The team hypothesized that the mobile application would provide a simple way for customers to categorize credit card transactions from the last 24 hours. The mobile version was designed for daily use and was expected to improve the cross-product baseline.
Goal: Categorize transactions in 30 seconds or less each day.
My role: I lead the interaction design of the app. I assisted with the visuals as well.
You will see wireframes, animated keynote concepts, and finished videos for the v1 of the app. The app checks for recent transactions once a day and, if any exist, the user gets a notification. When the app opens, the main decision for the user is the type of each transaction. Was the transaction for personal or business reasons?
The card style concept was choosen for the final design.
For a given day, a user would most likely have a few transactions (<10). A list view is best for displaying summary information of many items. Cards allow the user to focus on only the information that is needed to make the personal or business choice.
The first time use for any app is important and this app is no different. In order to show the benefit of the app, the decision was made to provide an interactive tour before signing in. Forcing the user to practice the same actions they would perform in the app has been an effective strategy for past apps I've designed and I think, when done well, it is more effective than coach marks or a carousel of welcome screens.
The first time use, as designed in the wireframes, had a couple issues during internal testing. My take away was that users don't read. They didn't see the directions to swipe the cards left or right. In my re-design, I really focused on using less words and more movement and animations in order for the user to understand the interactions.