Native app for Android & iOS

Smart Money

My role:
UI Designer

Tools:
Balsamiq
Figma

Responsibilities:
UI design
Usability testing

In an attempt to stay in control of their finances, users have on average 2.5 finance apps on their phones. Finance isn’t an easy topic, and juggling between many apps makes it even a more difficult one.

Enter: Smart Money. An app that helps to save time and get a solid grip over your savings, expenses, and investments from one single place.

Design process

Ideation

Competitive analysis
Stories
User flow

Week 1

Building

Wireframes
Design system

Week 1-2

Testing

User testing

Week 2

Iterating

Feedback-based iteration
Prototyping
Conclusion & learnings

Week 2-3

The challenge

  • Create a native app that allows people to overview all their finances in one place.

  • Adapt design to iOS and Android, making sure both versions are equally user-friendly and have a unified, coherent look.

The results

  • 32 high-fidelity screens, following Human Interface Design and Material Design guidelines.

  • Overall positive UI feedback based on user testing.

01

Ideation

I started off by analysing some popular finance apps on the market to understand their functionality and see what they're both good and bad at. There were two that stood out the most:

Pros
  • Great onboarding

  • Visually pleasing experience
  • All expense categories are colour-coded, with visual breakdowns and percentages
  • Daily prompt makes it easy to see how much is left to budget
  • Offers adding any repeated expenses to avoid repetitive tasks for users
Cons
  • Paywall for more features that make the app more useful

  • A slightly overwhelming amount of features that make the app time-costly to learn
Pros
  • Real-time transaction overview

  • The combination of AI and own user input improve the UX of the app, making it a strong product on the market.
  • Easy to see how much is left to budget overall, with how many days left
  • Good amount of useful features without overwhelming the user
Cons
  • Dry, corporate design, sometimes not too visually pleasing

  • A paywall on some of the useful budget overview features.
  • Expense categories are there but detailed breakdown is missing

The analysis already gave me insights for writing user stories at the next stage. It also gave me a few ideas of what I’d like my own app to look like and what kind of product features it should include.

For example, I made sure that the app is simple, not overwhelming the users with features; that different expense categories are nicely colour-coded and organised; that design is visually pleasing; and that users’ lives are made easier by helping them connect the app with their banks of choice for automatic transactions’ pulling.

User stories

After identifying the competitor apps, I decided to work on the following issues in order to create a product that would deliver users features that are competitive with the rest of the apps:

User flow

02

Wireframes

Based on the user flow above, I created the first low-fi wireframes using Balsamiq. Below are the initial ideas I came up with for two main screens - Home & Budget - as well as one secondary screen for a “deeper” view of the Bills and an edit screen.

Low-fidelity screens

Adapting to iOS & Android

At this stage already, I started thinking of the differences between the iOS and Android logic. I carefully studied the differences between Google’s Material Design and Apple’s Human Interface Guidelines. There were a few stylistic differences between iOS and Android, mainly to do with buttons and navigations.

To guide myself, I created a side-by-side comparison on low-fi wireframes first, which I then later on referred to as I was fleshing out mid-fidelity screens.

Human Interface Design vs. Material Design

Mid-fidelity screens

After creating a clear guideline for iOS and Android designs, I then moved from Balsamiq to Figma and fleshed out the screens.

Design system

Colour palette

Considering the fact I was designing a finance app, I still wanted to incorporate “serious” colours. My choice fell on blue: a colour traditionally considered trustworthy, dependable, and fiscally responsible.

The blue went together with the black, white and a grey.

To make the app vibrant and visually appealing, I also chose a secondary colour palette based on warm yellow, green and pink. I also opted for a faded palette to support the accent colours for, e.g. for colour-coding.

Buttons, icons & components

I also selected a set of navigation icons for the iOS app, created the stylings for all the Android buttons. There were also common icons shared between the  apps, as well as the colour-coded expense categories:

High-fidelity screens

Now that the visual details were decided upon, I could add the higher level of polish to my iOS and Android wireframes in order to prototype them and collect feedback from potential users.

Below are the initial screens for iOS:

And Android:

03 / 04

Testing & Iterating

Now that I have my mid-fi screens, it was time test them in action. Using Figma, I created a prototype both for Android and iOS and recruited 6 users for my initial usability testing (3 for iOS and 3 for Android).

During this usability test, I asked participants to complete two tasks:

  • Sync a bank with an app

  • Adjust the budget for “Bills”

Iterations: Home Screen

The graph needed some adjustment, as one user carefully noticed that the value doesn’t match the “y” scale and the point doesn’t “sit” on the line.

Another thing discovered was that people liked specificity in numbers when it comes to finances. Adjusting the numbers to include digits and decimals was essential.

More contrast in the “current month” progress slider was suggested, as well as the “add budget” button. Mistakenly, I also used the same icons for budget categories, so I also created individual ones.

Next on, most participants found the wording “money moves” quite unusual and the trend graph itself not very useful. Instead, it was suggested to add an overview of the synced bank accounts, which indeed made more sense.

Before:

After:

New screen: Transactions

For this kind of app, and also due to the above-mentioned addition for synced bank accounts, one user pointed out there should be a list of individual transactions. I therefore created a deep view for the Checking Account as an example that, indeed, provided a live list of all bank transactions so that users could have a better overview of their money flow.

“Bills” view

During usability testing, users found issues with the small ‘edit’ button. To make the experience more user-friendly, I placed a prominent button below instead of the icon.

It also seemed more logical to pair categories with the actual bills’ expenses, so I moved the categories below the text prompt.

Before:

After:

Deep view: individual expense

During testing, users also expressed it would be useful to get a more detailed overview of each bill, so I created that screen.

Prototyping

As the last step of this project, I developed an interactive prototype for both iOS and Android. Both are available here:

Learnings from the project

During this student project, I learned a great deal about Human Interface Design and Material Design. It was a challenge to think of all the small differences, but I believe I managed to maintain a cohesive look for both app versions.

I was glad to hear that users found the app visually pleasing and learned a lot from their user feedback.


Things I would have done differently

Since this project was more focusing on Android vs iOS UI rather than UX, I wasn't given an opportunity to do more user tests. I believe in validating design ideas and the user flow early, before getting into UI. And I would have also loved to get user feedback on actual living prototypes, on both devices, at the final stage.

Finally, for this project I only focused on 2 simple user flows. I would love to do more and add an investment section to the app, for instance, in order to increase a product value.

More case studies:

Responsive e-commerce web app