Designing the Time-Bank app
Today I present to you time-bank, the first android mobile app I designed. My journey started a few months ago when I started learning about UX design process by reading some books and did an online UX design course from springboard. This is the project from the same course and this article explains the design process. My final deliverables were a user flow sketches, a complete deck of wireframes and a set of visually designed screens.
Problem Statement
A time-bank is a bank which instead of using money as a means of exchange, it uses how much time people have worked. The time-bank allows people to exchange their time and expertise for another person’s time and expertise. To keep things simple, everyone’s time has equal value. My hour is worth the same amount as your hour.
The app works by keeping track of how many hours you have expended for other people. Then, if you need something done, you can hire someone else to do it for you. If it takes them 4 1/2 hours to do the task, you pay them with 4 1/2 hours from your time-bank account.
How time-banks work
Existing balance.
The time-bank app indicates how many hours of credit are in a person’s account.
Finding service providers
The app helps find all people who have advertised their availability to do a task and the amount of hours they charge for the service: we call these people the “Service providers.” Then, the app indicates which service providers are affordable, given the amount of hours in our time-bank.
Selecting a service provider
We then select a service provider: let’s assume we select Ram. The device then informs Ram of our acceptance of his offer and provides the means for us to correspond in order to agree upon the specifics.
Agreeing upon the transaction
Once the task is complete, our app provides a way of transferring hours from our account to Ram’s, where our app now indicates “less” hours are in our account.
New existing balance.
The time-bank app indicates just how many hours of credit are in our account, just as at the start, except it now reflects the lesser amount due to the transfer of hours to Ram.
Some early ideas
I started by writing the goal of the time-bank app and the actions the user will perform.
Goal: To find service providers and exchange our time with them for their services.
Actions: Login, search for service providers, give or receive time & view balance.
As the goals and actions were written, it became clear what screens we needed to design. Here are a few early sketches:
Then these sketches were shown to some users and I further refined them using the feedback.
Wire-framing
I started converting the sketches into wire-frames in illustrator for further refinement.
Visual Design
After the initial wire-frames were made, I started designing the app and refined it at the same time. The app was made keeping the google material design guidelines in mind.
Log in Screen
It takes user id and password to authenticate a user.
If the user has forgotten the password, it can be retrieved by contacting the bank. A password reset link is not provided due to bank security reasons.
Landing Page
It has all the professions of time-bank members in form of a scroll-able list.
Wallet balance in the top left corner shows the number of hours available.
Members Nearby button takes to the map to show all the members in your area.
Members Nearby
The pink icon indicates the members in your area.
Selected Category
It has the options to sort and filter the members based on location, experience, likes and fees.
Profile
The user can select the time slot for service. The unavailable slots are greyed out.
After the work is complete the Confirm Payment screen is shown.
Confirm Payment
Confirmation Screen
It has a Find other members button which takes back to the home screen. Check Balance button takes to the other screen which shows remaining balance.
Balance
It shows the remaining balance along with the latest transactions.
To Conclude
Designing Time-bank was an amazing experience. It was my first design and i learned a lot from the process.
