Task 1.2 — App Wireframe / Prototype

In this blog post I’ll be linking the prototype built for the idea on proto.io platform.

Here’s the prototype pdf (built by my partner Rajat Mishra and myself):

protoio-Expense Calculator.pdf

Now, excluding the registration/login/logout screens, here are the three major screens which our app consists of :

Screen 1 — Right after user logins

The first screen has a side-navbar which lists the groups of which the user is a member of. On the top right is the logout button which will redirect to the home registration/login page. And there’s an option to either create a new group or join an existing group. This button will redirect us to the second screen. We have groups in order to keep the expenses separate for each group. A user can be connected to more than one group. This will shown right after the user has successfully logged in. For starters, if we have to calculate expenses for wither of the groups listed left, we can also click one of them to directly enter the third screen. We can now move on to the next screens.

Here’s the second screen :

Screen 2 — Create/Join group

The second screen will give the option to create a new group, or to join an existing group, by allowing the user to enter the group name. It also has a back button to return back to previous screen as well as the sign out button. And again the listed groups on the side-navbar on the left can be clicked to enter the group information page, i.e. the third screen. The UI is themed same for all the 3 screens, to provide simplicity of design and readability. Either of the buttons for creation of group of joining of a given group will redirect to the group information page, i.e, the third screen. Thus, the second screen basically just provides a link/ bridge between user and group for which the user needs to calculate expenses.

Now moving to the third screen :

Screen 3 — Group Page

The third screen has to do with the main task of calculating expenses for a selected group. Like the previous screens, it also has a sign out and back buttons, as well as the side-navbar on the left displaying the lists of other groups of which the currently logged in user is a member of. Besides these features, there’s a list of the group members (users residing in the current group) and the logged in user can now enter data regarding the expenses using enter data button or review the existing calculations using the calculate button. The data entered will consist of date of expense, amount spent, and description of the expense.

Thus, we discussed the three major screens of our app from the prototype, further details can be found by revisiting the prototype pdf (at the top of this blog).

Here’s the platform we’ll be building our app on :

Hasura | Build apps fast | Batteries included PaaS