Design process
Ideation
Competitive analysis
Stories
User flow
Week 1
Building
.png)
Wireframes
Design system
Week 1-2
Testing
.png)
User testing
Week 2
Iterating
.png)
Feedback-based iteration
Prototyping
Conclusion & learnings
Week 2-3
.png)
Native app for Android & iOS
My role:
UI Designer
Tools:
Balsamiq
Figma
Responsibilities:
UI design
Usability testing
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.
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
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.
32 high-fidelity screens, following Human Interface Design and Material Design guidelines.
Overall positive UI feedback based on user testing.
01
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:
Great onboarding
Paywall for more features that make the app more useful
Real-time transaction overview
Dry, corporate design, sometimes not too visually pleasing
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.
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:
.png)
02
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.
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.
After creating a clear guideline for iOS and Android designs, I then moved from Balsamiq to Figma and fleshed out the screens.
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.
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:
.png)
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
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”
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.
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.
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.
.png)
During testing, users also expressed it would be useful to get a more detailed overview of each bill, so I created that screen.
%20(1).png)
%20(2).png)
As the last step of this project, I developed an interactive prototype for both iOS and Android. Both are available here:
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.
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: