Remember that UI design you all hated? We explain it here šŸ‘‡

Hello hello :wave:t2:! I’m Emma - Senior Staff Engineer, recently just passed my 6 year anniversary at Monzo! I joined as the second Android engineer, and have worked across all sorts of features over the years.

A little while ago, some of you might remember seeing a thread with a strange new UI on Android. I’m here today to explain what this was about!

Background

We’ve been thinking a lot about our app structure lately — most specifically around how it can support the growth and complexity we need it to, both now as well as in the future. We last redesigned the app a few years ago, to make more space for core features like Pots. That design worked well, but the app (and the company!) have kept growing since then.

I’m currently the technical lead for a team called ā€˜app evolution’. Our mission is to evolve the app up to a whole new level :sparkles:

A side note on the team’s name: we picked this name (thanks @maxwhite) because it feels big, full of promise and exciting, but also gradual and attainable. Plus, there’s so much potential for PokĆ©mon memes :wink:!

App Evolution

In late 2021, we started off this work with a design and user research discovery phase where we framed the problems, and dug deep into them. The top themes were:

  • A lot of our value isn’t easy to discover — customers think of us as a spending card, and often don’t know about functionality like Pots. To help people discover new products and features, we’d often decide to add them as a new tab in the app so people could find them (which obviously doesn’t scale!)
  • Engaged customers with multiple products need a better experience — there’s no central place to manage multiple cards, moving money around between accounts/knowing which one you’re in is tricky.
  • Ongoing account management is hard — finding previous messages from Monzo is a pain, search isn’t very powerful, and core banking functionality like account number & sort code or bank statements should be easier to find.

From here, I joined @leepethers and together we spent 6 weeks across late May/June 2022 learning and planning how we might go about tackling them: continuing to put customers at the centre of our thinking.

We decided that we’d start with building new Home screen: it’s a pretty important part of the app! Plus, it gave us quite a few good opportunities:

  • :bar_chart: We can give customers better visibility & control of all their finances, whether they’re inside or outside of Monzo.
  • :dancing_women: We can personalise the experience, to better support customers whether they’re here to pay down debt, or grow their money.
  • :paw_prints: We can make it easier to keep track of everything, and surface where best to put their attention, for example with best next steps, etc.

So…. What about that weird UI?

Whilst we were planning how to go about addressing the problems we’d identified, I built a technical demo on Android with the intention of learning. I wanted to explore both the problems we might face with building a new home, as well as what data we have available and in what format we might eventually need it.

When I put it in Labs for myself to try out with my own data, I misconfigured the feature flag. For a brief 10 minute window it was public! It was then when @seig turned it on. The feature flag had no impact until the new screen made its way into the app we ship to all customers — I kept it local for quite a while, because I didn’t want to affect the main app at all. I was on holiday at the time it went live accidentally, which wasn’t ideal :joy:

It was pretty interesting to read the reactions — seems like most of you hated it, which honestly is pretty fair! It was very rough, plus I took some serious liberties with the designs at the time to make my life easier implementing it :sweat_smile:

Where we are today

I’m posting this explanation today to give a bit of context around my mistake, partly because I bet some of you were curious about what the heck happened here, but partly as a way to start the conversation about the app evolution work.

As with our previous redesign, we really want to engage with you folks to get your feedback on what we’re thinking — it’s always super interesting. Money is such a complex and personal topic: the more perspectives we can hear on what we’re working on, the better.

We’re currently working towards a v1 iteration of the new Home screen. I’ll save the sneak peak designs for the next post though :wink: — this post is long enough already. Plus, can’t give it all away at once, eh?

57 Likes

Thanks for the detail @emmag.

I love the openness, transparency and reasoning behind the potential re-design. If I had to say two things though, clearly personal opinion

  • Please don’t, I actually really like the current UI

  • The same, but in bold

9 Likes

Just to add to this, one of the things that really irk’s me is the plus tab which takes up valuable app space, and the unclearable ā€œget monzo premiumā€ bar above my summary.

Would be really great in the re-design if adverts for plus, premium etc were snoozable for a period of time.

11 Likes

Thank you for this - love that I managed to stumble on something at such a weirdly specific window :slight_smile:

Interested to see how this goes - and always eager to give feedback once you’re ready for it next time!

6 Likes

yeah, it was pretty impressive to turn it on within 10 minutes :smiley:. Truly a testament to how engaged you folks are! :heart:

9 Likes

As someone who has always disliked the swipey cards UI – fee free to press Delete and start again please.

5 Likes

I second the getting rid of the plus/premium tabs. It’s a waste of space for someone who might already have those products.

But I do like the idea of a central home hub - I like the idea of ā€œtilesā€ that might sometimes change depending on the context (eg. ā€œyou’ve spent Ā£x on coffees this month so farā€) - akin to NatWest’s attempt with their ā€œNewsfeedā€.

