Financial UX Design

What is UX Design?

User Experience (UX) Design is a process of increasing user satisfaction by improving the usability, accessibility, and enjoyment provided in the interaction between the user and a product. That's a typical definition you can find on many designer websites. What is missing?

As engineers, we are always adding the following aspects for consideration:

  • Do you know your customers, and how do they use your mobile app?

  • Do you have mobile usage analytics?

  • What about limitations? Do you know the boundaries of your solution and how they affect your mobile experience?

  • Do you know what (from what you want to see in your final product) is actually doable, and what is the price?

  • Do you have a design system? Is it consistent across your entire mobile application?

  • What about Tablets? Does your layouts system flexible enough to support various screen sizes?

  • Do you have a consistent error handling, retry-mechanisms, user-friendly communication of errors to the end-users?

  • What about Accessibility?

    • Is your UI design system adaptive to font scale factor changes or voice over control mode?

    • Do you have a color system? Is it compatible with the WCAG 2.0 level AA requirements?

Designers rarely ask these questions because of typical thinking patterns like:

  1. Design without awareness of limitations. ​

  2. Seek inspiration from other designers.

  3. Don't limit yourselves to stock UIKit (or other standard UI components).

Design without awareness of limitations. ​​

This means, in other words, you will get aesthetic but not functional user experience. It is nice to have such on your designer website portfolio but not as a solution for the real mobile app. The main reason why it is happening so often - aesthetic design sells, regardless of how it will work in the mobile app after the implementation.

The Aesthetic-Usability Effect: Why beautiful-looking products are preferred over usable-but-not-beautiful ones.

https://medium.com/coffee-and-junk/design-psychology-aesthetic-usability-effect-494ed0f22571

Seek inspiration from other designers.

Learn (copy) from the best. https://youtu.be/bEg5ySTUGxE?t=442

Designers name it: "Inspiration seeking". Later you will surprisingly come up with a fact that, inside the same mobile app, you see visually not related parts because of the differences in used design patterns, inspiringly taken from multiple places. 

Don't limit yourselves to stock UIKit.

There are two typical outcomes of such an approach: First, you will have many custom-designed UI components that are, in most cases, do not add any real value to the end-users. But often require a lot of additional afford during the development. And the second outcome: the same UI patterns, but in different parts of your mobile app, will work and look differently with the rationale that we do not want everything to be the same. We have to add something cool.

Our Process

Here in Fin.Design, we are doing quite boring things. The list of questions at the beginning of this article is annoying, but answering them in your design system and later during the implementation is a mandatory requirement to make your user experience enjoyable, functional and really useful to your users.

Our UX design process consists of 3 steps:
  1. Research

  2. Engineering

  3. UX Design

 

Research

  • Guides stakeholders through the "question everything" process to reveal the main business needs and requirements.

  • Do you have mobile usage analytics? The user research study is good, but the analysis of the real analytics data is the best way to know users.

  • Review product requirements, limitations, and boundaries.

Engineering

  • Creation of the User Journey Map as step-by-step sequences based on business and research data.

  • Defining Personas

  • Designing UX strategy based on User Journey Map.

  • Wireframes.

UX Design

  • Typography system.

  • Colors and branding style guide.

  • Design System for the entire mobile app.

  • Requirements for mobile analytics.

  • Adaptive layouts system

  • Aesthetic high-fidelity screens (for presentation needs)

iPhone X-XS – 1_2x.png
iPhone X-XS – 2_2x.png