Projects About LinkedIn
UX/UI Case Study
mBills App Redesign
This is mostly a UI case study whith a pinch of UX. I’ve tried to turn an outdated mobile banking app into something modern and handy.
Role
Concept, Visuals
Duration
Feb - Mar 2022

Tools Used

Figma, Whimsical, Affinity Designer

Problem

mBills is a popular mobile application in Slovenia for quick and easy shopping, paying bills and transferring money to loved ones.
The current look of the mBills iOS app
The current application is visually outdated, and also has a number of usability flaws. This may repel some of the potential users of the application, especially in the presence of actively developing competitors. The young generation is accustomed to convenient and modern services and apps and prefers them.

Solution

After analyzing the application itself and its competitors, I recreated several key pages. As a result, user interaction with the application has become simpler and easier, the visual style has become modern, neat and minimalist.
The current logo
In the course of work, I realized that the current logo of the service also looks outdated and does not fit well into the new design. So I changed the logo and app icon as well.

Process

Logo
First, I’ll talk about changing the logo and the app icon. I kept the brand recognizable by keeping the main color palette and rounded font, but completely rethought the logo itself. From three blue and one green circles, I made one concise circle with a gradient, which symbolizes the simplicity and ease of use of the service as well as the technological basis of the brand. The logo now looks modern and minimalistic. It’s easier to fit into the new design and it will better attract young users — the company’s core audience.
App Icon
With the new logo, updating the design of the app icon was a breeze. The circle is a simple shape and is perfectly placed in the center of the white icon. If necessary, the background of the icon can be dark, and the circle itself can become one-color or even multicolor.
App Design
Before starting work on a new app design, I created several wireframes. Then started the visual design of the application.
Main Screen
  1. The user’s avatar, along with the greeting and address by name, creates a greater emotional connection with the product. Tap on the avatar opens the app settings and the user profile settings.
  2. The list of recent transactions is placed in the most prominent place. It is neat, devoid of unnecessary information and includes of the logos of the main Slovenian retail chains.
  3. The list of recent recipients allows you to send more money in one tap.
  4. The most commonly used features of the app are bill payment via QR code scanning and payment / top up via barcode. Shortcuts to these actions are placed on the main screen for instant access.
  5. The buttons for topping up and sending money are located in an intuitive area next to the displayed amount on the account. After tapping on the button, a menu of quick actions appears below.
  6. Marketing banners are moved down, but remain visible. When you tap on the banner, a screen with a full description opens. If desired, the user can hide the banners.
  7. Minimalistic neat menu without unnecessary labels. The home screen icon is the product logo. Access to the settings is now possible by tapping on the avatar in the upper left corner.
Purchase Details
  1. Information about transaction is conveniently structured and made in the general style of information blocks.
  2. A store logo or a friend’s avatar allows you to recognize the place or type of purchase faster than the transaction type icon (a shopping cart, for example).
  3. Displaying a map helps you quickly remember the place of purchase.
Cards Overview
  1. Quick access to important functions. The lock button is highlighted in red for quick intuitive finding in an emergency situation.
  2. Neat display of information on the credit card. Unnecessary elements have been removed.
  3. Simplified and easier to read credit card settings block. The block is made in the same style as other similar blocks in the application.
Other Screens Comparison
Dark Theme
The current application does not have a dark theme at all. The dark appearance of the new application looks like this.
Colors and Fonts
Light theme. The light blue background of the new app is a reference to the main page of the old app. The buttons and some of the elements are colored in the blue color of the logo. The main information blocks and input fields are white, which makes the text on them as readable as possible.
Dark theme. I used muted colors from the light palette, and for the background I chose dark blue.
I used SF Compact Display font everywhere except for credit card lettering where I used JetBrains Mono.
Creative Process
During the design process, there were various ideas for change regarding wireframes. Here are some mockups to show how the process has evolved.

Bonus

As a bonus, I updated the design of the company’s credit cards. Removed unnecessary elements from the front side and placed the new logo.