Identify a need, validate, design, test, and ship. #rinse #repeat
Duedue.app is a 0 to 1 React Native MVP designed to reduce the cognitive load of figuring out what to pay and when each month.
Mission: Make monthly bill-paying less shitty and improve bill-paying habits.
We are conducting ongoing target customer interviews and plan to release the product as a closed beta on the Google Play store. This will allow us to gauge user interest and validate the concept before a full launch.
React Native UX/I goals
Make it super easy to try Due Due App
As few steps as possible to add a bill
Focus on essential interactions only
Give the UI a memorable personality
Focus on the problem, not the solution
Make it wicked fast (with no images)
Multi-directional-scroll that’s intuitive
Reuse the UI for both work and play
Make it familiar and accessible
Make it funner to pay bills (motivate)
Responsibilities
Recruited a Software Engineer, Product Strategy and Decision Making, UX Research, Interaction Design, IA, Wire-framing, Prototyping, Figma UI, Copywriting.
Role
Sole Product Designer
Team
Senior Product Designer
Software Engineer
Platform
React Native
Initial UX Interview findings:
Target customer UX interview findings…
-
I’ll have a surplus of money, and then boom, there isn’t enough. It’s a Vicious cycle.”
Balance and consistency.
People with variable income or living above their means often have trouble budgeting.
For scrappy folks like this, we provide users with the on-demand context to quickly determine how long they have left to bridge the gap for each bill.
Due Due App doesn’t balance a user's income; instead, we focus on the most critical part of paying bills: balancing the timing.
-
“I had enough money for the check to clear, then forgot about my AutoPay.” #bounce
The snowball effect.
Nothing is worse than not having enough dinero to pay a bill and then being charged a penalty fee.
Due App zeros in on the primary timing of users’ obligations to mitigate mistakes. Mostly, things that don’t change, like due dates.
The horse (stuff our app tracks)
Due date
Penalty date
Due in X days
Date paid/promise
X days lateThe cart (available in creditor apps)
Account Number
Amount owed
Minimum due
Total balance
Payments leftA single bill has many numbers to remember. These are the timing essentials and more. Now multiply that by a dozen.
-
“Why do weeks wrap? Why are months are square. I’m human, time is not a maze.”
Represent time more like life.
For most, the way time flies by is more like the game Gran Turismo™ than Tetris.™ Calendars are pretty deceiving.
Time is like a car race. Things come into view as they approach, and we need to navigate around them safely while staying on track.
Due Due App’s horizontal calendar view is designed with this in mind.
The UI enables users to navigate backward in the past or forward in the future to understand more accurately what’s coming next without having to figure out timing.
-
“Juggling bills is not easy. It hurts my brain, so I often put it off until later, which makes it worse.”
Make bill paying less shitty.
Just like analytics, if we can quickly access the data, we can use it sooner than later to do better.
Due Due App aims to reduce the cognitive load associated with the recurring juggling of bills by reducing the timing guesswork.
Improvement feels good. To stoke the fire, the app provides positive affirmations. (prototype↗︎)
We plan to include stats so users can compete with themselves (and eventually each other) to improve monthly bill-paying percentages.
Oh, and lots of poop jokes.
Interaction sketches:
A single-view UI needed some secret sauce.
Multi-scroll (with snap)
Multidirectional scroll:
Due Due App uses a multidirectional scroll, allowing users to move horizontally forward and backward in time and vertically if they have a crazy-ass long list of bills.
Snap to grid:
Scrolling automatically snaps to the column and row grid wether you are scrolling vertically or horizontally.
Sticky labels
Bill labels move out of the way during horizontal scroll.
When users scroll backward in time (to the left), labels slide and stick justified right to open up the view.
Add a bill with less clicks
Users can tap a plus in the date column associated with the bill they’re adding (the date is automatically saved). Then they can then start typing the billing name naturally, hit return, and boom, we’ve removed a step.
Add a bill flow - wireframe
Create a bill & due date in as few steps…
Tapping a plus under the desired date column automatically saves the due date, removing an interaction and allowing the end user to focus solely on typing in their new bill name.
Small details make big impressions.
Horizontal calendar
View above the trees.
Due Due App has one main calendar grid view. Users see what’s due next, its status, how long it is left to pay, days past due, and payment promise dates.
When someone does good the grid transforms to affirm the user . Like when they pay something early or improve their monthly bill-paying percentage. (prototype↗︎)
Kind of like an old-school flip-clock.
Timing indicators
Each box has many sides.
Most interactions require one gesture to let due due app know what’s going on, so bill-payers see precisely where they’re at and how long they’ve got to bridge a gap.
Target:
People whose monthly income fluctuates, who don’t stick to a regular budget, or who live month to month.
76% of Americans making less than $50k,
65.9% of Americans making $50k to $100k,
47.1% of Americans making $100k or more live paycheck to paycheck. —PYMNTS report
“Who here is studying design to make money?”
We all raised our hands…
"You’re in the wrong school!”
The instructor said.
“There’s a real estate school down the street.”
My favorite instructor (1990)
Roland Young, ArtCenter
Photo: Will Evans