Budgetty

Three white pentagonal electronic devices with circular screens on the top. Each screen is displaying information related to budgeting and spending habits.
Date
2022-05
Colors
  • white
  • light gray
Media
  • UI/UX design
  • Product design
Collaborators

Description

Budgetty is a standalone digital wallet that encourages more mindful spending habits in a world of abstract payment methods. I designed and animated the UI for the circular screen which users interact with through the surrounding dial.

Video

Interface

↑↓
  • The home page displays menu icons and the user’s balance. The upper half of the circular screen shows the savings icon, card selection icon, and settings icon. The lower half shows a balance of $435.92 above the subtitle “62% budget left.”
    Home
  • The card selection page displays credit and debit cards the user has stored on the device. Each card is represented by a user-defined icon and the card number’s last four digits. All cards are arranged in a partially visible circle that the user scrolls through by turning the surrounding dial.
    Card selection
  • The card options menu with a delete and move button. The corresponding card is highlighted with a white circle.
    Card options
  • The card reordering interface shows all cards in a partially visible circle with the selected card highlighted with a white circle and the hint “rotate to move” next to it.
    Reorder cards
  • The card deletion page displays the card details in the upper half and the text “Hold to delete card” along with “Double press to cancel” in the lower half. As the user holds down the dial, a black border progresses along the edge of the screen, filling up the lower half when the card has been successfully deleted.
    Delete card
  • The payment input page displays the card details in the upper half and the amount that will be paid right below. The total balance is shown in smaller text at the very bottom.
    Payment input
  • The payment confirmation screen shows the amount paid being subtracted from the user’s balance in the form of a long subtraction.
    Payment confirmation
  • The savings page displays the amount saved each month. Users can view different months using the scrollable top section.
    Monthly savings
  • The spending page shows the amount spent each month. Users can view different months using the scrollable top section.
    Monthly spendings
  • By clicking on a month’s spending, the user is shown a list of transactions with the icon of the card used and the amount spent.
    Spending history
  • By clicking on a specific transaction in the list, the user is shown the card details, the amount spent, the exact time of the transaction, and the merchant involved.
    Spending detail

Images

↑↓
Exploded view of Budgetty. From top to bottom: input dial, circular screen, motherboard, motherboard screws, top cover, cover screws, bottom cover, and the wireless charger.
Three Budgetty devices floating in mid-air, each displaying a different interface.
Top-down view of Budgetty. The circular screen at the center of its pentagonal shell displays the home page with the menu and remaining balance.
Someone holding a 3D-printed resin model of Budgetty in their left hand while turning the input dial with their right hand.