İşCep PFM
Personal finance
Giving people one place in İşCep to see and plan their spending.
İşCep is the mobile app of Türkiye İş Bankası. Spending in it was split across three places, and checking a single card payment was harder than it looked. Personal Finance Management brought it into one tab, which shipped as the Spending tab.
As a Senior Designer at Commencis, I worked on it with a fellow designer, and together we did the research and the early wireframes. I then did the visual design, the prototypes and the final screens, and later designed the cash-flow forecast.
- 3 monthsof your own spending pre-fills a new limit
- RoleSenior Designer at Commencis
- ClientTürkiye İş Bankası
- PlatformiOS and Android app
The problem
Spending sat in three places, and many people couldn’t find a payment on their own bill.
Money out of your accounts showed up in account activity. Card spending sat somewhere else, under your cards. And the home screen had a transactions tab of its own.
In a test of the old app, one task asked people to check whether a 350 TL grocery shop had made it onto their card bill.
Only half of them managed it without help.
50%could check a 350 TL grocery shop on their card bill without help
Yet 82% rated the task easy. People opened the card detail, didn’t see the 350 TL shop, and concluded it wasn’t on the bill.
The card statement listed the spending but showed no total.
“I want to see the total on my card summary. I couldn’t find it.”
People also mixed up transactions and spending, and each person read them differently. Card spending was split across three tabs that many people missed.
“Normally I’d look in my transactions. It feels easier to me.”
In account activity, one person tried to tap a transaction to see more, and was surprised it didn’t open.
The idea
Everything in one tab.
Everything moved into one tab, İşlemlerim, “my transactions”: accounts and cards together, sorted and grouped, with your month on top.
It answers three questions, in this order: how am I doing this month, where is it going, and what happens next.
Shaping it
The month first, then the detail.
The home opens on a single line: what you’ve spent this month, next to your monthly average. The total people missed in the old app now comes first.
Two cards come next, your limits and your weekly report, then a carousel of useful facts, then your transactions. Scroll up and the transactions take over the screen.
Decisions
Seven decisions behind the tab.
Decision 01
From the month down to the shop.
The useful facts carousel picks out one thing at a time, like the category taking the biggest share of your month.
Spending by category opens as a ring, with your total and monthly average in the middle and an icon on every slice. It shows six categories at most, because I think a ring gets hard to read with more.
Every category then opens to show where the money went, shop by shop.
Decision 02
Limits that start from your own average.
The first time you open limits, Maxi, the bank’s assistant, explains the three kinds: for your whole spending, for one card, or for one category.
Pick what to limit, and it arrives already filled in with your average there over the last three months. You start from your own habit, not a blank field.
Plus and minus move in steps of 50, then 100, then 200 the longer and faster you press, and a keypad is there if you already know the number.
Your limits then live on one page, each with a bar that fills as the month goes on.
Decision 03
Three tones for three situations.
A heads-up when you’re getting close.
A clear note when you’ve gone over one.
And a well done when everything is inside.
Decision 04
A weekly report.
When a new report is ready, Maxi says so: last week’s card and account spending, looked at for you.
The report shows the week day by day, your total against the week before, and where most of it went. It ends with two facts: your biggest single spend, and the place you spent most often.
Decision 05
Transactions you can open.
Transactions are grouped by category, and a category with several payments opens in place.
You can search them, filter them, and clear the filter in one tap.
Decision 06
Hand over to the assistant.
A card at the bottom of the tab offers to look at your spending habits together. It opens Maxi, İşCep’s AI assistant.
Decision 07
A warning before cash runs short.
Later came the tab’s next step: a cash-flow forecast. A new card on the home says that, based on our forecast, you may run short of cash on a given day.
Tap it and you see the days ahead as a simple chart, with the days that could go negative in red, next to what you already have in your accounts.
Each forecast comes with options built from your own limits, so the warning always has a next step: raise your overdraft, take an instalment cash advance, or use a credit limit you already have.
It also asks whether the forecast helped, with a simple yes or no.
In motion
Motion and empty states.
Some moments you can’t judge from a still, so I prototyped them. The notes on the limit screen open like a drawer.
And the home hands over to your transactions as you scroll.
Every part of the tab also got an empty state, so nobody lands on a blank card before their first transaction, report or forecast.
Iterations
What the first review changed.
The first round only let you limit a category. After the review you could also limit a credit card.
The bank felt the home looked crowded. We argued the visual modules earned their place, and drew a text-only version in case the visual design didn’t hold up.
What I’d question now
The home may still be too busy.
I still think spending needs a picture, and I’d defend the visual modules again. But a total, limits, a weekly report, a carousel and a list is a lot for one screen. Today I’d put the home in front of a few people before arguing for it.
Lessons
What I took away.
Start from the person’s own numbers. A limit drawn from your last three months is, I believe, easier to accept than any number we could pick for you.
Tone is part of the design. A “well done” says something a red bar can’t.
And a warning needs a next step. The forecast is built so it never arrives without something you can do.
The final screens
The Spending tab, screen by screen.
