The scope filter logo with tagline Visual design without the noise. The logo is of a smiling blue telescopefish head in profile view. It has large tubular eyes.

Micro Bank Mobile App

Micro Bank is a fictional neobank which aims to appeal to a younger audience.

You can read about some background behind the logo or keep reading for information on the mobile app design.

The micro bank mobile app with a mockup of two Samsung S21 phones laid face up overlapping each other. The app log in screen and a card management screen are shown.

Detail

The screen size was chosen to be 360x800px as it was the most popular mobile phone screen size in October 2022 according to StatCounter. This fits the size of a Samsung Galaxy S20 or S21 which runs an Android operating system.

A top down view of a aligned tilted grid of different app screens. Each page has a grainy grayscale background of either a moon behind clouds or abstract grunge textures. Buttons are in orange with black text and black fill icons. The back navigation buttons and some headings have white text on a black background. Example app pages include the homepage with navigation buttons, the card management page, a summary page with a pie chart of spendings, personalisation with icon and colour scheme selection and a goals page with an example goal to save $50 this week.

Target Audience Interviews

An interview with three members of the target demographic (18-25 years) indicated the three most desired additional features from a banking app were:

  • Personalisation
  • Self-service and Independence
  • Customisation

Interviewees expressed interest in having the ability to personalise the visuals of the app through choosing a colour scheme, fonts, or a dark mode UI.

Self service included the ability to manage your own finances and tools to help you save money or track spending.

Customisation is similar to personalisation but with a focus on improved user experience, such as choosing different font sizes.

Based on this information I included personalisation, goals, and summary (spendings pie chart) pages in the app. I communicated a punk visual style through a limited colour palette, custom icons, and textured background images.

The tools used for this project include Adobe Illustrator for icons, Adobe XD for wireframing and prototyping, and Affinity Designer for the mockups.

Three app screens shown in full side by side. The first is the main menu navigation. Text reads 'What's up, Customer Name?' at the top, the Micro Bank logo is positioned underneath followed by the buttons labeled Accounts, Payments, Contact Us, Settings, and Log Out. The Accounts icon is a grumpy pig, the payments icon is of two phones with an arrow and a metal hand signal on them, the contact us icon is a speech bubble with a question mark, and the settings icon is a spike choker that is reminescent of the gear settings icon. The personalisation screen has the following headings: Select Icon, Select Colour Scheme, and Select Font Size. In the Select Icon section are three icons to choose from, one is a grinning face with spiked teeth, the second is a scheming face, and the last is a smiling face with an eyepatch and swirly eye. The colour palette selections include black and mohawk orange, black and plaid green, and eyedropper custom icons. The Goals screen has the following buttons, Goal 1 Save $50 this week, Goal 2 Save $100 this month, Add a New Goal, Delete a Goal, Edit a Goal, and a See Summary button. A graphic under Goal 1 shows four points leading to a flag, with a 20 percent dot highlighted, start and end dates, and goal progress.

App Feedback

Four users tried the app and completed a 10 question user experience survey which used a Likert scale (5 options from Strongly Disagree to Strongly Agree).

The highest scoring categories included:

  • Visual Design (93.3%, most users selected Strongly Agree)
  • App Functionality (86.67%, most users selected Agree or Strongly Agree)

Those testing the app and completing the survey commented postively on the app visuals.

Credits

Icons were customised from base open source Lucide.dev icons using glyphs from the logo typefaces and Adobe Illustrator.

Phone homepage icons are from ICONS8.

Try the App!

This app is a prototype so not every button leads somewhere, but you can get a better impression how the app feels by using it.

Click where there are no buttons to highlight clickable buttons.

Return to Portfolio