Also just to add this kind of post brings me joy just because it’s so… Monzo and brings me back to the older days of engaging users and the community. It has a fresh excitement to it, which is great.

23 Likes

Very much in favour of tinkering with the design. Might be worth having a ā€˜new ux’ test tab to gather usability feedback on officially rather than accidentally :smiley:

As a small screen-haver, the cards occupy a ton of space on my screen. They look cool but feel a bit off. If they stay, it might make sense to have the Monzo card be the center of the user experience rather than the left-most starting experience, and use the left of the card for something else? :slight_smile:

Also, it’s great to see this level of transparency on what’s gone on. Thanks!

4 Likes

I use the labs to have my joint account first and have 3 pots on the joint account. On my personal, I have flex and two pots. I hate having to swipe through all these cards to get to the personal pot.

I know you can swipe down to pull up all the accounts overview but I think there must be a better way to display all the accounts and pots as an overview and have the option to jump into one of them when needed.

3 Likes

Please do similar to this, it’s one of the best things about the Natwest app!

3 Likes

Getting rid of premium / plus gradients.

2 Likes

Oh wow wow wow.

Firstly, thanks so much for the post and for closing off that particular mystery.

I’ve really fond memories of @bruno and the V2 iteration, so really keen to be along for the ride again!

I’ll no doubt spam this thread with overly long posts and links to thoughts I’ve had before, but here are my hopes:

  • Kill the card metaphor. It really doesn’t work for the Monzo = spending card thing.
  • A more flexible feed that can show multiple accounts and which has advanced search / filters would be amazing
  • The pull down accounts screen list thing really needs to be a separate tab, and be extended to show net worth etc.
  • Fixing the hierarchy between your Monzo app, Monzo current account, connected cards and pots etc. It’s still confusing about where app settings are vs current account info etc.
  • Make a big call: what is Monzo for? Is it a current account, a suite of Monzo products or a financial hub? Then tell us! Form follows function, after all.

Oh, and let’s not have too much diversion between the US and the UK. I worry a bit that the problems are the same but you’re over localising (maybe because the US team is still more in start up mode?)

And yes, it has to spark joy! :joy:

15 Likes

My favourite iteration was the prepaid interface because it was so simple… the information you wanted was there and it worked like all other apps, there were limited places you needed to click to ā€˜explore’ (burger menu, and later tabs, which are so common they’re learned behaviour now). The current interface just feels like it’s trying to hide stuff in random places so you don’t find it.

Obviously monzo does more than it did then… and trying to do more in the tiny space available on a mobile is a tough problem… I don’t envy you the task of restructuring all of that… As others have said I really don’t think the cards interface works though - especially when it’s polluted with adverts… perhaps a combined feed that you can filter (and the filter sticking as a user preference).

7 Likes

This :point_up:

1 Like

These both sound great! The personalisation in particular now there are so many different features/areas of the app.

Very excited for the sneak peeks :eyes:

6 Likes

Waiting.
Waiting.
Waiting.

giphy
:soon:

12 Likes

Please do and thank you for starting the conversation. It’s how the community should be, though at the same time it’s not always possible to please everyone.

Regarding the ā€œtestā€ UI for me another personal request would be to keep the landing screen as simple as possible.

One of the things I like most about the current UI is how simple the accounts screen ā€œat a glance view isā€

I can open the app, quickly check my balance in all pots and connected accounts and be on my way.

Here are some other thoughts I have, for consideration.

  • Plus tab adds little to no value. I mentioned it before but again here to really reiterate that.
  • a better use of that space would be a dashboard showing spending over time, insights and money saving tips.
  • I think the whole card UI takes up way took much space. I’d rather that simply showed your balance, your budget and the card was on a different tab for management.
  • I guess there are plans but the whole clicking around between summary and budget isn’t nice, would be great to just have one thing there.
  • the search transactions is a little hidden for me
  • I actually don’t mind the plus gradient, but the ability to disable and re enable it would be great.
  • I’m not overly convinced how useful merchant logos are. Feels like it’d be a nicer UI without.
  • the bar at the bottom is super nice to use as is
  • the transaction feed, would love to see the Ā£ symbol in front of the values.
5 Likes

I’ve just reread @emmag’s post and I think this needs quoting for truth.

So so important. I wonder if radical UI changes are worth less than a whole bunch of smaller quality of life improvements.

(My worry with every ā€œevolutionā€ is that it is never finished. There’s always the best of intentions to fix things as they go but it never happens. So we need to have essential stuff right at the core of any new design).

8 Likes

I agree, this is a solution looking for a problem. The current interface is fine. Not everyone likes it, and Monzo has to accept that. Because, news flash, not everyone will like what you create. What you have needs tweaks for sure, it needs some tidying up.

You really should not be starting over two (?) years after the previous radical overhaul. Evolution not revolution.

5 Likes