When your app involves handling a user's money, any minor issue with user experience or design will shake their confidence in your product. If you can't get design right, how do you expect your customers to trust the security of their money?
Let's consider the use case where you're brought into a contract position for a financial app that already exists. The functionality is already in place, so you don't have much control on high level user experience (onboarding flow, navigation, etc.) Your role isn't to design the pages from scratch or anything like that. You're strictly there to make them look nice with some CSS and minor changes to the HTML here and there.
I'll assume you already have a grasp of the UX fundamentals, but I will touch on these as they relate specifically to a financial app.
Here is a brief list of considerations before you go digging into the stylesheets.
1. ) Show Users What They Want
There is a reason your user is on a specific page. They're looking for certain information or want to perform an action. If it's account balances they're after, make sure the numbers displayed are prominent enough that it's the first thing the user's eye naturally gravitates to. And if it's an action they need to take, make sure the button or call to action pops off the screen. Bold colors and drop shadows can help here.
In the example by HIX below, notice where your eyes go first. Do they go to the numbers or colors?
2.) Less is More
Minimalism is in, but bland is not. So if you're only authorized to use bland (AKA safe) colors, there should be some other interesting elements to keep the user's attention. Depending on the brand personality, this can range from subtle animations that reassure your user that some process just completed successfully to modern dashboard design that includes design like layering, drop shadows, rounded edges, transparent backdrops, etc. When you're designing for mobile, it's important not to go too wild here since these design choices can impact performance in lower bandwidth use cases.
In the example below, the designer Mira creates a beautiful dashboard in grayscale.
3. ) Get Your Input Mode Right
The HTML input tag attribute of inputmode is supported by all mobile browsers. Do you know exactly what your user will input? Why distract them with any unnecessary keyboard elements?
Take a look at the below infographic by @stefanjudis. If the input was for the amount stated on a check, for instance, what inputmode could you use?
Conclusion
While coming into a project that's already designed can feel limiting, there's plenty of value you can add working with CSS alone. Just stay laser focused on why your user is on a page, and your knowledge of the UX fundamentals can take you far.
If you have a financial app design project coming up, visit these for some inspiration:
Top 10 Banking Apps UI/UX Design Case Studies
Go to your phone and computer to study the financial apps and websites you use. What works well? Why does it work?
Top comments (0)