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 late

    The cart (available in creditor apps)
    Account Number

    Amount owed
    Minimum due
    Total balance
    Payments left

    A 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

Next
Next

Billing Dash