Interaction Design

With our login page, we kept it simple and familiar with users being able to type in their account email and password to then login into our app. They can either log in normally and start doing what they need to do with our app, or create an account to start using the app. Because it is necessary to be logged in to use the main features of our application, we decided to make it the landing interface.

In the case that users do not have an account yet, they can click the register button where they will be redirected to a registration form that prompts for the required information to start using the app. They can hit register after filling out the required information and be taken to the home page, or they can hit cancel and be taken back to the login page. We wanted to make sure that we added controls that would be able to correct user errors like in the case that they unknowingly touched the register button, or maybe they realized they already had an account and want to go back to the login page.

Once a user is on the home page they have a variety of controls and widgets available to them. They have a search bar to look for a person or group that exists within the app. Users also have a calendar that displays any upcoming payments in the future, granted they belong to a group. Users could cycle through months to view previous months’ and near future months’ payments. The reasoning behind the components on this home page is that those are what most people are going to want to view when they use the app.

In the group tab, Users can see all the groups they currently belong to which gives them the option to leave one, edit one if permitted, or create a new group for a user’s new spilt payment. Essentially everything related to a group can be accessed from this tab. This was part of narrowing the main functions, and features that a user would want to access, to create easy-to-learn interfaces.

A user can click on a group so they can see the details of the group. Information such as group members, what is the total payment amount, and members’ payment percentages are displayed. There are also controls to remove, or add more users to the group, and set a new equal percent of the total payment amount. We created an “edit” button that lets group owners control the group by refining group members and payment logistics. At the bottom of the page, we provided a button to navigate users back to the main group tab, in the case that they are done using the page, or never intended to visit it.

If a user decides to add a new member to a group or edit a group they are given a set of parameters to fill out. Firstly, the pool of money that is needed for rent, food, or even a Netflix payment can be set here. It also has the portion if a user wants to spilt things evenly among members or have it distributed by percentages. The user can also add people right on the create group page. This can be accessed by pressing the create a group button or when you are checking out an already existing group you can hit the edit button to bring up this page.

The notification button sits on top of a couple of the main interfaces to host notifications such as when someone invites them to a split group, someone leaves a group, etc so that users are not unaware of changes that may affect them. It can also notify group owners if any group members have not made their monthly payments in a timely manner and if any payments are coming up soon. This feature was based on the scenarios we previously created, in which users want to be reminded of when they have upcoming payments due instead of having to mentally remember such payments along with many other things they might have going on in their lives, like in the case of our persona, Isaac. This feature also targets one of the scenarios from the persona Claudia we created in which she wished her roommate would compensate her for their rent payment at a reasonable time, instead of paying her weeks later. This notification system would remind her roommate that she has an upcoming payment.

We created an account page so people can view, manage, and change account information and settings. A user’s account information is displayed in case they forget the information they used to sign up. This can be useful for example if someone else wants to add you to their group but you don’t remember your username. A user’s payment methods are also listed and available to be edited, in the case that a user does not have one registered, a method has expired, or if a user simply wants to have multiple to choose from. It also gives users the option to toggle notification preferences, giving them control over the content they receive, although it is recommended to have these notification preferences enabled so that payment groups are more effective. Lastly, of course, there is a logout button so a user can use another account or create a new one.