UX Ideas

Looking good!

Like the others, I think the blue date bars are a bit too much. Maybe a pale grey of something, and collapsable?

I don’t mind the three figures, but I’d rather have a ‘left to spend’ figure from Summary. (Actually, I have half an idea about replacing Pulse with something that’s more like the Summary dial, but need to think about it more. I think the Pulse concept works better for a revised account screen (see mock here - with hindsight I think it’s too busy, but the concept’s sound, I think).)

Do you still have your Starling mock-ups? I remember thinking that one that @evangelskies mentioned was really clean and cool.

1 Like

I don’t do buses. :stuck_out_tongue_winking_eye:

Other than this I really like this design!

1 Like

I’m more interested in what @Dannytc has been up to in order to pay @D-T-O damages! :wink:

3 Likes

I would remove the word September from the top menu - the transactions say the month and you have a calendar icon on the top right. Seems like clutter as you should know the month and the calendar icon could do what you are planning with the written September option.

Blue too bright, especially for a hot coral bank (maybe I don’t like it as I don’t like Man City blue…).

Also:

Maybe merge in this thread

https://community.monzo.com/t/android-account-screen-mockup/47784

1 Like

Cheers for the feedback @Anilm3, @evangelskies, @Jackcrwhitney, @Peter_G, @glasgow & @Chapuys

I can’t accommodate everything, though I’m taking baby steps. Below is an updated version taking on board some of the feedback.

01 02

Changes include:

  1. The blue bars have been changed to a lighter and less distracting grey. Transactions are still well separated, though in a cleaner fashion.

  2. A rolling roundup figure for each day has been added to the day bar for each transaction day, allowing the user to see at a glance how many pennies have been saved that day.

  3. The graph/chart has been removed and replaced with a drop-down calendar, allowing the user to easily navigate through their transactions. Navigation via scrolling is obviously still possible and like the previous version, the Current Date Calendar icon will return you to the current day.

5 Likes

I notice you have used a fairly hefty screen size in your mockups. How would this translate to my tiny iPhone SE screen?

Hiya @tbutz,

Sadly I’m not an iPhone man and so generally tend to design only for android. However, I’m sure iOS has its own calendar navigation option which would scale accordingly and therefore accommodate your resolution.

image

1 Like

Hey @D-T-O

I just twigged it was an Android mockup once I’d sent the message (doh!) but my question was actually more about the 3 figures showing in the upper section (minus chart), sorry about being so vague!! The peril of asking a question in a rush.

Anyway, on my iPhone it barely has space for the 2 figures so squeezing another in the middle would be a problem. I’m sure there are Android phones with the same size issue(!). After much faff I’ve done a screen shot (I don’t mind you knowing my balance is so low, it’s payday this week!):

02

Haha, more money than me Tony! :grin:

I imagine there would be some sacrificing to be made, perhaps in that the “Money Received” option would not be displayed on your device, though available within the Summary section.

The layout for lower res screens is currently a little flawed anyway in that if you were dealing with larger figures, things begin to get pretty crowded. Designers try their best to accommodate all display sizes, though there does come a point where they’re really just cramming everything in. It may not look pretty, but it gets the job done. I’m just glad I didn’t upload a Quad HD mock up now :joy:

tony

1 Like

RIP :broken_heart: , I love the pulse graph.

A compromise for me would be that it collapses upwards as you scroll down the list.
If you scroll sideways on the graph it stays there and skips through the month of transactions below.

3 Likes

That’s actually much better! The rolling roundup makes everything much cleaner and the calendar is definitely something I’ve missed. Any ideas on navigating to previous months using the calendar?

Agreed, I don’t personally like the graph, but a lot of people do so it should probably be made optional in some way, I would vote for a specific app setting to enable it or disable it.

1 Like

Good idea!
My take is more a Material Theme (2) iteration and focuses on the very busy account screen.
Makes the hot coral stand out with the dark blue used as an accent colour throughout.

Account / Pots Update

The area I most admired within the Starling Bank app was the Goals section as the layout and simplicity somewhat inspired saving. Within the Monzo app however, elements are much more bunched together within the Account section requiring you to scroll past several different cards before arriving at your pots. I’ve made a wee mock up and once again invite all of your comments and feedback :grinning:

card pots

Updates:

  • Tabs have been introduced into the Account section, separating card and account management from pots.
  • Aesthetic changes/improvements.
7 Likes

Separating the pots from the card screen makes everything look much cleaner. I do wonder if there could be a way to make each individual pot take less space while keeping the image, but it still looks great as it is.

Personally I also like the tabs, but I’m curious to read what other people think about them.

1 Like

I like the pots tab. I still think it’s a bit naff that you can only see two pots fully though. A grid layout would be a lot better. The ‘artwork’ for each pot - especially in this overview screen - is too prominent. The pot value and buttons could be overlayed/better integrated.

Why not make the block with pot name and value transparent and overlay it on the pic? Or just collapse them all.

The ‘+ add’ and ‘- withdrawal’ might as well just be the + and - blue buttons. They could go pretty much anywhere else then and you save a bunch of space.

1 Like

Cheers for the comments all!

Like this @redshift? The ellipses dots would allow the user to interact with the Pot and clicking on the pot would perhaps take the user to a larger overview similar to my previous post. I wanted to work with a grid originally, though if the user has a single pot, a lot of screen space gets wasted. Something like this would be pretty neat though it’s not as ‘clean’ as my previous option.

I used the material guidelines to come up with the artwork size in the previous version and although the overall size of the blocks (including the buttons etc.) are seemingly large, they are really no bigger than most material cards. Looking at this newer version I’ve made in comparison, although it’s more space efficient, I still prefer my previous iteration.

2 Likes

You’ll be pleased to hear we are likely to see vertical design in the :monzo: app :soon:

6 Likes

Great mocks, @D-T-O.

I prefer the version you originally posted. It’s cleaner and feels less “busy”.

I also like the idea of a separate tab for pots if - and only if - Monzo doesn’t evolve to showing other current accounts. I think that the card + pots model only really works in the one current account world. I’m also a bit offput about the tab saying ‘card’ - it reinforces the idea that Monzo is a prepaid card rather than a fully fledged current account.

On that note, I wonder if you’d like to take a go at a cleaner / more elegant version of the account tab I mocked up here?

I’ll be keen to see how close it is to what I’ve mocked up over at Android - Account screen mockup
I really hope their direction includes the new material theming that we’ve seen on Google’s latest app updates i.e Messages

Thanks for sharing!

1 Like