I O U App Design

Designing an app for managing debts among friends

I O U is an app conceptualized by a friend of mine while on a road trip. The idea sparked when a group of people were trying to record how much money they owe one another, but found the apps lacking some features. Below I will outline my process in designing the application.

Gathering Requirements

My friend and I decided to write down exactly what we wanted the app to do by user behaviour mapping:

  • Debt Event:
    - add Different People
    - add debt/credit between you and another person
    - check off when a payment is made
    - send reminders to people that they owe you money
    - merge multiple debt events into one when all the people are the same
  • User Profiles
    - check debts/credits for certain user on their profile
    - (personal) list of friends with debts/credits
    - name, picture, email

Wire-Framing

The next step was creating a wireframe representing the application. In order to create more accurate wireframes (compared to my previous post) I decided to use dot charts from sneekpeekit.
For this design I decided a menu likely wouldn’t be necessary. Instead the user opens the app and is brought through a more streamlined process. I took inspiration from the Uber app for the main action buttons on the bottom. 
I split the list items into symbols in relation to the atomic design methodology.

User Interface Design

I then began the UI design in Sketch. Money can be a difficult thing to talk about and I wanted the colour scheme, and wording used in the app to be the most friendly.

primary colour scheme

Blue is perceived to be a more calming colour and therefore is used across the app. The red is used for notifications, but a darker red is used for text that shows the amount the user owes someone. The red is darker to lower the sense of “alarm” the user feels looking at it.

The resulting app design

Prototyping & User Testing

A prototype for the app was created using Facebook Origami. The prototype focused on interactions that would likely prove difficult to the user: for example, missing the Done button and instead pressing Cancel instead on certain screens.

I tested using the target demographic: those aged 18–23 (i.e. university students). The following was noticed:

  • It is not clear what the difference between “red” and “green” coloured numbers are
  • The progress indicator on the left of the event list item does not convey the intended meaning
  • Back arrows on the top left aren’t large enough to be easily pressed

Next Steps

  • Changes made followed by further user testing
  • Android app creation

Hope you enjoyed this case study! For more follow and don’t forget to 👏👏👏

— Nick