Design Approaches for Leading Mutual Fund Mobile Application

It was only from mid-2008 with the advent of smartphones, like HTC Dream, or Apple iPhone that it reached the mainstream, taking advantage of all the functionalities that these devices provide.
As per Gadgetsnow, usage of the smartphones by Indian users grew by 43% in 2016 and 92% in 2015. A major thing to notice is that “Business and finance apps grew 176% YoY, and productivity apps grew 99% YoY.

Seeing India’s last six-month Mobile Usage trends & growth rate, this is a bright time for focus on local India users and create products which are crafted for them specially.

Project Brief:

To design a mobile application, for a leading Mutual Fund house in India. This application will cater online investors using their mobile devices. The application has to be user-friendly for use mainly from demography of India.

The client is one of the largest mutual fund houses in India and a well-established name in the country. They have the vision to lead the mutual fund domain in India by next couple of years.

Platforms: Android & iPhone Operating Systems

Top Challenges

1. We have to accommodate all the contents from existing web portal into the app. A general mobile screen is 4.5 to 5.5 inches in comparison to a desktop screen size which is approx 18 inch or more. The mobile user has to access all content action through his fingers and thumb press only.

2. Typical Mutual Fund application has so many task flow to deal with, few examples: User On Boarding, Initiating a Transaction, Top Up Transaction, Cancel Transaction, Buying New Schemes, Transferring Dividends, Doing Redemption, and more.

We have to accommodate them in the mobile layout in a scalable manner.

Our Design Approach:

We have followed the design approach ‘Define > Ideate > Prototype > Analyse’ for this project. As described by our research team, we have to keep the user experience simple, fast and engaging for the actual users. We have selected native app components of Android & iOS to make application loading time fast.

The Visual Design:

During the design discovery phase, we have conducted many UX exercises, moving forward, we have worked on “Paper-Prototypes, Wireframe and Personas. Based on the results, we have started the visual design.

We have to simplify processes of application like New User Onboarding, New Scheme Buying, Redemption of a scheme, etc. Also, we have to keep the design clean and modern for users.

Let’s have a look at some of the highlights of Visual Design:

Navigation

We have used Hamburger menu which is highly promoted by Google and bottom bar style navigation which allows the user to access information quickly and easily.

By doing this, we have made sure that most important destinations in the app are always available for the users. Wherein Hamburger menu can have all other flows.

Important: In bottom nav, we have given names to tabs for easy identification, as few icons used are not universal.

Better Use of the Brand Color

When we think about HDFC, the big blue, cyan, and red colors always come into our mind. Blue is the primary color we have used as it highlight action items, top header, and big headings. Cyan is used as other supporting color and use of Red is limited in design for showing errors or alerts only.

Less Screen Scrolling

We have done some experiments at certain places, like on the dashboard, rather than giving a long scrolling page we have broken the content into various parts/slides which look very useful. Also, it gives a much-needed relief from long scrolling screen.

Material Design Forms

We have used Material design promoted by Google itself, for the native application, It’s used especially on Forms, Action Items and Content Groups (Cards).

Material design is based on flat elements, bold graphic and clear fonts, Multi layered approach, responsive and meaningful interactions. It provides a synchronized design solution which works across various platforms and screen sizes. With delightful interactions and clean segmented forms which prove engaging for users.

In an application, initiating a transaction is the most important feature. We have tried to follow material design for basic UI elements like – Input fields, Select boxes, Checkbox, Radio Button, Call to Action Buttons, Popovers with a mixture of Bold Graphics and Fonts.

Prototype Design:

We have used Invision for sharing running prototypes among internal teams and later on with clients to have a good sense of how actual app will function before finalizing the end product.

The Conclusion Or Key Takeaways

Designing for a financial domain application is always a learning curve for every visual designer. I am listing down some of the key learning or takeaways below:

– Got to know about CAMS:  There are hundreds of Mutual Fund schemes, Many distributors, Many Investors, and so many AMCs which provides Mutual Fund Services. This whole Eco-system managed by cams only and as a designer you have to align your designs as per CAMs compliances.

– Keeping up the design simple, usable and Focused to the tasks, the design should always Meet the requirements of an Indian mutual fund investor/distributor.

– We used ‘Google’s design framework – Material Design’ in our application. Especially on Transaction Screens, Folio Creation & New Investor Registration Forms, Call to Actions, UI Interactions, Component Grouping and basic usability items of application. It also helped to improve the better UI/UX and better user engagement.

In an MF application, there is a big amount of textual items shown like notifications, transactions, AUMs, Dividend & Investor related data. We have to use a font which is very much readable and scalable, seeing this we have used Roboto Font family, which is promoted by the material design itself and very much supported by most of iOS & Android devices also it looks beautiful on mobile devices.

– Understanding of Mutual Fund and its challenges, day to day activity of a mutual fund application user and how good design can solve their problems.

– Collaborating with large development team together using Zeplin & Photoshop Artboards technique to keep everyone on the same page.