[DMP 2024]: Common UI Designs and Standards for Mobile Applications and Web Microfrontends

[edcable]

Description

Mifos and Fineract have become widely adopted digital public goods for financial inclusion extending a range of use cases beyond the original use case of microfinance. With this proliferation of use cases, there needs to be a differentiated user experience across mobile as well as web apps for staff as well as consumers. Right now for administrative staff of organizations delivering financial services using Mifos or Fineract, there is only one reference user interface with one singular user experience centered around group-lending operations. If an organization using the software has a different operational model or set of financial services products, it difficult to use this front-end for those capabilities. To address this the community is moving to adopt a micro-front end approach to have modular UI flows that be coupled together to create different end to end user experiences with a common codebase.

Similarly for our customer-facing applications like mobile wallets or mobile banking, we currently maintain separate UI components for each application. This is despite the fact that the flows are quite common across these apps (i.e. initiate transaction flow, view recent transactions flow, open a new account flow, view account details flow). We have started efforts to create a mobile library of common UI components that can be reused across the different mobile applications.

Despite the heterogeneity of use cases, there still exists a great degree of commonality in some of the screens and flows that are shared across these different applications, personas, or use cases.

This project would aim to research and create a set of common designs that be used for staff and customer-facing applications as well as across mobile, web, and desktop applications. These designs would serve as the foundation for any developer building a front-end regardless of use cases, regardless of persona, and regardless of device or form factor. This would enable consistency and look and feel of design across the different applications, re-usability of components across different platforms, dramatically accelerate the development time, increase maintainability of the apps, and help us move towards creating more responsive and accessible applications.

Key design-research questions

1. Define the user personas of staff using the Mifos and Fineract applications
2. Define the user personas of customers using customer-facing applications like mobile and online banking and mobile wallets.
3. What are the common screens/flows that are shared across the customer and staff user personas?
4. What are the common screens/flows that are shared across the different mobile applications?
5. How well does current design of user experience for staff and customer-facing apps align with industry standards for human-centered responsible design?
6. What enhancements needs to be made to the user experience to make the designs more inclusive and for users at the base of the pyramid?
7. How can Mifos improve accessibility of its user experiences, especially for customer-facing applications?

Current State

For staff applications we currently have our actively maintained web app built on Angular. This is essentially the fourth generation of our user interface for staff. The first generation was guided by usability experts from Stanford. Feedback and improvements from this first generation went into the second generation of our UI which was designed by a usability expert from VMware during her sabbatical. When we migrated over to AngularJS, we launched the 3rd generation of our UI without significant usability enhancements. Our 4th generation UI is built on Angular and Material design but once again it wasn’t driven by a lot of detailed usability research. We also have an Android/Kotlin app for mobile field operations.

For our customer-facing applications, as noted above, we have separately maintained front-end flows for our mobile wallet, mobile banking, and online banking applications. Most of the design was driven by the developers themselves with some more in-depth design input the past two years from volunteer UI designers for our mobile banking and mobile wallet applications. We have partially implemented our mobile UI library over the past two years with a limited set of shared components and a set of proposed guidelines and standards for buttons, colors, etc.

We currently have one designer that is helping us primarily with our mobile wallet flows by extending off of the figma design files we have there.

Desired State

As noted in the key research/design questions, we need to identify and define the common flows, then design these according to human-centered design principles for our target audience, and then build these flows in a way they can be leveraged across our mobile apps via a UI library as well as via micro-front ends for our web UI flows.

We think Compose Multiplatform might be a means to achieve this.

• The designs should have a consistent look and feel that is clean and professiona but user friendly.
• Designs should have standards and guidelines for consistent design, usage, and implementation.
• The chosen technology or platform to create the shared components should be usable across multiple devices (web, mobile, desktop) - Compose Multipllatform has emerged as a potential solution to achieve this.
• Implementation of the shared components should support SDK approach via mobile applications and micro-frontend with mono-repo for web applications.
• Creation and ability to develop from shared library of components should improve developer experience and dramatically reduce time to develop new user experiences for our applications.

Goals & Mid-Point Milestone

Goals

• [1] [Define the personas for staff users and customer users of our mobile applications]
• [2] [Conduct some research and testing into current usability of our applications for these personas.]
• [3] [Draft recommendations or enhancement to design to reflect the research findings]
• [4] [Identify and define the common UI components shared across personas, use cases and applications.]
• [5] [Implement designs in figma for these shared components along corresponding design standards and guideline]
• [6] [Give input to developers on the architecdture and repository structure for how common design components can be used across multiple applications.]
• [ ] [Set of common components adhering to guidelines and standards enhanced according to usability research.]

Acceptance Criteria

• Designs should be shared in a repository that is public and maintainable by our community
• Standards and guidelines proposed should be in line with the digital financial service guidelines maintained by CGAP, Center for Financial Inclusion, Digital Public Goods Alliance and others.
• Implementation of shared UI components should work with a mono-repo structure for microservices and multi-platform development via Kotlin.
• Commonly identified components should be able to be implemented end to end to support full digital financial service workflows and use cases as guided by our business analysts.

Existing Mockups/Wireframes

• Overview of Goals of Mifos UI Library: https://mifosforge.jira.com/wiki/spaces/MIFOSX/pages/3013476363/Mobile+App+UI+Library and progress in 2022: https://gist.github.com/rahul-gill/6700c366627a2c7007a07b96ff6c0785
• Video prototype of mobile wallet UI mockups from 2023 GSOC intern Rachit Gupta: https://youtu.be/wtLe6kM49oU and figma file: https://www.figma.com/file/0wj2eCGQ2KVK1NaTJ4BtbC/mobile-wallet?type=design&node-id=0%3A1&mode=design&t=fBbwjaEEWjoHO0ha-1
• Figma design file for mobile wallet from Fintecheando: https://www.figma.com/file/CkAb9BpiRdgEfryNx3ojsR/Mobile-Wallet-(Mifos-Editable)?type=design&node-id=69%3A167&mode=design&t=J42vUWUnU9WjE7j7-1
• Enhancements in 2020 to Mifos Mobile User Experience led by Shivangi based on deisgns from Rachit: https://gist.github.com/ShivangiSingh17/67b6041387c1e281caa7df23347f549e

Product Name

Mifos X

Organisation Name

The Mifos Initiative

Domain

Financial Inclusion

Mentor(s)

@edcable @DavidH-1