UI suggestions


#40

Achieving Parity

Not my greatest idea, though it’s worth a look at. Whilst striving to achieve parity between both the Android and iOS versions of the app, there is a big difference which keeps the two apart (besides the green button of course). The Android version of the app uses a “hamburger” menu located to the top left of the app, whereas the iOS version uses an always-on-screen icon bar.

Both design paradigms allow for the icon bar at the bottom of the screen as witnessed in the Android YouTube app. In the future, it may be worth considering this so as to create more of a likeness between the two app versions.

I myself prefer the hamburger menu, for it allows for more than five options. However, I do like the constraint of only being able to have five icons, for it requires better planning when creating new sections within their master categories.

Keeping the Hamburger Menu

Alternatively, the hamburger menu could be kept, though contain only five categories. Add Money and Pay would be removed from the menu and located elsewhere.

As Add Money is currently accessible via a [ + ] icon on the Home Screen, there’s no reason why a [ - ] icon can’t signify paying money. Each one could be placed either side of your balance so as to either add or subtract (pay) money.

Goals would become “Saving” and would be under the “Funds” section along with the new “Lending” tab for borrowing money via a loan or overdraft.

Card becomes Manage (mistakenly called account in my mock-up), and encapsulates Card and Account Management.

These were my initial thoughts on the matter. I hope I got some juices flowing. All the best team!

Dan


#41

Home Screen Improvement Pay/Add

It is currently possible within the Home screen to navigate to the ‘Add money’ section via the ‘Plus’ icon.

I propose adding a ‘Subtract’ icon to the left of the balance which would allow you to navigate to the ‘Pay’ section, taking you immediately to your ‘Payees’.


#42

Honest effort, unfortunately this would be often misinterpreted as a stepper control where you can lower or raise the amount/value in the middle, which is actually not what it would do and this would then break https://en.wikipedia.org/wiki/Principle_of_least_astonishment.


#43

I considered this whilst creating the mock up and you are absolutely right. I don’t however see it as an issue as it technically would be a stepper control. Paying money decreases your balance, just as Adding money increases it.

Alternatively, the icons for both Pay and Add Money could be used instead of Plus and Subtract.


#44

Given the impending removal of crediting your account by debit card, the ‘+’ icon could soon be removed completely reverting to how the balance was shown many iterations ago, which was always a cleaner look. The options to switch va CASS could then be moved to within hamburger menu (Android) or picture icon menu (iOS).


#45

The Starling Colours

Messing around once again on Photoshop, I found that incorporating more of the Starling colour scheme adds a bit more depth and contrast to the app. Sure I made some modifications too whilst brainstorming ideas, though solely in terms of colour, I think it’d be nice to get away from the old White and Grey.

NOTE: This mock up isn’t entirely complete as I did not include any form of month selection or category/merchant toggle. This is purely to demonstrate how the aesthetics of the app could be updated to add more contrast and separation between the different graphical elements.


#46

I wasn’t previously aware of this design principle: https://en.wikipedia.org/wiki/Principle_of_least_astonishment

Thanks a lot for the info. It was an interesting read.

Regarding the above statement, I would say that same applies to the Plus button in its current state (despite lacking the opposition of a Minus button). There is no reason to believe that pressing it won’t increase your balance (without the need for a bank transfer). In that sense I would say that it also breaks the Principle of least astonishment.

Stepper-wise

  • Pressing the Plus button leads to an area (Add Money) which gives you the ability to increase your balance (via bank transfer).
  • Pressing the Minus button leads you to an area (Pay) which gives you the ability to decrease your balance (via bank transfer to another).

I would say that this classifies as a form of stepper, unconventional as it may be.

However, I agree that despite this logic, better alternatives exist.


#47

I had a look at something similar but wondering if the decision to use white was to avoid it looking too similar to monzo’s as their top band is a navy blue.


#48

I really like that. The white and grey colours at the moment are bland and no particular element stands out. It’s a shame if they feel deterred to make a particular design choice due to a possible similarity in a rival app. If they can’t use their own colours in their own app they may aswell throw in the towel.


#49

Here’s a thought. Sometimes I find myself looking at a long list of transactions from one retailer. However they’re not all from the same store.

Would be good from Spending under a catagory like Groceries where you have 25 entries for Tesco’s in a month to see a map view and be able to click a retailers location pin. Then could show all transactions from that month and location.

Know you can search by location from home screen swiping up. But there’s not useful totals there without adding it up manually.

Pretty sure I’ve seen an old screenshot somewhere that used to show total number of transactions and average spend too.

Any thoughts?


#50

Keypad Update

This isn’t a major concern, though the keypad is very cramped at the moment despite an abundance of space on the screen.

Those on Android will noticed the keypad I have up used, for it is the lock screen keypad.

Some users create a PIN from a small word by using the letters underneath the numbers. If your word was “Bank” for example, your PIN would be “2265”.

Worth looking at I’d say.


#51


Goals Images - Inconsistency
#52

A Million likes for this please! Would love for the text not to overlap the picture for goals.


#53

Would anyone with a screen resolution of either 1440x2560 OR 1440x2880 be able to send me a screenshot of their overdraft screens & loan screens? Block out all sensitive information as appropriate. I need a template. Cheers!

Note: Android also :grin:


#54

Monzo is strongly better here. Having to swipe down for the map is something that I find myself doing for every look at a transaction. And it is good that notes are now available, but they are almost always off the bottom of the screen for me


#55

Colour Palette Concept v1.0

In an effort to inject more colour into the Starling App, I have done the following:

[Image #1]

  • Made menus reflect the main purple colouring of Starling.

[Image #2]

  • Made category images more vivid instead of the light pastel colouring.
  • Made progress bars reflect the colours of the category they belong to.

[Image #3]

  • Made the menu colours change to reflect the category you are currently inside of.
  • Made the roundup icons reflect the colour of the current category also.

As always, feedback is most welcome :grin:


#56

Looks great @SirDanOKeefe :+1: love all the mock ups you’ve been creating


#57

Great work, just a brief quick comment: I know you mentioned in the Coin jar thread you had removed the round up indicator for simplicity, but having the amounts under each transaction without an indicator of what they mean sort of looks like it’s a fee of some kind. I’ve seen other apps use a subtext to outline forex rates/fees, for example.


#58

I agree. I was between a rock and a hard place trying to keep it simple and yet keeping it intuitive. At a glance, it may correlate to the user that the amount displayed for the roundup is exactly the amount required to make a full pound. A “What’s New?” demo could make you aware of this.

What I don’t like about the Monzo method is that it lies to you. It simply combines the roundup amount with the transaction amount which gives the user incorrect information. You may look at your transaction and think you have overpaid.

Perhaps the roundup icon should be adjacent the roundup amount, though I know @jcwacky won’t be happy :yum:


#59

:stuck_out_tongue_winking_eye: I was actually thinking that having the icon on one side and the amount on the other actually disassociated them with each other, so I agree it would be best to have the icon next to the rounded up amount so it’s clearer what that amount actually is. But maybe the icon could be a little subtler to avoid making that column harder to scan?