MB Way

The process

I followed the Design Thinking Process: discover, define, develop, deliver. I analyzed the usability of the app, empathized with its users and then re-designed the app based on my research findings.

My role

As an unsolicited solo project, my role included project management, product design, user research, wireframing, prototyping, testing, interviewing, and everything in between.

Deconstructing the current design

The second step consisted of deconstructing the current design, inspecting each and every feature, and unrevealing its exact intention.

I began by auditing the main screens of the app and all its features, making sure I understood why everything was there and how it worked. This step was crucial to fully understand what I was getting myself into, what already works and what, at first glance, I would change.

Empathizing with the user

The fourth step consisted of better understanding the users, their habits and the problems they face within this specific mobile-banking context.

I began by conducting quantitative user research to better understand the users’ habits and frustrations. This research was done via Google Forms and involved 17 Portuguese MB WAY users. Then, to dive deeper into this data, I performed qualitative research, interviewing 5 users and asking them to perform a set of tests while explaining their thoughts out loud. Here are the major takeaways (in Portuguese):

With all these insights on my hands, I felt the need to synthesize them.

I started by creating an Affinity Diagram to organise and group my insights. Then, I moved on to create personas - fictional characters based on my research to represent different types of users that might use MB Way, as well as their goals, motivations, frustrations and skills.

Ideating and brainstorming

The sixth step consisted of getting my creative juices flowing and generating as many ideas as I possibly could in the shortest amount of time.

After identifying the problems, it was time to create solutions. I started by scoping out banking apps and making observations on which layouts worked best. Then, I went on to brainstorming, generating many ideas and sketching them out on paper. I had a lot of fun doing this and, without much hassle, was able to estimate what could go on a screen, how to organize the layout and how it all could work out.

This was a big step, to bring my ideas down on paper after all that research. This allowed me to explore different layouts rather than focusing on design details, and ultimately, it allowed me to diverge my ideas before converging back and committing to higher fidelity designs.

Wireframing and testing

The eighth step consisted of gathering all my findings so far, wireframing my proposed solution in mid-fidelity and testing it with some users.

I started this phase by creating a digitally structured version of my hand-sketches on Sketch. The idea was for these wireframes to provide a clear overview of the page structure, layout, information architecture, functionality, and user flow. Then, I built a prototype on which to test my ideas and performed usability tests with 5 different users, giving them tasks and encouraging them to “think aloud” and speak up whatever came to their mind, while I observed their behaviour. This was an important step to evaluate and validate the design directly with users, allowing me to identify problems in the current design, uncover opportunities to improve, and later iterate my designs based on my findings.

The solution

The tenth and last step consisted of designing the solution by implementing the usability test results allied to the UI style guide defined on the last step.

After analysing the results of the usability tests and creating the UI style guide, I started by iterating the sitemap based on the usability tests results and then went on to create high-fidelity screen mockups on Sketch. Here are the 5 main experiences I worked on:

➝ Experience 1: Navigation

PROBLEM: The navigation is so confusing. Most of the features are not used, some of which users don’t even know to exist.

SOLUTION: I simplified the navigation by grouping similar items under the same category. Instead of having a big card and 8 action items on the main screen, I reduced it to 4 action items. Instead of having 4 items on the navigation bar, one of which users NEVER used (‘Challenge’) and another one with a very unsuggestive name (‘Mais’), I reduced it to 3 and used suggestive icons instead of text. Moreover, on the hamburger menu screen, I opted to place a photo of the user and an icon to change their personal information, and then categorize every action into groups with clear titles. I also used arrows to show when the user can expand an item or not, and used toggle switches whenever possible.

➝ Experience 2: Splitting bills

PROBLEM: Splitting a bill is a real pain. Most users don’t use this feature as feel frustrated by having to search each contact one by one.

SOLUTION: In the current version of the MB Way app, the user has to search and select each name one by one, when splitting a bill between a group of people. In my re-designed version, the user will be presented with a screen where he can quickly write the value and description, and visually select the contacts with whom he wants to split a bill with by tapping on their photos/names. Moreover, if the user clicks on the + icon, he can easily create groups with whom he usually splits bills (like house bills, etc..). All he has to do it tap on the group to quickly split a bill between all its members.

➝ Experience 3: Managing cards

PROBLEM: Managing cards is a quest. Adding a physical/virtual card, reordering, editing or deleting them is all done on different screens.

SOLUTION: Currently, the MB Way user can add a physical card on the main screen, add a virtual card on another screen, and reorder, edit or delete them under the ‘Mais’ screen. Most of the users I interviewed didn’t even know it was possible to reorder and edit the cards, because everything is so spread out and confusing. My solution connects every card-related task under the ‘Cards’ button, allowing for management of all types of accounts and enabling users to easily monitor, manage and add them. This way, the user will have an overview of all his cards, physical and virtual. He will have the option of filtering them to view only a certain type of card and will be able to view each card, its settings and info individually. The user will be able to easily view the card details by clicking on the eye icon and quickly add a new card, physical or virtual, by clicking on the floating + icon.

➝ Experience 4: Managing activity

PROBLEM: Visualizing your activity is dead boring. Most users feel frustrated as it offers them no insights or analysis whatsoever.

SOLUTION: Right now, users can only view a history of their transactions. My proposal is to offer a balance chart, providing a lot of valuable information on the users spending habits. Users can choose to view transactions of a certain card or all cards, and can have the chart showing the insights of the year, month or week. Users can also create new categories and easily view related transactions under the same category. My goal was to show money movement in a clear, simple and insightful way, making sure the user has full financial control.

➝ Experience 5: Getting support

PROBLEM: Asking for support is virtually impossible. Users can’t find a way to get support through the app.

SOLUTION: On all me interviews, no user was able to contact MB Way’s customer support - and that’s because it is impossible through the app. To do so, the user would have to go to the the app’s website, and there they can actually access a chat and get support. In my re-designed version, users will be able to get support through the app by tapping on the hamburger menu and scrolling down to where is says Help (‘Ajuda’). There, the user can either chose to view the FAQ’s or choose to get support though the chat.