Finley App Redesign
Told from a designer’s point of view
Recently I was approached to redesign an App called Finley. They were looking to pivot their look and feel to be more refined than to what they previously had. This meant I had to take what was there and fine tune it so it’s cleaner and easier to use while at the same time retaining same the functionality and flow.
First screen up was the “Visa Screen” which is the most important screen in the app, this is where the user can load money, request money and see their card activity.
Here are the before and after screenshots:
As you can see majority of the elements are the same, but the easy flow was missing. For example, in the original the user had to click on “Card Activity” to get to another screen to see the activity thus providing an unnecessary extra tap. So what we did is list the card activity on the same screen so users can easily swipe up.
Managing vertical space is very important here. In the original it wasn’t necessary to have the balance take up a lot of room in the header, it can be reduced to gain vertical space and tightening up the real state.
Don’t forget the scroll!
It may get overlooked, but its important to consider how the screen looks on scroll and how your can retain header info along with that. Goal here was to have the balance visible on scroll so users can still easily reference and have access to the menu items. Gradient along with a soft shadow was left here to create a nicer aesthetic.
Tools Screen
Second most important screen is the “Tools Screen”, where users can see their spending, spending limit, pool activity and access to emergency funds. This screen was a bit tricky because there is quite a bit of info to fit into the one screen.
See before and after below:
One of the biggest challenges was fitting the progress bar for users spending activity. Because there could be more than one, we had to reduce the circle progress bar so that all 6 limits can fit in that space. There is a quick main summary of how they’re all doing on spending overall and also users have an option to swipe left to see each progress on their own. By doing this we accomplished what we needed to do in that space and the user has everything they need to know about their spending.
The footer
Along with the screen redesigns, I was also given the task to give the footer icons an uplift and more clear metaphors for easier understanding.
See below for before and after screenshot:
First step in redesigning the footer icon is getting rid of any unnecessary noise and to give a clear and precise metaphor for each one.
They are as following: Card, Tools, Payments, Friends and More.
- Card: I thought that the original “star” or “ribbon” icon didn’t make too much sense in reference to the card screen, so I reduced it to direct metaphor and provided with a card icon instead.
- Tools: Original icon was a card for the tools screen, which again, didn’t make too much sense as where there are more uses for the tools page aside from card reference. Because we use the circular progress bars on that page I thought that would be the most fitting direct metaphor for this icon.
- Payments: I thought the original icon was pretty close to the metaphor that we should have here, but I wasn’t sure if coins were the best approach since there are other ways to make payments besides that. I went with “Wallet” design to capture that broader spectrum for that screen.
- Friends: This icon was very straight forward, there wasn’t too much back and forth. I thought the best icon here was to show a couple of people icon to resemble the “Friends” screen.
- More: This icon is also fairly simple, my thinking behind listing the “…” in a circle can give it that direct look that there is more to click on.
