The prospect of a redesigned transaction feed

I’ve discussed the possibility of a potentially redesigned transaction feed several times over the past few months in various different threads. Inspired by @Peter_G’s suggestion to start a dedicated thread to discuss this stuff, I’ve gone ahead and made that thread!

I’ll first of all start with why I think we’re due an update to the layout of the feed.

Over the past year or so Monzo has been gradually updating the look and feel of the app. One tab at a time. Monzo has never (I don’t think) had a consistent design language across every aspect of their app, and this endeavour has for the first time unified their design language across the entire app bringing greater coherence. There are a lot of benefits to this. Greater usability, greater accessibility, easier to maintain, fewer unique assets, less code.

Dark mode. Having a unified and coherent design language that’s reused throughout the entire app with fewer or no unique elements makes designing, building, and testing a feature like dark mode much easier. It drastically simplifies what can otherwise be a very arduous and painstakingly long process. A coherent design language makes designing and building the interface for new features easier too! Because most of the work is already done and can simply be reused.

This journey began (I believe) with the introduction of the best version of Monzo Plus and the Plus tab. Every element within every sub page of that tab, and every feature (like making and managing virtual cards) of Monzo Plus launched with the new UI first shown here:

This continued with the overhauled payments tab here:

And this is also when we first saw a sneak peek at a dark mode, which was shown off using the new UI here:

This new design language has since rolled out to other parts of the app. Help has been updated with the interface. The list view of your accounts that you swipe down from the home tab to access has been updated. The settings page, the add money page, the pots creation and edit pages all updated with the new UI. The recently added manage tab, and virtual cards pot linking all have the new interface too. Transactions have the new design (though feel unfinished). Trends has the new design. And summary just acquired it with the new testflight release today.

This leaves one major omission that has so far remained untouched. The feed. Will they update the design of the feed? If they do, what will it look like?

I think they will update the feed. And as for what it looks like, I think we can take cues from how the rest of the app has been updated and draw assumptions from that. Monzo are not the only company adopting this modern look though. Many others are too, including other banks, and I think a quick look at their feeds may give us an insight into how the Monzo feed may look too.

Here’s Revolut’s feed as an example.

And another example from @Alexxxxx here:

If the feed does receive a design upgrade, what then will this mean for the card pane at the top, and the carousel in general? This new UI is significantly less dense, so saving as much space above the feed as possible will be important. Perhaps we’ll see the carousel retire in favour of the swipe down list. And have a more condensed header like what exists on the trends tab here:

The swiping left/right for navigating between pots and accounts wouldn’t even need to go away either. They could implement it so that you could instead swipe anywhere on the feed to go left or right to the next account/pot. Similar to how Zen and Cash App work.

I have a lot of speculative thoughts on this and could arguably type for much longer and go much more in depth. But I’m curious to read the thoughts of others, so I’ll leave it here for now with a few questions to close.

  1. Do you think the feed will be redesigned in line with the rest of the app?
  2. Do you think it needs redesigning in line with the rest of the app?
  3. What do you think of the new design language in general?
  4. How do you feel about this approach to rolling out a new design? Would you have preferred a design overhaul for the whole app to drop at once, or do you prefer the one tab at a time approach that they’ve taken here?
6 Likes

Charge your phone!

3 Likes

Yes - I think this will coincide with a ‘master feed’

Yes

Love it - think all the iterations are coming together really cohesively.

Absolutely the one tab at a time approach. Imagine how limiting it would be if they hadn’t!

1 Like

Fascinating!

Kinda. I see the accounts / pots selector being standard across all/most tabs in the future - but I don’t think that Monzo will necessarily change the look of the feed. I think the wide margins take up too much screen real-estate. But, then again, there are examples of this elsewhere in the app, so who knows?

It doesn’t really stand out to me as requiring alignment for its own sake. But I do think that it needs work for accessibility: a separate tab for accounts/pots would be a start. And Monzo’s never really found the best home for things like app and accounts settings - so maybe with the retirement of the blue buttons, time has come for a more radical rethink.

Despite my many mocks, I don’t actually see a new design language (but then maybe I’m design-deaf) - more an evolution over time. The problem is pace of change - things never seem to get finished, so I worry a bit that things like the removal of the blue buttons, or even Trends, will get superseded by the next Big Idea - which in turn is never delivered on.

Philosophically, I’m in the iterative, little and often camp. But it doesn’t really matter that much to me as long as it’s committed to and seen through. (See my answer to the previous question!).

(I might mess with some mocks later…)

Quoting for truth.

2 Likes

A few mocks incoming as I’m playing around with some concepts:

Concept 1: the account selector from Trends is replicated on the home screen, the cards carousel is retired because it’s redundant, the feed itself remains unchanged.

2 Likes

And here’s a revised version with the transaction list à la Trends. Having seen it, I actually quite like it…

The feed/manage tab has artefacts - the background would need to be tidied up to match the grey, but this is just a quick concept.

3 Likes

I think your assessment is sort of right. It’s not a radical new design language, but is more of an evolution of their existing one from the big redesign that did away with the pulse graph. It just feels fresh, because it’s a more noticeable change to how information is presented in the app.

It’s a shift rather than an overhaul that’s meant to bring some depth back to the tiring flat design. Depth is an important usability and accessibility cue that was often lost with a flatter design language.

Monzo has always adhered pretty closely to the iOS human interface guidelines, even, I think, with their android app. This evolution is absolutely in line with their adherence to that. If you use iOS, you’ll have noticed this evolution beginning in iOS 14 and being finalised in iOS 15 (it’s everywhere now!). It’s only natural Monzo would evolve their own layout to follow suit.

To me it seems like we’re slowly but surely marching ever closer towards neumorphism, which is a design language I personally really love, and is one we’re in the process of readying to deploy in 2022. Would have been sooner, but it has some new accessibility challenges that are taking a little longer to get right.

I think I’m the opposite! Shifts in user interface design are more apparent when they come at once, and I like that. Makes the whole thing feel new.

The iterative approach has a few issues in my view. It leaves it forever feeling unfinished, and when it is finally complete, it no longer feels new and fresh, almost ready for more refinements. Change is less likely to be noticed when it’s gradual too. During the transition, nothing feels quite right with the contrasting interface designs which I’ve always found to be a bit frustrating. And of course it’s exactly how you put it:

The difference between Monzo launching a finished product is night and day compared to their more iterative releases that never get finished. But I hope their UI transition does get finished, culminating with a dark mode, just as much as I hope Trends doesn’t get abandoned before it’s finished either! Monzo are doing better on this front lately though, so I’m optimistic they won’t just abandon unfinished released projects anymore.

Can’t wait to see the rest, but that first mock-up perfectly captures where I was thinking with this bit:

I think your mock-up of the transaction feed is a good example of where I see the feed design going!

As for the feed / manage tabs, and the content within the manage tabs too, I think we’ll see the colours swap around. So the background will be grey, as opposed to white, and the boxes will be white. Dark mode just wouldn’t work right otherwise, and would result in the same contrast misstep that Starling made in some places.

Quick edit: I think the feed/manage buttons are likely to adopt the style of buttons used atop the payments tab.

2 Likes

Interesting - the ones on the payment tab predate the ones on the feed.

Actually, what do they look like on iOS? Here’s Android:

My sense is that the Payments tab is due a complete refresh. I suspect the earlier (abandoned?) attempt was because they realised that it conflicted with some of the pay-from-pots stuff (and the new elements we see in connected accounts and Trends).

On iOS they look like this:

Fits the the rest of the design nicely. I do think it’s an older UI component that’s been around for many years, but it’s aged very well and is still used everywhere one of these tab bars exist, like here:

And here:

Didn’t it just go through a refresh? It seems to have the same updated layout as the rest of the app to me, bar a few sub pages.

Also noted from the payments tab, that adopting the style of header from trends, retiring the carousel makes a lot more sense to me now, because it would bring it in line with payments tab too.

1 Like

I do wish they’d update the account title on the payments tab to match the typography on the trends tab. The mismatch is a bit jarring (especially since they’re at the same place on the screen)


4 Likes

The way you switch from personal to joint on the Payments screen should match now the Trends selector. Though I hope Monzo give the Payments screen another go and this time finish it off. Hello incoming payments from payee name matching saved Payee name, complete with avatar :slightly_smiling_face:

I’d like to see the new design incorporated into the transaction feed. Monzo should make a decision on white/grey or grey/white.

4 Likes