UX/UI Case Study
mBills App Redesign
Mostly a UI case study with a pinch of UX: I turned an outdated mobile banking app into something modern and handy.
Role
Concept, Visuals
Duration
Feb - Mar 2022

Tools Used

Figma, Whimsical, Affinity Designer

Problem

Note: mBills was discontinued in 2026. This case study reflects the app as it was in early 2022.

mBills is a popular Slovenian mobile app for quick payments, paying bills, and sending money to friends and family.
The current look of the mBills iOS app
The current app looks dated and has a number of usability flaws. That can put off potential users, especially with competitors moving fast — younger users are used to modern, convenient apps and choose them.

Solution

After analyzing the app and its competitors, I redesigned several key screens. Interaction became simpler, and the visual style became modern, clean and minimalist.
The current logo
Along the way I realized the current logo looked dated too and didn’t fit the new design, so I redesigned the logo and app icon as well.

Process

Logo
Let’s start with the logo and app icon. I kept the brand recognizable — same core palette and rounded typeface — but completely rethought the mark itself. Three blue circles and one green became a single gradient circle, symbolizing the simplicity and ease of the service as well as the brand’s technological foundation. The logo now looks modern and minimal, fits the new design more easily, and should appeal more to young users — the company’s core audience.
App Icon
With the new logo, updating the app icon was a breeze. The circle is a simple shape that sits perfectly in the center of a white icon. If needed, the background can go dark and the circle can be single-color or even multicolor.
App Design
Before the visual design, I created several wireframes.
Main Screen
  1. The avatar, greeting and first name create a stronger emotional connection with the product. Tapping the avatar opens app and profile settings.
  2. Recent transactions take the most prominent spot. The list is clean, free of unnecessary detail, and shows the logos of major Slovenian retail chains.
  3. Recent recipients let you send money again in one tap.
  4. The most-used features — paying bills by scanning a QR code and paying or topping up via barcode — get shortcuts on the home screen.
  5. Top-up and Send buttons sit next to the balance, where you’d expect them; tapping one opens a quick-actions menu below.
  6. Marketing banners moved down but stay visible; tapping one opens a full description, and users can hide them if they want.
  7. A minimal, clean tab bar without unnecessary labels. The Home icon is the product logo; settings are reached via the avatar in the top-left corner.
Purchase Details
  1. Transaction details are clearly structured and follow the app’s general card style.
  2. A store logo or a friend’s avatar identifies the place or type of purchase faster than a generic icon like a shopping cart.
  3. A map helps you quickly recall where the purchase was made.
Cards Overview
  1. Quick access to key functions. The Lock button is red so it’s easy to find in an emergency.
  2. Card information is shown cleanly, with unnecessary elements removed.
  3. A simpler, more readable card-settings block, styled consistently with similar blocks elsewhere in the app.
Other Screens Comparison
Dark Theme
The current app has no dark theme at all. Here’s how the new one looks in dark mode.
Colors and Fonts
Light theme. The light-blue background nods to the old app’s home screen. Buttons and some elements use the logo blue; main content blocks and input fields are white for maximum readability.
Dark theme. Muted versions of the light palette on a dark-blue background.
The typeface is SF Compact Display throughout, except for card numbers, which are set in JetBrains Mono.
Creative Process
The wireframes went through several rounds of changes along the way. Here are a few mockups showing how the design evolved.

Bonus

As a bonus, I refreshed the company’s debit cards: cleared unnecessary elements from the front and added the new logo.