UI/UX case study: MB WAY

An amazing payment app with a usability problem

The interbank network Multibanco (MB), owned and operated by SIBS, is something that I’m very proud of as a Portuguese. Having lived in and visited many countries worldwide, I have missed its endless functionalities and amazing user experience too many times to count. It honestly is by far the best ATM system I’ve ever used.

A few years ago, SIBS created a mobile app called MB WAY. It is an amalgamation of helpful and diverse features, some of which were already achievable in other ways such as creating free virtual credit cards; and a few new functionalities, including paying with your smartphone. It was and still is an innovative app in Portugal, a country with no international mobile payment systems available such as those of Apple and Google.

However, the app’s user experience (UX) is severely lacking, and as SIBS adds more features they are getting haphazardly added to the user interface (UI). That is very uncharacteristic of the company and may contribute to lower user engagement over time.

Based on my friends’ and my own experience with the Android version of the app, I systematised what I considered were its problems and conducted a small usability test with a couple of people who were also familiar with the app. During this small experiment I discovered that the iOS version of the app is drastically different from the Android version (which is, in itself, another problem), but for the sake of simplicity and because I own an Android device I only focused on the latter.

What can you do with MB WAY exactly?

To use it, you need to add one or more of your credit or debit cards. Afterwards you’re free to:

• Make payments with NFC technology;
• Make payments by scanning a QR code;
• Make payments by giving your phone number at a store;
• Check your latest MB WAY account movements;
• Create and manage free temporary virtual credit cards;
• Get a code that can be used at any ATM instead of a card to retrieve a set amount of money;
• Transfer money to a friend through their phone number (as long as they are also on MB WAY);
• Participate in “MB WAY Challenge”, a continuous contest that gives monthly rewards to those that use the app the most and refer it to their friends;
• Get information about exclusive discounts, participating stores, and nearby MB ATMs.

The shortcomings of the current MB WAY app

The MB WAY app as it stands has very useful features encased in a less-than-ideal user experience. I’d like to focus on two interfaces that are, in my opinion, particularly problematic: the homepage and the menu.

The main page of the app has weird choices regarding the size of its elements, with rarely used features being more highlighted than important options. It has an option to refresh the page, which is weird because the only data that can change in the entire page is the “last accessed on” info. And it has a hamburger menu (which has its own problems) but it also has menu options outside of it.

The menu, when opened, is huge. And that would be fine if justifiable, but a great part of it is dedicated to settings, with each setting being given its own button. I think that happened due to the progressive addition of features and the lack of interest in revamping the structure of the app, but as it stands it’s not really user-friendly. The whole menu is just a bit of a mess overall.

These are the most glaring issues that worsen the app’s usability, from my perspective, though there are other parts of it that could be tweaked. So, how can we tackle this situation?

How I approached the problem

I decided to make a few mockups of how the app could look like if the user experience was given more importance.

I started by writing a list of all the aspects of the app’s UI that could be improved, some of which I already mentioned. I also asked two people who use it regularly to get their opinions. Then I started sketching some alternative interfaces.

I focused first on what I should keep, and decided that MB WAY’s look was too unique to disregard. So I chose to keep the simple and striking colour scheme (based mostly on the #d52027 red, #d1d2d4 gray, and white), the quirky font (the most similar free font I could find was Sofia Pro Light), and the extensive use of icons.

After developing each mockup I went back to my “consultants” to get their feedback, which means that some interfaces went through many iterations before the final version.

MB WAY 2.0: a revamped UI for a better UX

Below are the alternative designs that I created for each interface. I made some assumptions regarding the use of the app based on the way my friends and I use it. We are such a small sample that I could be wrong on the overall trends; therefore I would advise SIBS, who has the resources I lack, to conduct more extensive usability tests to better understand their customers’ habits.

Main page

This is a payment app, and as such it is my belief that the main page, which is the first thing you see when you open the app, should have all of the payment options so you can access them as quickly as possible. If too many unimportant buttons get in the way, users won’t have a smooth payment experience.

As such, I created a wheel with the five options that I see as the most potentially urgent for a user, highlighting the NFC payment option. You may notice that I also revamped the menu. Instead of a huge hidden side menu, I was able to combine all of the app’s features in only five tabs.

Transactions page

Here I opted to give more importance to the transactions themselves and not the card they were made with; after all, that’s what the user clicked to see. That option is still there, but it does not overwhelm the interface.

Virtual cards page

The page to manage your virtual cards didn’t originally let you create a new one, which is very counter-intuitive. I added that option as a floating action button, a staple of Google’s Material Theme and hence a very familiar way to do it. The cards themselves are shaped like cards to add some personality to the page and to further differentiate it from the transaction page.

Profile page

MB WAY currently does not have a profile page. Its ongoing contest, however, has a page that is very similar to what a profile page could be. I think that here the main problem was the lack of vision when creating that interface. The interfaces should always be as future-proof as possible, and the creation of a profile page seemed like an obvious way to be prepared and avoids having to add more and more pages for every single new feature that gets added.

Settings page

The main problem with the settings aren’t the options themselves or their individual interfaces, but rather the fact that they are all separated.

Conclusion

These are my main suggestions for MB WAY. There are some details I didn’t get into, such as the very first tab on the menu (which in my opinion could be kept as it is currently, containing information such as discounts and participating stores) or pop-up windows and similarly small interfaces, mostly because they don’t affect most users’ experience as much as the interfaces I mentioned. However, if the app is eventually redesigned, every single aspect of it should be looked at carefully.

I hope this case study can inspire SIBS to overhaul their app, and any other developer to think more carefully about the UX they’re providing. If you have any comments, suggestions or ideas, please feel free to let me know in the comments!